Aller au contenu principal Aide Panneau de contrôle

360kmh.com

à la vitesse de l'imagination

Tribune web «   Réseautage social sur le web «  

Comment ajouter à votre site un bouton de partage sur Facebook

Instructions détaillées pour ajouter un bouton Facebook personnalisé à votre site web ou à votre blogue

Partager

Aimeriez-vous ajouter un bouton comme ci-contre à votre site web ou à votre blogue pour inviter vos lecteurs à partager leur découverte sur Facebook ?

C'est plus facile que vous ne le croyez. Je vous explique ici comment faire et je vous donne même un truc pour obtenir le code requis, tout prêt à copier-coller.

La documentation pour développeurs du site Facebook explique bien comment faire, mais seulement en anglais. J'espère que cette adaptation vous sera utile. Notez que si vous avez installé Facebook Connect, la façon de créer le bouton est différente de ce qui est indiqué ici.

Ajouter un bouton Partager sur Facebook

Il est facile d'ajouter un bouton « Partager sur Facebook » n'importe où sur votre site, si vous êtes le moindrement familier avec HTML. Il suffit d'inclure:

  • une balise <a> à l'endroit où vous voulez le bouton
  • une balise <script> quelque part dans la page

Ça ressemble à ceci :

<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Configurer votre bouton partager sur Facebook

Quelques informations vous suffiront pour personnaliser votre bouton :

  • il suffit d'insérer la balise <script> une seule fois dans la page, peu importe le nombre de boutons sur cette page
  • le bouton lui-même peut prendre un attribut type qui en modifiera l'apparence comme indiqué au tableau ci-dessous
  • le bouton peut également prendre un attribut share_url qui spécifie l'URL à partager (l'URL de la page où est placée le bouton est utilisée par défaut mais vous pouvez lier à une autre page ou directement à une image, une vidéo, un commentaire, etc.)
  • vous pouvez également mettre un texte de votre cru dans la balise <a> du bouton, par exemple
    <a name="fb_share">Partager</a> pour obtenir ceci : Partager
Ce code... affiche ce bouton... de cette taille...
<a name="fb_share" type="box_count" share_url="YOUR_URL"></a> 57x57 pixels
<a name="fb_share" type="button_count" share_url="YOUR_URL"></a> 96x18 pixels
<a name="fb_share" type="button" share_url="YOUR_URL"></a> 56x18 pixels
<a name="fb_share" type="icon_link" share_url="YOUR_URL">Share</a> Partager 51x15 pixels
<a name="fb_share" type="icon" share_url="YOUR_URL"></a> 18x15 pixels

L'assistant de création de bouton Facebook

Si cela vous apparaît trop compliqué ou si vous n'avez besoin que de peu de boutons, l'assistant de création de bouton fourni par Facebook vous évitera d'avoir à vous casser la tête, en vous fournissant un code personnalisé pour chacun de vos boutons. Il suffira de le copier-coller dans votre page web.

Si, au contraire, vous voulez aller plus loin, la documentation de Facebook à l'intention des développeurs fournit plus d'instructions sur Facebook Share (en anglais).

 

Fichiers

le super soyor - 37 750 octets, 591 téléchargements
modifié par Erick Songesa le 13 septembre 2013 · details
Le super soyor est une boisson de la Maison Song tiré du Soja mélanger au lait. C'est un produit. Delucieuse.
Maïgour - 66 111 octets, 453 téléchargements
modifié par Erick Songesa le 13 septembre 2013 · details
Le MaÏgour est une boisson tiré de MaÏs mélanger au lait. C'est un produit de la Maison Song.
sandjo kiluba - 90 948 octets, 487 téléchargements
modifié par Erick Songesa le 10 juillet 2013 · details
Dessin erick songesa. Produit maison song.
yaourt - 68 988 octets, 503 téléchargements
modifié par Erick Songesa le 10 juillet 2013 · details
Produit fabriquet à base des laits fermenter
Fb.jpg - 54 299 octets, 6 382 téléchargements
modifié par Bertrand le 7 avril 2011 · details
Partage2.jpg - 221 803 octets, 6 571 téléchargements
modifié par Denis SAVEY le 1er avril 2011 · details
Imgpartager.jpg - 91 710 octets, 5 437 téléchargements
modifié par Denis SAVEY le 31 mars 2011 · details

Commentaires

Denis SAVEY - le 31 mars 2011

Bonjour,

 

Tout d'abord merci pour cet artcile.

 

Je souhaiterais par ailleurs savoir comment faire pour insérer une description, une image, etc dans la pop-up qui souvre pour partager...

 

