Comment ajouter le bouton Facebook à votre site web

Ajouter un bouton Facebook à votre site web ou à votre blogue

Aimeriez-vous ajouter un bouton FaceBook comme ci-contre à votre site web

ou à votre blogue pour inviter vos lecteurs à partager leur découverte sur Facebook ?

Ajouter un bouton Partager sur FacebookC'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).  

 

Si ce tuto vous a aidé ou si vous avez une question laissez-moi un commentaire au bas de cette page.

Commentaires (1)

margarida
bonjour,
Le tuto est en anglais et je ne comprends pas un mot de cette langue
merci de nous donner un tuto en français
margarida

Ajouter un commentaire

Date de dernière mise à jour : 09/04/2017