Ajouter le bouton “j’aime” avec la bulle de commentaire sur votre site

Kilian Hauray aime

Après l’annonce de Facebook sur ses socials plugins, j’ai cherché a reproduire le bouton “J’aime” que l’on retrouve sur les sites exemples. Celui qui affiche la bulle proposant de commenter ce qu’on vient d’aimer. Ainsi le bouton “J’aime” gagne en intérêt puisqu’il permet de remplacer également le “Share”. Découvrez la méthode dans la suite de ce billet.

1/ Créez une application pour votre site sur Facebook Developer.

Pour celà, il suffit de se rendre à l’adresse suivante : http://www.facebook.com/developers/ et de cliquer sur créer une application en haut à droite.

A/ Je clique sur “Créer une application”
Facebook Création Application

B/ Je renseigne le nom et valide.
Facebook Création Application validation

C/ Je reçois mon identifiant d’application.
Facebook : rappel identifiant application

Notez bien l’ID de votre application, il va nous resservir ensuite.
Vous pouvez maintenant renseigner les différents champs qui vous intéressent et surtout INDISPENSABLE vous diriger dans l’onglet connexion pour indiquer l’adresse de votre site et son domaine principal :

Facebook : url de connexion

2/ Ajouter le code XFBML à votre site web

Même si le langage XFBML peut faire peur, c’est en fait plutôt simple même pour les novices puisque deux copier/coller suffisent.
Code à insérer sur la page sur laquelle vous souhaitez ajouter la page :

<div id="fb-root"></div>
<script>
      window.fbAsyncInit = function() {
        FB.init({appId: 'VOTREID', status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
          '//connect.facebook.net/fr_FR/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

Pensez à remplacer VOTREID par l’ID de votre application vu plus haut.

Ensuite coller à l’endroit où vous souhaiter ajouter votre bouton le code suivant :

<fb:like href="ADRESSEDEVOTREPAGE" layout="standard" show-faces="false" width="400" action="like" colorscheme="light" node_type="link" />

Pensez à remplacer ADRESSEDEVOTREPAGE par l’adresse de votre page.
Vous pouvez ensuite personnaliser l’affichage avec par exemple l’ajout des images de profil (show-faces=”true”).

Bonus/ Exemple pour un post sous Wordpress (single.php)

<fb:like href="<?php the_permalink() ?>" layout="standard" show-faces="false" width="400" action="like" colorscheme="light" node_type="link" />

Il suffit de mettre l’appel à l’adresse du permalien pour que la balise fonctionne sur tous vos billets.

On peut aller beaucoup plus loin dans la personnalisation, mais ce mini tuto devrait permettre déjà de vous aider à l’intégrer dans votre site. Vous pouvez tester le bouton juste sous cet article.

publié le Vendredi 23 avril 2010 à 9:00

Facebook, j'aime, tuto, wordpress

11 commentaires pour “Ajouter le bouton “j’aime” avec la bulle de commentaire sur votre site”

Philippe Lestang dit :
23 avril 2010 à 6:58
Merci beaucoup!
-Dans le code XFBML, la div “fb-root” est ouverte et aussitôt refermée, sans contenu. Est-ce normal?
Kev dit :
23 avril 2010 à 7:18
Bon merci je vais tester ton tuto, j’ai du mal a en trouver des bien fait.
Une question, peut-on avec le nouveau Facebook Connect commenter dans Wordpress avec ses ID Facebook?
Kilian dit :
23 avril 2010 à 7:21
@Philippe : Oui FB s’en sert pour charger du contenu via JS.

@Kev : oui, il doit assurément exister un plugin pour ça, regarde par ici : http://wordpress.org/extend/plugins/search.php?q=facebook+connect+for+comment&sort=
» Un bouton Facebook « J’aime » Philippe Lestang, le blog dit :
23 avril 2010 à 7:23
[...] Je viens d’ajouter à la fin de chaque billet de ce blog un bouton Facebook « J’aime ». Ce bouton n’est visible que dans la présentation « un billet à la fois », et non quand on accède au blog globalement. Cliquez donc sur le titre d’un billet, et vous verrez apparaître le bouton bleu « J’aime » et un texte précédé du « f » de Facebook. C’est très facile sous Wordpress (pour qui n’hésite pas à aller modifier les fichiers dans l’éditeur): suivre le mode d’emploi donné sur le site de Kilian Hauray. [...]
Kev dit :
23 avril 2010 à 8:55
Kilian, Ouaip déjà essayées, la plupart me crées une error fatal dans WP :/ Sinon j’ai trouvé ça mais du pure chinois pour moi : http://bit.ly/cxJEeV
Damien dit :
25 avril 2010 à 9:24
Bonjour,
J’ai testé la version avec iFrame et j’ai réussi à la faire fonctionner correctement.
Maintenant je souhaite utiliser votre méthode pour poster un commentaire mais, bien qu’ayant respecté votre procédure, ça ne s’affiche pas sur mon site…

Quelqu’un pourrait y jeter un coup d’oeil svp?
Par exemple sur :
http://www.hitsandclips.fr/actualite,musicale,B.o.B,Nothin%27,On,You,183.html
Sous le bouton “partager”
Damien dit :
25 avril 2010 à 9:32
Bon, en enlevant le bouton “partager”, maintenant, le “J’aime” s’affiche mais ne fonctionne pas (il indique erreur).

De plus, il fait buger le badge de ma fanpage sur la droite.

J’ai encore besoin de votre aide SVP…
Damien dit :
25 avril 2010 à 10:46
Bon, en fait j’ai trouvé, ce sont les anciens widgets Facebook qui sont complètement incompatibles avec les nouveaux…
Kilian dit :
26 avril 2010 à 10:16
Bonjour Damien,

Effectivement, si tu veux ajouter plusieurs plugins socials sur ta page, il faut absolument utiliser les nouveaux plugins.
zanzana dit :
23 mai 2010 à 7:13
Merci Damien et Kilian, vous m’avez été d’une très grande aide par rapport à vos commentaires et le dysfonctionnement entre anciens et nouveaux scripts de FB.

:=)
Bournizien dit :
25 juin 2010 à 4:30
Bonjour Damien,
Peut-on créer une application depuis une page “entreprise” comme celle ci : http://www.facebook.com/developers/#!/lefigaro?ref=ts ?
Merci pour votre aide
Guillaume