Comment Installer les Commentaires Facebook sur WordPress

Je ne vais pas vous faire l’introduction à dormir débout en présentant inutilement ce qu’est Facebook avec des chiffres que vous ne retiendrez jamais. Je vais donc vous épargner ces dizaines de lignes inutiles en passant directement au cœur du sujet!

Nous allons voir dans ce tutoriel comment installer les commentaires Facebook sur votre blog WordPress sans plugin, puis à l’aide d’un plugin pour satisfaire un maximum de lecteurs.

Mais avant de voir les deux méthodes, nous allons créer d’abord une « Application ID » avec notre compte Facebook. C’est une étape qui sera commune aux deux méthodes donc autant la faire avant.

Créer une Application ID dans Facebook

En réalité, cette étape est optionnelle mais elle est nécessaire si vous souhaitez, par la suite, pouvoir modérer les commentaires Facebook postés sur votre site.

Première chose, il faut se connecter à son compte Facebook puis se rendre à cette adresse.

S'enregistrer en tant Développeur Facebook

Cliquez sur Register Now pour vous enregistrer en tant que Développeur Facebook.

Une fenêtre s’ouvrira pour accepter les termes d’utilisation, puis une autre pour vérifier votre compte en renseignant votre numéro de téléphone ou alors en ajoutant votre carte bancaire. Dans le premier cas, vous recevrez au choix un code par SMS ou alors via un appel vocal.

Et voilà, vous avez votre compte développeur Facebook.

Compte Développeur Facebook créé.

Nous allons maintenant « créer une nouvelle application » en sélectionnant la plateforme « Website ». Rassurez-vous nous n’allons rien développer avec Facebook (vous pouvez le faire de votre côté sans souci ;). C’est juste pour créer notre App ID. Dans la page suivante, cliquez sur « Skip and Create App ID ».

Créer nouvelle App ID Facebook

Remplissez tous les champs et cliquez sur Create App ID.

Et voilà le tableau de bord de notre nouvelle application.

Dashboard de l'application Facebook

Comme vous pouvez le voir, c’est un tableau de bord assez complexe avec beaucoup de fonctionnalités. Cependant, on ne va pas beaucoup s’y attarder puisque ce n’est pas l’objectif de notre tutoriel. Je vous conseille tout de même de naviguer un peu dans les différentes sections, c’est très intéressant de découvrir ce que vous avez à portée avec cet outil.

Afin de pouvoir utiliser note App ID (celui qui est barré en rouge), il va falloir passer du mode développement au mode public (voir message souligné en rouge en dessous de WPScouts). Pour ce faire, il faut se rendre à la section « Status & Review ».

Rendre App publique

Glissez le switch vers la gauche afin de rendre cette app disponible au grand public. Il se peut que vous ne puissiez pas toucher au switch. En général, c’est dû à une information non renseignée dans les paramètres. Dans mon cas c’était l’adresse de contact qu’il a fallu renseigner dans la section « Settings » :

Page Settings

Et voilà, la création d’une Application ID est terminée et nous avons notre App ID que nous retrouverons par la suite. On ne touchera pas à d’autres choses dans l' »application » créée, on va s’en servir uniquement pour avoir plus la main sur les commentaires installés sur notre site WordPress.

Passons maintenant à la première méthode d’installation des commentaires Facebook.

Comment installer des commentaires Facebook sur WordPress sans Plugin

Il faut se rendre à la page du module des commentaires tout en restant connecté avec votre compte Développeur Facebook.

Comment Box Facebook

Il faut spécifier l’URL du site sur lequel vous voulez intégrer les commentaires Facebook. Vous avez un aperçu de cette boxe en dessous. En changeant les paramètres de dessus, tels que la largeur de cette boxe, le nombre de commentaires et la couleur, vous aurez un aperçu direct de celle-ci.

Cliquez ensuite sur Get Code.

Code de la Comments Box Facebook

Nous avons ici le code que nous allons intégrer dans notre blog. Vous remarquez que l’app ID vient s’ajouter à la ligne js.src= »… ». Cela va nous permettre de pouvoir modérer les commentaires en tant qu’administrateur de l’application.

Comment intégrer la Comment Box sur votre blog WordPress

Nous allons intégrer le code ci-dessus via le tableau de bord de WordPress (ceci peut se faire via le FTP). Il faut dont se rendre dans Apparence > Editeur. Puis dans le menu « Modèles » de droite, sélectionnez le fichier « single.php ». Il s’agit du template affichant la page d’article.

Dans ce fichier, il faut repérer la ligne de code permettant d’afficher les commentaires natifs de WordPress. Elle est de la forme suivante :

comments_template();

Souvent précédée par la ligne de condition :