Merci bcp

 

Denis


Alain Lesage - le 31 mars 2011

Bonjour Denis, et bienvenue sur mon blogue.

Je ne m'en suis guère occupé depuis un an et il est possible que certaines infos soient périmées. Je remarque en particulier que les options pour le bouton (dans le tableau) ne semblent plus fonctionner (du moins ici même).

Pour répondre plus directement à votre question, il n'y a rien de particulier que vous puissiez faire, à ma connaissance, pour choisir le contenu qui s'affiche dans la fenêtre pop-up. C'est Facebook qui extrait le titre, le sous-titre et une image de votre page web pour la proposer comme contenu à partager, avec l'hyperlien menant à votre page.

Bon succès.


Denis SAVEY - le 31 mars 2011

Tout d'abord merci pour votre réponse si rapide ! C'est vraiment gentil de bien vouloir m'aider !

Pour tout vous expliquer :

J'héberge une page sur un serveur OVH que j'appelle dans une Iframe sur facebook.

 

Et lorsque je clique sur "share" cela me met la pop-up suivante (impr. en fichier joint) alors que mon code est celui-ci : (tout n'est pas forcement super juste dans le <head>)

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="title" content="Century 21 Fortis Immo en 360°"/>

<meta name="description" content="Visitez nos agences Century 21 Fortis Immo en 360°" />

<link rel="image_src" href="http://www.visitezen360.com/facebook/agences360/logoc21.jpg" />

<link rel="target_url" href="https://www.facebook.com/pages/Test-pour-apr%C3%A8s/181354048577828?sk=app_156218351098324" />

<title>Faites estimer votre appartement</title>

 

</head>

 

<body>

 

<a name="fb_share"></a>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

 

</body>

</html>

 

 


imgpartager.jpg
Alain Lesage - le 31 mars 2011

Je ne suis pas certain de comprendre. Dites-vous que quand vous cliquez sur le bouton que vous avez mis dans VOTRE  page, le popo-up indique MA page ?

Ça semble impossible. Avez-vous vidé vos caches de navigateur, juste en cas ?

Pouvez-vous me donner accès à la page où vous avez mis le bouton ?


Denis SAVEY - le 1er avril 2011

Je ne comprends rien non plus !!!

Je trouve cela délirant... D'autant que comme vous avez pu le constater le code ne fait à aucun moment référence à votre site...

Et oui le cache est bien vidé ^^

Le lien est le suivant : https://www.facebook.com/pages...156218351098324


Denis SAVEY - le 1er avril 2011

Tout d'abord merci pour votre réponse si rapide ! C'est vraiment gentil de bien vouloir m'aider !

Pour tout vous expliquer :

J'héberge une page sur un serveur OVH que j'appelle dans une Iframe sur facebook.

 

Et lorsque je clique sur "share" cela me met la pop-up suivante (impr. en fichier joint) alors que mon code est celui-ci : (tout n'est pas forcement super juste dans le <head>)

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="title" content="Century 21 Fortis Immo en 360°"/>

<meta name="description" content="Visitez nos agences Century 21 Fortis Immo en 360°" />

<link rel="image_src" href="http://www.visitezen360.com/facebook/agences360/logoc21.jpg" />

<link rel="target_url" href="https://www.facebook.com/pages/Test-pour-apr%C3%A8s/181354048577828?sk=app_156218351098324" />

<title>Faites estimer votre appartement</title>

 

</head>

 

<body>

 

<a name="fb_share"></a>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

 

</body>

</html>

 

 


imgpartager.jpg
Denis SAVEY - le 1er avril 2011

Ca y est !!! J'ai trouvé d'où venait le problème !!!

 

En réalité comme je n'arrivais pas à faire ce que je voulais, j'ai voulu prendre vos balises pour tenter de comprendre.

 

Sauf que facebook semble enregistrer les infos.

J'ai changé le nom de ma page sur mon serveur, et tout a bien marché !!

 

Par contre dans le partage il y a deux choses que je voudrais corriger... :

 

=> Le nom du site (qui s'affiche en dessous du titre) est le nom du site qui héberge la page. Est-il possible par une balise de le faire pointer vers un autre site ? (ici le site qui héberge est "www.visitezen360.com" et je souhaiterai que se qui s'affiche soit "http://www.century21-fortisimmo-paris.com/"

 

=> le lien dans le titre amène sur la page hébergé par le serveur, toute l'interface de facebook disparait donc...

Avez vous une idée pour corriger cela ?

 

Encore merci pour votre aide !!

 

Denis




partage2.jpg
Alain Lesage - le 1er avril 2011

Hoah ! ça devient compliqué.

Content cependant que vous ayez résolu le premier problème. J'ai testé : c'est bon.

Pour ce qui est de diriger vers une autre page, vous pouvez tenter d'utiliser les options que je mentionne :

Pour ce qui est de préserver l'interface de Facebook à l'ouverture d'une page externe, je ne vois pas comment ce serait possible. Il faudrait pouvoir créer un iFrame à la volée, en spécifiant Facebook comme page parent. Je n'imagine pas de façon de faire ça.

Cependant, vous pourriez tenter d'ouvrir votre popup dans une page différente, qui laisse la page Facebook ouverte « derrière » celle que vous appelez. Je ferais un test en ajoutant, toujours dans la balise <a du popup, l'attribut target="_blank".

Remarquez que je crains que Facebook bloque ce genre de chose car je vois régulièrement des avertissements m'indiquant "vous quittez Facebook, ce peut être dangereux, voulez-vous vraiment continuer... ".

Je vous souhaite bonne chance mais je crains de ne pouvoir vous aider au-delà de ces quelques suggestions. Je ne suis pas programmeur, ni spécaliste de Facebook, seulement ce que les américains appellent peut-être un « power user ».

Bon succès. Laissez-moi savoir comment ça tourne.

Alain


Bertrand - le 7 avril 2011

Bonjour,

J'étais déjà venu prendre des infos sur votre site il y a quelque temps. merci !

J'ai une question si vous avez 5 min :

Le bouton FB fonctionne parfaitement cependant il ne reprend jamais le chapeau (extrait de l'article) le titre aucun problème mais la photo est choisie aléatoirement (pas grave) par contre le chapeau ne s'affiche pas !

Y'a t-il un style "marqueur" spécifique à FB ? Ou avez vous une idée pour résoudre cela ?

Merci d'avance.




fb.jpg
Alain Lesage - le 7 avril 2011

Je ne sais pas comment Facebook choisit son extrait (chapeau) mais on peut voir que sur cette page, il choisit la ligne qui est sous le titre. Si ça peut vous mettre sur une piste, cette ligne est un < div > HTML affublée d'une class=introduction et d'une règle CSS qui l'affiche en caractères gras (font-weight: bold).


Bertrand - le 7 avril 2011

Merci !

Il n'existerai pas une doc FB à ce sujet ?


Alain Lesage - le 8 avril 2011

Si, il existe bien une doc sur Facebook, mais elle est en anglais : http://developers.facebook.com...e/plugins/like/

Bon succès.


Alain Lesage - le 19 avril 2011

Pour ceux qui voudraient aller plus loin, j'ai trouvé cette doc, en anglais toujours... et en code

http://developers.facebook.com/docs/opengraph/#


Vincent Drapier - le 11 décembre 2011

bonjour , grace a vous je suis parvenue a inserer sur mon site ( creer avec iweb ) un bouton partage.

ce que j'aimerai savoir c'est comment avoir la petite vignette lorsqu'on partage .

je travail sur iweb .

merci beaucoup


Vincent Drapier - le 11 décembre 2011

bonjour , grace a vous je suis parvenue a inserer sur mon site ( creer avec iweb ) un bouton partage.

ce que j'aimerai savoir c'est comment avoir la petite vignette lorsqu'on partage .

je travail sur iweb .

merci beaucoup


Alain Lesage - le 12 décembre 2011

Si vous avez suivi les instructions les plus récentes (dont je fournis les liens dans les commentaires précédents), il vous suffit ensuite d'jouter le meta tag OpenGraph og:image dans le head de votre page web, avec l'hyperlien de l'image que vous voulez afficher dans votre vignette.


Loic Vicaire - le 27 juillet 2012

bonjour tous le monde,

je suis développeur sur symfony 1.4, j'ai ajouté le bouton partage sur un site. Par contre il y a un problème, quand je demande à partager ma page, il ne m'envoie aucune information que j'ai renseigné dans mes metas.

Auriez-vous une idées ?

Merci d'avance

ciolvic


Alain Lesage - le 27 juillet 2012

Bonjour Loic,

comme je l'indique dans un commentaire ci-dessus, Facebook a beaucoup changé depuis que j'ai écrit ce billet, et tu devrais probablement vérifier à la source : http://developers.facebook.com/docs/plugins/

Désolé d'être si bref, je quitte ce matin pour quelques jours. Bonne chance !



 
Partage
* Inviter des participants
Surveiller
Fichiers récents

Surveiller
Fichiers récents