Comment ajouter J’aime (Like Button) de Facebook sur votre site WordPress

En avril 2010, Facebook a présenté un nouvel outil de partage pour les sites Web : le Bouton J’aime (Like Button). Ce bouton permet à vos visiteurs de cliquer J’aime et le statut du visiteur sur son Facebook affichera un lien à votre site Web. C’est une forme de microblogage puisque le Bouton J’aime permet de partager des choses que l’on aime sur le Web dans notre Facebook. Moi, j’aime ça. Dans cet article, je vous montre comment ajouter le Bouton J’aime sur votre site WordPress. Pour le faire, il faut modifier des fichiers PHP de votre thème WordPress ou installer une extension WordPress.  Vous pouvez modifier les fichiers PHP à partir de votre Tableau de bord WordPress ou via FTP. C’est facile et on aime ça!

C’est quoi le Bouton J’aime de Facebook?

J’aime de Facebook est un petit code que l’on ajoute à notre site WordPress et qui permet aux visiteurs de dire “J’aime” sur un article ou une page de votre site. Le Bouton J’aime détecte la langue de votre Facebook ou du site et affiche le Bouton dans cette langue. Intelligent le garçon! Voici le look du Bouton J’aime:

Et voici ce qui apparaît sur mon statut Facebook si je clique sur “J’aime”. Facebook enregistrera ce J’aime comme une publication dans votre Fil de nouvelles (actualités).

Comment ajouter J’aime dans le PHP

Copiez et collez le code suivant dans les fichiers PHP de votre thème WordPress là où vous voulez que le Bouton J’aime apparaisse. Ajustez la taille (code en rouge) selon vos besoins. (Testé le 14 janvier 2014 et le code est encore bon)

Comment ajouter J’aime avec une extension WordPress

La beauté du code ci-haut est que l’on peut ajouter le Bouton J’aime exactement là où on veut. En plus, on épargne l’installation d’une extension additionnelle dans son site WordPress. Donc, si je suis capable d’insérer du code et minimiser le nombre d’extensions sur mon site – j’aime ça!

Si c’est plus facile pour vous d’installer une extension, je recommande l’extension Facebook Like Button d’Ahmed Hussein. Elle est facile à installer et fait exactement ce qu’elle doit faire. Voici les options de l’extensions sur votre Tableau de bord (janvier 2014):

facebook-like-button-ahmed-hussein-wordpress

Pour l’ajouter directement à partir de votre Tableau de bord WordPress, cliquez sur EXTENSIONS | AJOUTER | RECHERCHE “Facebook Like Button” | INSTALLER | ACTIVER

Liens utiles

Adding Facebook ‘Like’ Buttons to Your Site Is Damn Easy
Facebook Like Button d’Ahmed Hussein
Facebook bouton like: j’aime ou je n’aime pas ?
Faut-il aimer ou ne pas aimer le bouton « J’aime » de Facebook ?

 