if ( comments_open() || get_comments_number() ) :

Voilà notre code inséré dans le fichier single.php du thème WordPress par défaut Twenty Fifteen :

Comment insérer le code des commentaires Facebook dans le fichier single.php

Comme évoqué plus haut, nous avons repéré les lignes indiquant les commentaires Facebook par défaut. Puis, nous avons inséré juste au-dessus les deux codes fournis par Facebook. Cependant, une chose qu’il ne surtout pas oublier de faire (sinon ça va tout casser!), c’est de fermer la balise php avec le code (avec « ?> ») puis de la ré-ouvrir après (avec « <?php »). Pourquoi? Parce que dans notre cas, on se retrouve dans un bloc de code entièrement en PHP, on ne peut donc pas insérer des balises HTML à l’intérieur de ce code. Il faut alors veiller à sortir de ce bloc PHP en fermant la balise PHP, puis de la ré-ouvrir afin de revenir au code PHP.

Enfin, vous remarquez également que nous avons remplacé l’URL du site qui était « http://wpscouts.com » par la fonction WordPress « the_permalink()«  qui est en PHP et qu’il faut donc entourer par les balises d’ouverture et de fermeture puisqu’on est à l’intérieur d’un bloc HTML.

Cette fonction permet de donner le lien de l’article ou de la page dans laquelle se trouve l’utilisateur, au lieu de l’URL de la page d’accueil.

Comment modérer les commentaires Facebook

Revenons ici à la fonction de modération des commentaires. Afin de pouvoir bénéficier de cette fonctionnalité, la ligne de tag suivante devra être ajoutée dans la balise <head> :

<meta property="fb:app_id" content="{VOTRE_APP_ID}"/>

En insérant dans l’attribut content la valeur de votre App ID créé plus haut.

Cela va se passer dans le fichier d’en-tête ou header.php de votre thème.

Insérer le tag App ID de Facebook dans le header

Voilà, il faut bien veiller à l’insérer entre les balises <head> et </head>.

Enfin, la modération des commentaires se fait par deux moyens. Le premier est directement sur la page d’article :

Commentaire Facebook

En cliquant sur la « Vue modérateur » vous pouvez voir tous les commentaires en attente de modération et ainsi les approuver ou les supprimer.

Le second moyen de faire cela est en vous rendant sur votre Outil de Modération des Commentaires :

Outil de modération des commentaires Facebook

C’est peu la même interface que la première mais cette fois-ci on est sur le site des développeurs Facebook. Dans cette page, il est possible de configurer selon vos besoins quelques paramètres en cliquant sur Settings.

Paramètres de l'outil de modération des commentaires Facebook

Cet outil de modération est assez avancé puisqu’il permet de :

  • Ajouter d’autres modérateurs de commentaires. Ce sont naturellement des personnes inscrites sur Facebook.
  • Définir son mode de modération.
  • Définir les mots en liste noire, donc pas autorisés à être publiés dans les commentaires Facebook de votre site.
  • Trier les commentaires
  • Activer un filtre grammatical pour éviter de se retrouver avec des commentaires plein d’erreurs.
  • Masquer ou non lorsqu’il y a plus de 5 commentaires.

Et voilà. Ce fut la première méthode d’intégration des commentaires Facebook sur notre blog WordPress sans utiliser de plugin.

Voyons maintenant comment arriver au même objectif en utilisant un petit plugin WordPress.

Comment installer des commentaires Facebook sur WordPress avec le plugin Facebook Comments

Il existe plusieurs plugins pouvant faire l’affaire. Cependant, un bon nombre d’entre eux proposent beaucoup d’autres fonctionnalités dont on n’a pas forcément besoin, ce qui fait de l’espace et de l’allocation de mémoire inutiles en plus. D’autres sont peut être performants mais n’ont pas été mis à jour depuis un bon moment, ce qui pose un risque de se retrouver avec des scripts obsolètes.

Bref, le choix s’est porté sur un plugin qui fait tout juste ce dont on a besoin et qui est en plus de cela régulièrement mis à jour, avec plus d’un demi-million de téléchargement. C’est le plugin Facebook Comments.

Il permet d’installer, configurer, gérer et personnaliser les commentaires Facebook sur votre site WordPress.

Installer et configurer le plugin Facebook Comments

Une fois le plugin installé et activé, il faut se rendre à sa page de configuration via le menu Réglages > Facebook Comments.

Ici, la première chose qui vous sera demandée est de saisir votre App ID.

Ajouter App ID dans le plugin Facebook Comments

Saisissez votre App ID puis glissez vers le bas sans vous préoccuper de reste du paramétrage et cliquez sur Enregistrer.

