Facebook : Comment installer un bouton J’aime (like) sur un blog WordPress

Depuis la Conférence F8, Facebook propose 6 Social Plugins. Voici un tutoriel pour ajouter un bouton J’aime (Like Button) dans le thème de votre blog WordPress. La méthode que je détaille s’appuie le JavaScript SDK de Facebook.

Etape 1 : Créer votre App ID sur Facebook.

Pour pouvoir utiliser le JavaScript SDK, il vous faut tout d’abord créer une application de type « site » sur Facebook…pas de panique c’est très simple. Loguez vous sur votre compte Facebook puis rendez vous sur la page de création d’une application Facebook. Donnez lui le nom de votre site (par exemple), acceptez les conditions (après les avoir lu ;-) et cliquez sur « créer une application ». Copier l’ID de l’application dans un bloc note, cet ID va vous servir dans l’étape suivante. N’oubliez de cliquez sur « Enregistrez les modifications » en bas de la page. Pour info, vous retrouvez et modifiez toutes vos applications sur cette page.


Etape 2 : Installer le JavaScript SDK Facebook

Copiez le bout de code suivant xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/". Puis sous Word Press, allez dans l’éditeur de thème, éditez le fichier « en-tête » (header.php) et collez le bout de code entre <html xmlns="http://www.w3.org/1999/xhtml" et >.

Rendez-vous sur la page du JavaScript SDK Facebook et copiez le bout de code débutant par <div id="fb-root"> et finissant par </script>.  Retournez dans le fichier « entête » (header.php) et collez le bout de code modifié sous la balise <body>. Enfin, remplacez le texte « App ID » par votre ID créé dans l’étape 1. Pour un blog français, au niveau du code « connect.facebook.net/en_US/all.js », il faut remplacer en_US par fr_FR.

N’oubliez de sauvegardez vos changements.

Etape 3 : Installer le bouton J’aime (like) dans un article Word Press

Rendez-vous sur la page Développeur Like Button . Facebook vous propose un générateur de code. Dans le champs « URL to Like », collez le texte suivant <?php the_permalink(); ?>. Complétez les autres champs avec ce qui vous convient le mieux puis cliquer sur « Get Code ». Une pop-up s’ouvre, copiez le code XFBML commençant par <fb:like et se terminant par </fb:like>.

Sous Word Press, allez dans l’éditeur de thème, éditez le fichier « Article seul » (Single.php) et collez le code XFBML copié précédemment à l’endroit où vous souhaitez placer le bouton J’aime. Par exemple, pour placer le bouton à la fin de votre article, collez le code XFBML juste après <?php the_content('Lire la suite de cet article'); ?>

N’oubliez de sauvegardez vos changements.

Voila, c’est fait. Vous aimez ?

MAJ : Si vous souhaitez créer votre page Facebook, je vous invite à lire cet excellent tutoriel.

