Comment ajouter un bouton J’aime Facebook (bouton like) à son blog ?


Le bouton J'aime Facebook (ou bouton like) permet à vos visiteurs de signaler qu'ils aiment vos contenus, qu'il s'agisse d'un article précis, de votre site dans son ensemble ou de votre page Facebook.

Il fait partie des options qui sont à votre disposition pour mieux valoriser vos publications sur les réseaux sociaux... et dans cet article, je vais vous montrer comment ajouter le bouton J'aime de Facebook à votre blog ou site.

Obtenir le code du bouton J'aime Facebook

Ça se passe sur le site de Facebook où vous trouvez le "Configurateur du bouton J’aime". Il est très simple de le compléter pour générer le code du bouton like que vous allez placer sur votre site :

  • URL - Vous avez ici trois possibilités. 1) Indiquer l'adresse de votre site. Le visiteur qui clique sur "J'aime" likera le site dans son ensemble. 2) Indiquer l'adresse d'une page Facebook. Un "like" équivaut au fait de devenir fan de la page. 3) Laisser le champ vide : le système choisira alors automatiquement la page sur laquelle le bouton J'aime est placé.
  • Width - Vous pouvez définir une largeur spécifique à ne pas dépasser pour votre bouton J'aime.
  • Disposition - Facebook vous propose de choisir entre 4 affichages différents du bouton J'aime.
    Affichage du bouton J'aime sur Facebook
  • Type d'action - Vous avez le choix entre Like qui affiche un bouton "J'aime" et Recommend qui affiche un bouton "Recommander".

Ensuite, vous avez deux options disponibles :

  • Afficher les visages d’ami(e)s - Si certains de vos amis ont déjà aimé l'URL, vous verrez leur image de profil apparaître à cet endroit.
  • Ajouter un bouton Partager - Le bouton J'aime Facebook poste directement la page likée sur votre profil... tandis que le bouton Partager vous permet d'ajouter un commentaire dessus en complément.
Configurateur de bouton J'aime sur Facebook
Configurateur de bouton J'aime sur Facebook

Cliquez maintenant sur "Obtenir le code".

Placer le code du bouton J'aime Facebook sur votre site

Le code du bouton Like Facebook est par défaut en deux parties.

Ajouter le bouton J'aime Facebook

La première (en bleu ci-dessus) correspond au SDK Facebook, qui contrôle les fonctionnalités de tous les plugins Facebook. Il ne doit donc être présent qu'une fois sur vos pages : si vous l'avez déjà recopié dans votre code ou que vous installez d'autres fonctions comme le login avec Facebook, vous n'avez pas besoin de mettre ce bout de code plusieurs fois. Le code du SDK doit être copié juste après la balise <body> de vos pages web.

  • Sur WordPress, elle se trouve généralement dans le fichier header.php de votre thème : vous pouvez y accéder en utilisant un client FTP comme FileZilla pour accéder à l'emplacement où sont situés les fichiers de votre blog ; allez ensuite dans le dossier wp-content, puis "themes", puis le dossier de votre thème (ou de votre thème enfant si vous en avez un).
  • Sur Blogger, il faut aller dans Thèmes > Modifier le code HTML.

Recherchez <body> dans le code et copiez-coller la partie en bleu juste après.

Si vous ne trouvez pas <body> en l'état, sachez que dans certains thèmes, la partie <body peut être suivie d'autres éléments, par exemple <body class="blog">. Dans ce cas, cherchez juste le début (<body) et copiez la partie en bleu donnée par Facebook après le > qui "clôture" la ligne du body.

Une fois cette partie du code copiée, vous pouvez insérer le deuxième bout de code fourni (en violet ci-dessus) à l'endroit où vous souhaitez faire apparaître ce bouton J'aime Facebook : dans un widget, sous votre contenu, dans un article, etc.

L'autre option, encore plus simple, consiste à cliquer sur l'autre solution proposée par Facebook pour intégrer le bouton J'aime : l'iframe. Vous obtenez un code commençant par <iframe src="https://www.facebook.com/plugins/like.php?, à copier-coller très simplement à l'endroit où vous voulez afficher un bouton J'aime.

Selon vos paramètres de confidentialité, le fait d'aimer une page peut apparaître ou non sur votre profil Facebook. Vous retrouvez quoi qu'il arrive une trace de votre Like dans votre historique personnel.

Information complémentaire sur le bouton J'aime Facebook

Vous vous demanderez peut-être à quoi correspond le nombre de Likes affichés par le bouton J'aime Facebook. Tout dépend du type d'URL concerné :

  • Si vous avez indiqué l'adresse d'une page Facebook dans le configurateur de bouton J'aime, le nombre de Likes correspond au nombre de personnes qui suivent la page.
  • Si vous avez mis l'adresse d'un site, ça correspond au nombre de partages de cette URL sur Facebook.

Le bouton J'aime peut aussi effectuer la somme du "nombre de mentions J’aime et de commentaires sur les actualités sur Facebook concernant votre URL" à en croire Facebook.

J'espère que cet article vous aidera à installer le bouton J'aime en toute simplicité sur votre site ou blog !


Poster un commentaire

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

