Ajouter un bouton like Facebook sur WordPress

Comment ajouter un bouton like Facebook sur WordPress, ainsi qu’un bouton de partage ?

Pour ajouter un bouton like Facebook sur WordPress, et un bouton de partage par la même occasion, c’est très simple, inutile d’installer un plugin, voici la marche à suivre.

1. Éditez le fichier “single.php” de votre thème (soit dans le back office, menu Apparence > Éditeur) soit en allant le chercher sur votre FTP.

2. Ajoutez dans le corps de la page, n’importe où mais après l’appel au header (get_header()) et évidemment pas au sein d’une expression php, le code javascript suivant :

[message_box title=”” color=”red”]

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.0″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=’gdl-page-item’>

[/message_box]

3. Repérez ensuite le code php qui gère l’affichage de votre article (WordPress va chercher s’il y a du texte et des classes CSS associées), c’est-à-dire  par exemple (mais ça varie selon les thèmes) les instructions suivantes :

[message_box title=”” color=”red”]

<?php
if ( have_posts() ){
while (have_posts()){
the_post();
echo ‘<div class=”sixteen columns mt0″>’;
echo ‘<div class=”single-port-nav”>’;
previous_post_link(‘%link’,'< %title… ‘,TRUE);
next_post_link(‘%link’,’ …%title >’,TRUE);
echo ‘</div>’;
echo ‘<div class=”clear”></div>’;

[/message_box]

4. Copiez à la suite le bout de code suivant, qui va afficher les boutons like et share de Facebook :

[message_box title=”” color=”red”]echo ‘<div data-href=”#” data-layout=”button_count” data-action=”like” data-show-faces=”true” data-share=”true”></div>’;
[/message_box]

Ca, c’est pour le cas où vous voulez afficher les boutons Facebook comme sur cet article, en haut d’écran. Si vous voulez au contraire les afficher après l’article, il vous suffit de copier ce même code après les instructions gérant l’affichage du contenu, c’est-à-dire après : echo the_content();

Voilà, c’est presque fini…

Dernier point, mais d’une importance capitale : pour maîtriser ce que le bouton de partage va afficher sur votre Facebook (titre, texte, image…) il est indispensable d’utiliser le protocole Open Graph et de l’intégrer sur votre site. Comment faire ? C’est l’objet de l’article que voilà…