Mise en place

Nous allons voir ici comment mettre en place ce type de bouton sur votre site :

like

  1. Tout d'abord, rendez vous sur le générateur de boutons mis en place par Facebook. Puis configurez votre (ou vos boutons), vous avez la possibilité de générer le bouton "j'aime" mais également le bouton "partager" avec différentes options. Cliquez ensuite sur le bouton "Get Code". Nous allons travailler avec la version HTML5. 
  2. Poisionner la première partie du code dans votre fichier HTML après la balise <body> :
      <div id="fb-root"></div>
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
  1. Positionnez ensuite la deuxième partie du code là où vous souhaitez voir apparaitre le bouton sur votre page en vérifiant l'attribut "data-href" :
      <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

Et voilà vous avez maintenant une fonctionnalité de partage Facebook sur votre site.

Pour aller plus loin

Avec la manipulation ci-dessus, vous aurez un partage simple (pas d'image, pas de description…). Si vous souhaitez apporter des informations supplémentaires, vous allez devoir utiliser Open GraphRien de bien compliqué, vous trouverez toutes les informations dans la documentation. Le principe est simple, il suffit d'ajouter des balises meta entre les balise "<head>" et "</head>" de votre fichier HTML.

partager

Voici un exemple de balise :

<meta property="og:title" content="Titre à afficher" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://urldusite.fr/" />
<meta property="og:description" content="Description à afficher" />
<meta property="og:image" content="http://urldusite.fr/images/mon-image.png" />

Attention : og:type, og:image, og:url et og:title sont obligatoires. De plus, l'image doit faire au minimum 200*200px, sinon c'est une autre image de la page qui sera prise en compte.

Facebook met à disposition un debugger à cet adresse : https://developers.facebook.com/tools/debug. Cet outil vous permettra notament de vérifier que vos balises "og" soient correctement prises en compte.

Facebook gère un cache, ainsi, si vous modifier ces balises "og", il n'est pas certain que l'effet soit visible instantanément. Vous pouvez vider ce cache en appelant votre URL avec la paramètre "fbrefresh=CAN_BE_ANYTHING" :

http://urldusite.fr/?fbrefresh=CAN_BE_ANYTHING