Ajouter les commentaires Facebook a votre blog

Les commentaires Facebook sont une alternative aux commentaires par défaut pour les posts sur WordPress. Vous pouvez soit utiliser les 2 systèmes simultanément ou n’utiliser qu’une seule des deux solutions (tout dépend de votre besoin).

Dans ce tutoriel, nous allons voir comment remplacer les commentaires WordPress par les commentaires Facebook sur vos posts et articles sans utiliser de plugin. Evidemment il est également possible de la faire par l’intermédiaire d »un plugin, cependant, comme à notre habitude chez WordPress Pour les Nuls, nous préférons maîtriser tout ce qui se passe sur nos blogs et sites en codant nous même nos solutions.

Comment ajouter les commentaires Facebook à un blog WordPress

1. La première étape consiste à créer une application Facebook afin de recueillir les commentaires de vos visiteurs. Rassurez-vous, c’est facile et rapide 😉 (pas besoin d’en développer une c’est un outil proposer par Facebook).

Pour créer une application Facebook, rendez-vous sur cette page : https://developers.facebook.com/apps et connectez-vous à votre compte Facebook ou créez un compte si ce n’est déjà fait. Une fois inscrit et connecté, vous allez avoir une option intitulée : « Ajouter une App » (voir image ci-dessous)

creer-app-facebook

Une fois que vous avez cliquer sur « Ajouter une App », une fenêtre va s’ouvrir vous demandant de remplir les informations concernant votre app :

créer une application facebook pour wordpress

Complétez les informations demandées et cliquez ensuite sur « Créer un ID d’app ».

Maintenant que votre App Facebook est créée :

  1. Rendez-vous sur « Tableau de Bord ».
  2. Cliquez ensuite sur « Choisir la Plateforme ».
  3. Choisissez l’option « Site Web ».
  4. Ajoutez l’adresse du site ou vous souhaitez ajouter les commentaires Facebook (en bas de page).
  5. Sauvegardez.
  6. Retournez sur le « Tableau de bord ».
  7. Récupérez le code « APP ID »

Dans votre fichier header.php ajoutez le code suivant après la balise <body> :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'XXXXXXXXXX',
      xfbml      : true,
      version    : 'v2.8'
    });
  };
 
  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Remplacez XXXXXXXXXX par votre App ID récupérer précédemment sur le Tableau de Bord.

Il ne vous reste plus qu’à intégrer les commentaires à l’endroit désiré, pour cela dans votre fichier single.php identifiez le code :

1
<?php comments_template(); ?>

Et ajoutez avant ou après (si vous souhaitez garder les commentaires WordPress), ou remplacez le par le code suivant :

1
<div class="fb-comments" href="<?php the_permalink() ?>" data-width="600" data-numposts="5" data-colorscheme="light"></div>

Et vous aurez dès maintenant les commentaires Facebook actifs à la fin de vos billets de blogs et pages d’articles comme ceci :

commentaires facebook sur wordpress