Vous êtes alors redirigé vers la même page dans laquelle on peut voir de plus près les différentes options. Vous allez voir que l’on va retrouver un bon nombre d’options que l’on a vues ici et là précédemment dans la première partie.

Paramétrage du plugin Facebook Comments

Vous pouvez laisser tout par défaut, si ce n’est les champs de la langue et le titre ainsi que le texte pour les commentaires pour les adapter à votre langue.

Pour la modération des commentaires, on vous donne ici clairement le lien vers votre espace de modération des commentaires sur Facebook que l’on a vu en première partie.

Comment insérer la boîte de commentaires Facebook manuellement à un endroit précis

En laissant tout par défaut, l’affichage de la boîte de commentaires Facebook se fera automatiquement dans les articles en bas de la page.

Le plugin propose un raccourci pour insérer ces commentaires là où vous voulez sur vos articles et pages. Il s’agit du raccourci :

[fbcomments]

Cela vous permet de l’insérer au début, au milieu ou à la fin de votre article ou page. Et même dans vos widgets dans le sidebar, header ou footer.

Par ailleurs, afin d’utiliser des valeurs d’options différentes que celles définies dans la page de paramétrage, vous pouvez ajouter les options suivantes dans le raccourci :

  • url : laisser vide pour utiliser l’URL en cours
  • width : pour redéfinir une largeur avec un minimum obligatoire de 350px
  • title : titre de la boîte de commentaires
  • num : nombre de commentaires à afficher
  • count : afficher ou non (on/off) le compteur de commentaires
  • countmsg : permet d’ajouter un message personnalisé qui sera affiché après le compteur
  • scheme : couleur (light/dark)
  • linklove : entrer « 1 » pour laisser un lien vers la page du plugin

Et voici un exemple d’utilisation :

[fbcomments url="http://wpscouts.com/installer-commentaires-facebook-sur-wordpress/" width="375" count="on" num="3" countmsg="jolis commentaires!"]

Rien de bien difficile.

Si vous souhaitez intégrer le raccourci dans vos fichiers de templates en utilisant PHP, voici la ligne de code à ajouter à l’endroit souhaité :

echo do_shortcode('[fbcomments]');

De même, pour écraser les options par défaut, voici un exemple d’utilisation :

<?php echo do_shortcode('[fbcomments][fbcomments url="http://wpscouts.com/installer-commentaires-facebook-sur-wordpress" width="375" count="on" num="3" countmsg="jolis commentaires!"]'); ?>

Conclusion

Nous avons vu comment installer les commentaires Facebook sur son blog WordPress de A à Z avec deux méthodes différentes : manuellement et à l’aide d’un plugin.

Dans les deux cas, nous avons eu recours à notre App ID de Facebook que l’on créé au début du tutoriel à l’aide de l’interface de Facebook Developpers. Cette étape est nécessaire pour pouvoir bénéficier de la fonctionnalité de modération des commentaires. Chose qui peut être directement sur le site ou alors via son outil de modération proposé par Facebook.

Et voilà, je pense qu’on a fait le tour de ce que l’on peut voir autour de ce sujet. Je vous laisse maintenant la parole pour donner votre avis, demander une question ou juste nous dire bonjour!

Cet article vous a plu?

Abonnez-vous alors à notre newsletter pour recevoir des trucs utiles pour votre site WordPress.

28 Commentaires

  1. Philippe de Nancy 23 avril 2015
  2. Yasmine 14 juillet 2015
    • Anouar Fourti 21 juillet 2015
  3. Julypouce 18 décembre 2015
    • Anouar Fourti 18 décembre 2015
  4. Roccon 26 décembre 2015
  5. darknote 10 janvier 2016
  6. Thomas 14 janvier 2016
  7. soulfree 16 janvier 2016
  8. Izza Adeline 11 avril 2016
  9. Catherine 30 avril 2016
    • Anouar Fourti 30 avril 2016
      • Catherine 2 mai 2016
      • AnnSo 24 novembre 2016
        • AnnSo 28 novembre 2016
          • Anouar Fourti 29 novembre 2016
          • Darknote 29 novembre 2016
  10. Luc 25 juin 2016
    • Darknote 29 novembre 2016
  11. Joseph Koffi 20 septembre 2016
  12. Darknote 22 novembre 2016
  13. delphine 4 avril 2017
    • ladyblogue 2 mai 2017
  14. Renaud 8 août 2017
    • Anouar Fourti 11 août 2017

Laisser un Commentaire

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

Créer et Gérer sa Newsletter avec Mailchimp & l’Intégrer à WordPressSuivre le tutoriel
+ +

Recevez du contenu
WordPress exclusif

Abonnez-vous à notre newsletter et recevez des trucs utiles pour mieux utiliser votre site WordPress!