39 réflexions au sujet de « Facebook : Comment installer un bouton J’aime (like) sur un blog WordPress »

  1. Très bon article, mais commencer remplacer le « Like » par « j’aime » ? Changer la langue en somme. J’ai eu beau changer cela dans les paramètres du menu dev, mais sans succès. Une idée ? Merci d’avance

  2. Bonjour
    Je souhaitais ajouter le bouton j’aime dans une webapp pour l’iphone (www.baomob.com) mais il semble que j’ai raté quelque chose dans l’application sur facebook.
    en gros: le bouton like s’affiche sur la webapp (en anglais par contre, rien à faire), quand on clique dessus, il va bien chercher la photo qui apparait 1 seconde puis est remplacée par
    si on clique sur error, une page facebook s’ouvre:
    La page http://&lt;?php%20the_permalink();%20?> ne peut être trouvée.
    il n’y a pas de mise à jour du mur ou des news facebook.
    desi idées?
    merci d’avance

  3. Enf, c parceque le code fait référence à une fonction propre à wp pour appeler le lien de l’article. Il faut que vous remplaciez ce code par l’équivalent dans votre webapp.

  4. Hello JD
    D’abord merci beaucoup pour la réponse, mais malheureusement je suis trop novice pour comprendre votre conseil.
    Je ne comprends pas ce qu’il faut remplacer , ni ou, ni par quoi (et j’ai un peu honte en fait).
    merci
    PS: j’avais bien compris tout le tuto et j’étais content pourtant..
    la webapp est générée sur wordpress

  5. Hello
    en fait j’ai réussi en intégrant le code avec l’adresse de la page à l’intérieur du post. tout marche bien dans la webapp. Par contre dans facebook, on voit que la personne aime dans son activité mais cela n’apparait pas dans les actualités sur le mur de ses amis, uniquement sur son profil. Des idées ?
    merci

  6. fausse joie, la webapp fonctionne sur mac et pc mais pas sur iphone, les visages n’apparaissent pas et le compteur de like est bloqué à zéro (sur l’iphone seulement)

  7. Merci pour cet article instructif.

    Toutefois, comment faire pour que l’internaute apprécie une « Page Facebook » liée à mon blog plutôt qu’un simple article ?

  8. Merci pour votre promptitude.

    Cependant, la « Like Box » demeure trop volumineuse à mon goût – tant pis, je me contenterai du seul partage de l’article. Autre léger désagrément, après avoir cliqué sur le bouton « J’aime », ce message s’affiche sur mon profil Facebook:
    « Mon_nom aime Nom_article sur content. »

    Comment remplacer ce « content » par le nom de mon blog accompagné d’une redirection ? J’ai installé le plugin Like, proposé par Bottomless, et peut-être est-il le plus apte à me répondre. Encore merci pour tout.

  9. Bonjour,
    J’ai un gros problème que je n’arrive pas à résoudre, j’ai installer plusieurs plugin différents « Facebook Like » mais j’ai toujours le même problème depuis ce matin avec mes posts, je ne peux plus les « share » via les plugins ou même plus « Like » les post ça m’affiche error… ce qui est bizarre c’est que ça continue à marcher pour les posts antérieurs, auriez vous une solution? merci d’avance

  10. J’ai regardé rapidement le code source de votre page, il semblerait que vous n’ayez pas réalisé l’étape 2 décrite ci-dessus car je n’ai pas trouvé de trace du code  » xmlns:fb= »http://www.facebook.com/2008/fbml  » dans votre balise html.

  11. De la même manière que TVGC ci-dessous, il semblerait que vous n’ayez pas réalisé l’étape 2 décrite ci-dessus car je n’ai pas trouvé de trace du code  » xmlns:fb= »http://www.facebook.com/2008/fbml  » dans votre balise html.

  12. Oui, effectivement, c’est au niveau du code « connect.facebook.net/en_US/all.js » qui est à mettre après le qu’il faut remplacer en_US par fr_FR

  13. Bonjour, et merci pour cet article. En ce qui concerne votre site, je remarque deux choses différente. On peut « aimer » vos articles, mais on peut aussi « aimer » votre site. Si on « aime » votre site, on accès à la page Facebook de votre site. Cette page Facebook est elle la page de l’application créée (cf: votre article) ou est-ce autre chose ?

  14. En effet, il s’agit d’une Like Box (vs Like Button) qui est lié à la page
    que vous avez créé sur Facebook. C’est totalement déconnecté de ce qui
    figure dans cet article.
    Le 23 septembre 2010 09:59, Disqus a
    écrit :

  15. est-il possible d’utiliser ce tutoriel pour faire un site de j’aime ? (là où on met des phrases stupides et que les gens aiment)

  16. Bonjour et merci pour votre contribution. Je viens de suivre votre tuto. Touefois si le logo s’affiche bien, j’ai erreur lorsque je clique sur J’aime. Si vous pouviez me renseigner merci d’avance . David

  17. Mon tutoriel s’adresse plutôt à ceux qui utilise WordPress en open source
    sur leur propre serveur.
    Dans votre cas, il est possible que vous n’ayez pas accès à l’éditeur de
    theme car vous n’êtes pas administrateur.
    (simple hypothèse de ma part, à vérifier)

    2011/1/6 Disqus

  18. Bonjour,
    Je suis plus ou moins débutant et de plus je ne comprend pas l’anglais et lorsque je me rend sur javascript sdk facebook, c’est en anglais et je ne comprend rien GGGGGRRRRRRRRRR… Alors ma progression stoppe dès le début.
    Si quelqu’un peu m’aider à passer cette première étape, ce serait adorable car cela fait des jours que je rame avec cette histoire là et comme toujours quand on sait c’est facile mais là, je ne sais pas ;-)
    Alors si vous avez un peu de temps devant vous, je suis preneuse… :-)
    Merci d’avance à la courageuse ou au courageux qui voudra bien m’aider…
    Bonne soirée.
    Clochette

  19. Bonjour a tous,
    merci pour cet exellent tutoriel
    j’ai néanmoins un problème, quand quelqu’un clique sur le bouton j’aime d’un de mes articles ca n’affiche pas une image aléatoire de se dernier sur les mur FB mais une image de ma sidebar
    Quelqu’un sait il comment corriger ce probleme?
    Merci d’avance

  20. Bonjour Sheedou

    Merci pour les encouragements!

    Par défaut, Facebook prend la première image disponible dans la page.

    Pour choisir l’image que tu souhaites mettre, il faut que tu utilises cet balise
    à placer dans le .

    L’url sera celle de ton image.

    Sous wordpress 3.x, si tu utilises les médias, il faudrait utiliser le codeLe problème -que je n’ai toujours pas résolu proprement- est que dans le head, wordpressne sait pas encore à quel article tu fais référence.si tu vois une piste :-)

  21. Salut Jean-Dimitri et merci de ta reponse rapide

    j’ai besoin de plus de précision sur le code dont tu me parles s’il te plait

    ou suis je censer inserer ca? qu’appelles tu le . ?

    concernant les medias de wordpress je suis encore moins roder sur ca

    merci d’avance pour les précisions

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>