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.
Dans cet article
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.
- 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.
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.
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 !
Merci, tuto parfait :-)
The Real Person!
The Real Person!
Merci Nadège !
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 !!!
The Real Person!
The Real Person!
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.
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 ?
The Real Person!
The Real Person!
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.Merci pour votre réponse mais je suis sur Blogger et pas sur WordPress. Je ne trouve pas le fichier php.
The Real Person!
The Real Person!
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 !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.
The Real Person!
The Real Person!
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
<bodyque 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 :)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.
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
The Real Person!
The Real Person!
Bonjour, en fait, en l’état, ce ne sont pas vraiment des icônes mais des boutons de partage dynamiques qui sont gérés par Facebook. Pour les personnaliser, il faut donc coder. Il y a des tutos sur Google en tapant « boutons partage personnalisés », par exemple ce tuto vidéo pour créer des boutons de partage social personnalisés.
Merci !!! Moi qui suis nulle en programmation je vais pouvoir me lancer dans le blogging !!!
The Real Person!
The Real Person!
Il faut commencer par petites étapes :) Au fil du temps, on devient plus à l’aise avec l’aspect technique des choses !
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!
The Real Person!
The Real Person!
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.
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. ^^