18 commentaires sur “Comment ajouter un bouton J’aime Facebook (bouton like) à son blog ?
  • NADEGE

    Merci, tuto parfait :-)

    Répondre à NADEGE
  • serge

    Bonjour Marlène. grand merci pour vos articles, ça m’a vraiment aidé à améliorer mon blog.
    Je n’ai pas compris où il fallait coller les deuxièmes codes. Le premier, J’ai réussi à le coller dans thème« HTML » après le > de body, mais le second, j’avoue que je ne sais comment m’y prendre.
    Merci de m’aider, si possible image à l’appui !!!

    Répondre à serge
    • Marlène

      Bonjour Serge, pour le second code tout dépend de l’endroit où vous voulez le placer. Je ne peux pas vous donner d’image car tout dépend de votre plateforme, de votre thème, etc. Par exemple, si vous êtes sur WordPress et que vous voulez faire apparaître le bouton J’aime dans la colonne sur le côté du blog, il faut aller dans le menu Apparence > Widgets, ajouter un widget de type « HTML personnalisé » et copier le bout de code à l’intérieur.

      Répondre à Marlène
  • Sonia

    Bonsoir,
    SVP Pourriez-vous m’indiquer où je dois copier le code si je veux afficher le bouton j’aime juste en dessous du titre de l’article ?

    Répondre à Sonia
    • Marlène

      Bonjour Sonia, chaque thème est différent… mais il faut chercher une partie du code qui comporte the_title(), dans un fichier souvent intitulé single.php. Pensez à créer un thème enfant si vous apportez des modifications à votre thème WordPress car sinon, elles risquent d’être effacées lors de la mise à jour du thème.

      Répondre à Marlène
    • Sonia

      Merci pour votre réponse mais je suis sur Blogger et pas sur WordPress. Je ne trouve pas le fichier php.

      Répondre à Sonia
    • Marlène

      Sur Blogger, il faut chercher une ligne de code qui s’appelle data:post.title (ligne qui correspond au titre, elle peut apparaître plusieurs fois dans un thème), je ne peux pas vous en dire plus car chaque thème est différent ;) A chercher via le menu Thèmes > Modifier le code HTML et bien penser à faire une sauvegarde du code avant toute modification !

      Répondre à Marlène
  • Mirna

    Bonjour Marlène,
    Je n’ai pas compris où il fallait coller les codes. J’ai un widget « suivez moi sur facebook » avec la photo de mes amis mais je voudrais en plus un bouton like ma page facebook. Je ne sais pas du tout où insérer le premier ni le second code. Est ce que c’est dans mise en page puis ajouter un gadget. Ou alors modifier le 1er code facebook ?
    Merci beaucoup de m’aider.

    Répondre à Mirna
    • Marlène

      Hello, sur Blogger il faut aller dans Thème > Modifier le code HTML et copier la première partie du code après la balise <body que tu trouveras dans le code de ton thème. La deuxième partie se copie à l’endroit où tu souhaites faire apparaître le bouton J’aime : si tu veux le mettre dans un gadget sur le côté de ton blog par exemple, tu vas dans Mise en page et tu ajoutes un gadget sur le côté de ton blog :)

      Répondre à Marlène
    • Mirna

      Merci de ta réponse Marlène. Alors je n’ai jamais pu valider le 1er code ça me faisait un message d’erreur. J’ai copié le second code dans mise en page et là ça a marché. Par contre, étant donné que j’avais déjà une icone facebook maintenant j’en ai deux. Et je n’arrive pas à savoir si c’est la même chose.

      Répondre à Mirna
  • Caroline

    Bonjour !

    vos explications sont très claires et j’ai réussi à installer un icône facebook sur mon blog.

    Par contre, comment faire pour personnaliser nos icônes ? Que ce soit Facebook, Pinterest ou Twitter ?

    Malgré plusieurs heures de recherches sur internent, je n’ai trouvé aucun tutoriel à ce sujet.

    Merci beaucoup !

    Caroline

    Répondre à Caroline
  • Marina Sotaia

    Merci !!! Moi qui suis nulle en programmation je vais pouvoir me lancer dans le blogging !!!

    Répondre à Marina
    • Marlène

      Il faut commencer par petites étapes :) Au fil du temps, on devient plus à l’aise avec l’aspect technique des choses !

      Répondre à Marlène
  • charlotte

    Bonjour, qu’est-ce que le le fichier header.php de mon thème ? je m’essaye au code d’habitude c’est mon chéri qui s’en occupe… et je suis une vraie newbie!

    Répondre à charlotte
    • Marlène

      Bonjour Charlotte, chaque thème WordPress est composé de différents fichiers… dont un fichier qui s’appelle header.php. Ces fichiers sont stockés sur un serveur. Il faut donc aller modifier header.php à l’endroit où il se trouve, en passant de préférence par un client FTP (un logiciel qui permet d’accéder au serveur où sont stockés les fichiers du site) : il faut se connecter au serveur puis aller dans le dossier wp-content > themes > (nom de ton design) > header.php.

      Répondre à Marlène
    • charlotte

      ok merci beaucoup pour cette explication. j’ai abandonnée bien vite de faire cela seule ( car ça reste du chinois pour moi) on a des petits pb d’affichages de fichiers wp dans le ftp, j’ai contacté mon hébergeur et j’attends leur aide. ^^

      Répondre à charlotte


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.