46 commentaires
  1. Christophe Coquis
    Christophe Coquis says:

    Merci pour ce tuto. Cela permet une meilleure intéractivité entre le site web et la page facebook. J’ai essayé le plugin (vu mon appréhension à toucher le php ;) qui marche bien. Sauf que je n’ai pu le mettre qu’en bas des articles. En haut (ce qui est plus efficace à mon sens), cela produit un décalage de quelques lignes avec le début de l’article. Ce qui produit un espace blanc pas très élégant.

    Répondre
    • Diane Bourque
      Diane Bourque says:

      Bonjour Christophe, Le plugin donne l’option d’ajouter le bouton “Before content”. Je viens de vérifier et c’est possible. Sur ton Tableau de bord WordPress, clique sur “Facebook Like” (colonne gauche, en-dessous de Réglages). Dans “General Settings”, clique sur “Position” et choisit “Before content”. Le bouton s’affichera au-dessus du contenu. Je viens de le faire et ça marche. Bonne chance. Diane

      Répondre
      • Christophe Coquis
        Christophe Coquis says:

        Merci Diane pour cette réponse. En fait, j’avais bien vu l’espace de configuration du plugin et le bouton “j’aime ça” apparaît bien en bas dans les articles mais en haut, là, il y a un espace de 3-4 cm entre le bouton et le texte de l’article ce qui n’est pas très beau. Donc je ne l’ai laissé pour l’instant uniquement en bas des articles

        Répondre
  2. ProLire
    ProLire says:

    Cette astuce est intéressante.
    Est-ce que le code ajouté est conservé lors des mise à jour WordPress ? (cf. ton dernier article sur la mise à jour WordPress 3.0)
    Ou faut-il se noter l’évolution pour pouvoir la reporter à chaque mise à jour ?

    Répondre
    • Diane Bourque
      Diane Bourque says:

      Aucune mise à jour WordPress n’affectera le code PHP puisque ce code est inséré dans le Thème de votre site. WordPress ne met pas à jour le thème de votre site.

      Quand à l’extension, je ne peux pas répondre puisque le développeur de l’extension est responsable d’assurer la compatibilité de ses extensions avec les nouvelles versions WordPress. Certains le font, d’autres non.

      Répondre
      • ProLire
        ProLire says:

        Merci pour la réponse.
        Entre-temps, j’ai installé cette fonctionnalité sur mon blog en modifiant le code PhP. Je n’ai pas retrouvé dans mon thème tous les fichiers que tu indiques, mais au final, cela semble bien fonctionner.
        Merci encore pour le tutorial.

        Répondre
  3. Isabelle
    Isabelle says:

    Bonjour, j’essai d’introduire le boutton J’AIME avec le code fourni ci-haut, mais je trouve pas ou l’ajouter? Vous mentionnez dans le fichier PHP, ou dans(Pour l’ajouter directement à partir de votre Tableau de bord WordPress, cliquez sur EXTENSIONS | AJOUTER | RECHERCHE “Facebook Like Button” | INSTALLER | ACTIVER) Mais je trouve aucune de c’est option. Peut-être que je ne regarde pas à la bonne place? Merci de m’aider.

    Répondre
    • Diane Bourque
      Diane Bourque says:

      J’ai l’impression que votre site wordpress est chez wordpress.com? Si c’est le cas, ce tutoriel ne s’applique pas aux sites wordpress.com = il s’applique seulement aux sites wordpress.org

      Répondre
  4. Katia Bouchard
    Katia Bouchard says:

    Bonjour Diane, je viens tout juste de m’ouvrir un blogue sur wordpress.com et là, je tombe sur l’un de vos articles qui dit que c’est mieux wordpress.org!! Je ne suis pas une blogueuse professionnelle – je fais cela pour m’amuser – mais j’aime pouvoir tirer le maximum de ce que je fais. Donc, j’aimerais connaître la différence entre les deux. Est-ce mieux pour moi de changer? Si oui, est-ce que je dois tout recommencer ou par miracle, mes précédents articles peuvent-ils se transférer? Est-ce que j’y retrouverai les mêmes thèmes… j’ai beaucoup de questions! Merci à l’avance!

    Répondre
    • Diane Bourque
      Diane Bourque says:

      La grosse différence entre WordPress.com et WordPress.org est que chez WordPress.com, ton blogue est hébergé chez WordPress.com alors que chez WordPress.org, ton blogue est hébergé chez l’hébergeur de ton choix. Tu contrôles alors 100% de ton blogue. Chez WordPress.com, tu ne peux pas ajuster le thème comme tu veux ou faire plein de choses qui sont seulement faisables avec WordPress.org

      Mon conseil: amuse-toi chez WordPress.com pour le moment. Tout ce que tu écris et que tu publies chez WordPress.com s’exportera facilement plus tard chez WordPress.org (quand on sait comment bien le faire) si jamais tu veux devenir une “vraie” blogueuse.

      J’ai écrit un article qui pourrait t’intéresser: WordPress: la reine des plate-formes blogues = http://dianebourque.com/2009/03/15/wordpress-la-reine-des-plate-formes-blogues/

      Répondre
      • Katia Bouchard
        Katia Bouchard says:

        MERCI! Vous vulgarisez très bien et c’est un excellent conseil! Lorsque je serai prête à transférer, je suivrai un petit cours avec vous, question de bien faire les choses et d’en apprendre un peu plus.

        Répondre
  5. Mélissa
    Mélissa says:

    Bonjour,

    Afin de rajouter le bouton j’aime j’ai réalisé la manoeuvre que vous indiquez: EXTENSIONS | AJOUTER | RECHERCHE « Facebook Like Button » | INSTALLER | ACTIVER) mais le bouton n’apparait pas sur mon blog. Que dois-je faire?
    Merci

    Répondre
  6. Loïc
    Loïc says:

    J’ai compris comment l’ajouter mais quand j’aime, il n’y à que le nom de la page qui s’affiche mais pas le “sur [Site]“

    Répondre
  7. Loïc
    Loïc says:

    Mais enfaite maintenant ça m’affiche “la phrases” sur “monsite”. Mais ça m’affiche l’adresse URL. Comment changer pour mettre le titre du site a la place? Merci d’avance :P

    Répondre
  8. Edouard
    Edouard says:

    Bonjour Diane

    J’ai ajouté l’extension par EXTENSIONS | AJOUTER | RECHERCHE « Facebook Like Button » | INSTALLER | ACTIVER. L’extension apparaît bien dans la liste de mes extensions,mais le bouton n’apparaît pas sur mes articles.
    Est ce que je dois l’insérer manuellement dans chaque article, et si oui comment?

    Merci!

    Répondre
  9. HerbeDeProvence
    HerbeDeProvence says:

    Pour les utilisateurs de wordpress.com, pour ajouter le bouton j’aime, il suffit d’aller dans le panneau d’administration, Reglages –> Partager, et là il faut activer le service facebook et choisir le type de bouton j’aime ou partage (je ne sais d’ailleurs lequel est le mieux)

    Répondre
    • Céline
      Céline says:

      Bonjour, dans le menu réglage de mon wordpress je n’ai pas “partager”, alors que j’ai téléchargé et installé l’extension. Le j’aime n’apparait nulle part. Merci de votre aide

      Répondre
  10. Vincent
    Vincent says:

    Bonjour Diane merci pour votre site, vos articles et votre patience+réactivité.

    J’ai 2 questions :
    - J’ai installé le code via un plugin sur mon site WordPress. Il apparait bien sur chacun des articles. J’aimerais qu’il apparaisse également, comme pour vous, sur le “snippet” (résumé) d’un article à côté du “lire la suite” sur la page d’accueil, je colle donc votre code dans index.php après le “lire la suite”, mais rien ne s’affiche. Comment puis je le faire ? Si c’est avec le plugin WP FB Like, tant mieux sinon pas grave.

    - Si j’ajoute un bouton “j’aime” à mon “snippet”, va t il reprendre le compte des “j’aime” déjà obtenus sur l’article référent? Si je supprime le bouton “j’aime” et que je le réinstalle, le compte de “j’aime” sur l’article va t il rester le même ou repartir à 0 ?

    Merci pour vos réponses.

    Répondre
    • Diane Bourque
      Diane Bourque says:

      Salut Vincent,

      Le code du bouton j’aime ne fonctionne pas avec le code ?php the_excerpt dans WordPress (archives.php, search.php, etc). Il faut modifier ce code dans vos fichiers PHP avec ?php the_content et insérer un “manual break” dans vos articles là où vous voulez que l’on voit “Lire la suite”.

      Non, je ne pense pas que le bouton J’aime cumule les J’aime précédents. Il va recommencer à 0 si vous n’aviez jamais ce code dans votre WordPress. Toutefois, si vous aviez déjà le code sur votre site, je pense qu’il cumulera vos J’aime précédents. Mais je suis pas 100% certaine ici. Si vous avez une réponse, svp venir ici pour la partager.

      Diane

      Répondre
  11. Lionel
    Lionel says:

    Merci beaucoup,
    Après avoir passé de nombreuses heures à chercher,
    j’ai réussi grâce à vos explications.
    En effet, j’avais à chaque fois un message d’erreur qui
    s’affichait sur le site. Là, super, ça marche bien.
    Encore merci.

    Répondre
  12. Claude Brindamour
    Claude Brindamour says:

    Obtenu votre page via Nadia Seraiocco. Vos conseils sont très clairs. Ceci dit, je voudrais placer le bouton ‘j’aime’ sur mon site WP et je n’ai pas compris où exactement placer le code que vous avez fourni (à quel endroit dans le charabia php). Je sais comment retrouver les pages php. C’est simplement dans le script que je ne sais pas où placer le texte. Par exemple, je veux avoir le miens sur toutes les pages, dans le haut de la barre latérale.
    Merci de votre aide.

    Répondre
    • Diane Bourque
      Diane Bourque says:

      Salut Claude, Vous devez placer le code dans les documents single.php, archives.php, etc. Si vous ne connaissez pas le PHP, cette tâche pourrait s’avérer difficile pour vous. Moi, je l’ajouter après le code Title afin que le bouton J’aime s’affiche en dessous du titre de mes articles. Mais c’est différent pour chaque thème et chaque fichier. Pourquoi ne pas simplement installer une extension? Y’en a plusieurs maintenant qui offrent le bouton j’aime. Bonne chance! Diane

      Répondre
      • Claude Brindamour
        Claude Brindamour says:

        Oui j’avais pensé à utiliser une extension. J’ai pris celle d’Ahmed Hussein. Et voilà ce que j’ai obtenu en l’activant :

        Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in /hsphere/local/home/infojft/scalp.plaxmol.com/wp-content/plugins/facebook-like-button/inc/rec_widget.php on line 11

        Répondre
        • Claude Brindamour
          Claude Brindamour says:

          Et je dois aussi ajouter que j’ai un problème majeur dans mon site wordpress en ligne depuis 5 ans. La fonction SEARCH est corrompue et ne fonctionne pas. Que j’essaie d’ajouter un nouveau widget de recherche ou une extension, ça ne fonctionne pas.

          Répondre
          • Diane Bourque
            Diane Bourque says:

            Quelle version WordPress utilisez-vous? Le code pour le SEARCH est habituellement dans le document searchform.php. Il faudrait faire du troubleshooting. Vos problèmes ne sont pas communs et je soupçonne que vous utilisez un thème qui n’est pas compatible avec WordPress 3.1.

  13. Claude Brindamour
    Claude Brindamour says:

    L’Homme Scalp utilise WordPress 3.1.2

    Theme: Connections Reloaded v1.5 par Ajay D’Souza. Un dérivation de Connections.

    Répondre
    • Diane Bourque
      Diane Bourque says:

      Claude – je ne peux malheureusement pas t’aider sur ce sujet. Si tu veux de l’aide, tu peux m’écrire (contact en haut). J’hésite à donner des conseils comme ceux-ci car les gens s’aventurent comme débutants se croyant avancés et je ne peux être responsable des erreurs commises sur votre site WordPress. Je fais très attention avec mes conseils sur ce site… Diane

      Répondre
  14. Bingo
    Bingo says:

    Bonjour Diane,

    merci pour ces explications qui vont bien me servir. Par contre je vois que FB me propose différents choix de code (iframe, html5, XFBML), lequel dois-je prendre ?

    Merci !

    Claire

    Répondre
  15. Fait chier marc Z !
    Fait chier marc Z ! says:

    T’aime ca…mais les annonceurs aussi ! Maintenant ils peuvent consultersur google tes “j’aime” et bourrer ta bal de spams ! C’est malin!!!

    Répondre
  16. Patrick
    Patrick says:

    Bonjour,

    Pour l’ajout d’un bouton j’aime …
    j’ai bien récupérer l’ID
    Le code a inserer dans
    Le code a inserer dans la page

    Mais je n’arrive pas a acceder au code SDK Javascript sur ma page facebook entreprise …

    j’ai cherché mais rien trouvé, je suis ptet pomme..
    Pouvez vous m’aider.
    Merci

    Répondre
  17. Cécile Martin
    Cécile Martin says:

    Bonjour,

    Pourriez vous indiquer les démarches pour ajouter le bouton “J’aime” sur une page Magento, afin que le clients puisse cliquer dessus sur chaque différent produit?

    Je vous remercie,

    Cécile

    Répondre

Trackbacks (rétroliens) & Pingbacks

  1. [...] je suis tombé sur un tutorial sur le blog de Diane Bourque pour ajouter un bouton Facebook « J’aime » dans un blog WordPress. [...]

  2. [...] This post was mentioned on Twitter by Thierry Clermont and Diane Bourque, Karima-Catherine. Karima-Catherine said: RT @DianeBourque: Mon dernier billet | Comment ajouter J’aime (Like Button) de Facebook sur votre site WordPress http://bit.ly/bFFbnX [...]

Laisser un commentaire

Laisser un commentaire

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