Skip to content

goopple.fr | jeandimitridewavrin.net | HubertAimeLesVoyages.com

Search

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

29 04 2010

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.

Articles liés

  • http://www.mademoisellesemontre.com/ Mademoiselle Se Montre

    Hello et merci,
    je cherche a installé le plugin « commentaires » sur mon site…et je sens que ça va m’aider au moins au niveau de l’install API…!

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    Je suis preneur de conseil pour installer le plugin de commentaires et notamment l’impact sur le module de ‘commentaires wp »

  • http://twitter.com/RomainCorraze Romain Corraze

    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

  • http://blog.bottomlessinc.com Bottomless

    Voici le lien vers le plugin WordPress :
    http://wordpress.org/extend/plugins/like
    Pas besoin de programmer, la position et l’apparence sont configurable dans les options.

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    Il faut vous rendre dans votre applications (http://www.facebook.com/developers/apps.php). Choisissez votre application puis cliquez sur Modifier le paramétres et choisir la langue (Français ;-). Voilà.

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    Merci pour ce plugin qui sera surement très utile aux moins développeurs d’entre nous !

  • http://www.baomob.com jean paul

    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

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    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.

  • http://www.baomob.com jean paul

    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

  • http://www.baomob.com jean paul

    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

  • http://www.baomob.com jean paul

    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)

  • http://twitter.com/RomainCorraze Romain Corraze

    Merci de votre réponse. En revanche, je suis déjà en « Français » et rien ne change…Any other idea ?

  • http://twitter.com/RomainCorraze Romain Corraze

    Problème résolu, il suffisait de mettre fr_FR a la place de en_US dans mon header :)

  • http://www.mirliflore.com/ Mirliflore

    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 ?

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    Bonjour, vous procédez de la même façon sauf pour la 3eme étape où il faut installer une « like box » dont vous trouverez le code sur cette page http://developers.facebook.com/docs/reference/plugins/like-box

  • http://www.mirliflore.com/ Mirliflore

    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.

  • Anonyme

    J’ai le même problème ici.
    Quand je clique sur certain des bouton j’aime à travers mon site je reçois cette erreur
    La page à l’adresse http://www.tvqc.com/2010/05/lauren-graham-en-photo/ ne peut être trouvée.

  • http://blog.yolandmoutama.fr Yoland

    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

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    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.

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    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.

  • Anonyme

    En fait après avoir navigué c,est un problème généralisé pour le bouotn facebook like. Même les gros site comme Levi ou Techcrunch ont le même erreur.
    http://forum.developers.facebook.com/viewtopic.php?pid=231766
    http://bugs.developers.facebook.com/show_bug.cgi?id=10674

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    Vous avez raison et mon petit blog connait également ce problème…A suivre donc! Merci

  • http://blog.pastel.pro Marc Farré

    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

  • Xavier

    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 ?

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    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 :

  • Arthur

    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)

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    Oui la méthode Javascript SDK Facebook s’adapte pour tout type de site.

  • Arthur

    Oui je me disais bien ^^ Merci bien

  • Davcobk

    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

  • http://twitter.com/denissixou SIXOU

    bonjour,
    Je voudrais ajouter une like box sur mon blog, j’ai suivi vos recommandations mais je n’ai pas trouvé l’éditeur de thème sous wordpress. help ! ça devrait être simple pourtant (http://globalinside.wordpress.com). merci d’avance.

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    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

  • Snows

    bonjour, j’ai un site développer par moi même, et j’utilise Cutenews (http://cutephp.com/cutenews/) pour mes articles, que dois-je mettre à la place de ?

  • Facetchat

    new web site tchat , wacth film , play gime
    http://www.facetchat.com all fell

  • Clochette

    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

  • Sheedou

    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

  • http://www.goopple.fr Jean-Dimitri Dewavrin

    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 :-)

  • Sheedou

    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

  • http://twitter.com/bonplangratos Bon Plan Gratos

    Sur ce site de mise en relation vous pouvez échanger des clics, c’est pas mal:
    http://www.likeub.com/?p=7165945

    Et sans obligation d’aimer toutes les pages proposées…

Comment on fait...

iPhone & iPad

MacBook & iMac

Point de vue...