Tutorial : installer un “Comments Box” Facebook sur son blog / site en 5 étapes…
Poster un commentaire sur un blog est devenue fastidieux pour les internautes, il faut remplir le formulaire, et attendre la validation du modérateur !
La boite de commentaire, Facebook “Comment Box”, peut être implanter assez facilement sur votre blog WordPress (dans cette exemple ), ou sur votre site !
Les commentaires ne sont plus stockés dans votre base de donnée mais sur Facebook, avantage ou inconvénient à vous de voir ! Personnellement je privilégie l’interactivité avec l’internaute, avec plus de 500 millions d’utilisateurs actifs (d’après Facebook) ce chiffre colossale n’est pas à négligé… Toutefois cette API à tout de même des inconvénients : appel de requêtes externes en plus, plus aucune gestion des commentaires via wordpress (subscribe, modération à la volées…) et certain diront : encore un moyen d’offrir du contenu à FB…L’avantage, c’est que cette API, permet en toute simplicité à vos membres de se connecter avec leur compte Facebook. Les visiteurs n’ayant pas de compte peuvent également laisser un commentaire via ce module.
Comment je l’est dit sur de précédents billets je préfère souvent mettre la main à la pate pour ajouter des extensions maisons plutôt que d’utiliser des plugins parfois gourmands en ressources. Toutefois si l’installation ci dessous vous parait difficile, il existe également un plugin qui fait tout le travaille pour vous : “Facebook Comments for WordPress”. L’installation semble simple, mais je ne l’es pas testé.
Bien passons au chose sérieuse, avant de commencer la procédure d’installation je vous la décrit sommairement :
1) On créer un application sur Facebook
2) On créer un fichier xd_receiver.htm
3) On créer le code Java script
4) On ajoute le code dans comment.php
5) On récupère le ID de l’article pour différencier les boites de commentaires
étapes 1 : Créer une Application sur Facebook
Rendez vous sur http://www.facebook.com/developers/createapp.php
- Donner un nom à votre application, accepter les conditions et cliquer sur “Créer une application”
PS. Parfois sa bug, retourner sur mes applications >> elle doit apparaitre dans la liste.
- Ici votre clé API et votre clé secrète. Allez on va configurez tout ça en cliquant sur “Modifier les paramètres“.
- Fournissez les renseignements demandés (optionnel) icône, logo, langue, email…
- Cliquez sur l’onglet “Connexion” et dans le champ “URL Connect” mettez l’adresse de votre site, sans oublier le / à la fin.
- Indiquez le nom de domaine de base exemple : www.alan-chakri.fr mais cette fois sans le / et sans les http://
- Cliquez sur “Enregistrer les modifications” , vous êtes rediriger vers la page de votre application, noté notre numéro de clé API elle va nous servir bientôt !
étapes 2 : Créer le fichier xd_receiver.htm
- Ouvrez votre éditeur favoris et copier coller ce qui suis dedans :
<!DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Strict//EN »
« http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>
<html xmlns= »http://www.w3.org/1999/xhtml » >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src= »http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?v2″ type= »text/javascript »></script>
</body>
</html>
- Uploader le fichier, par exemple à la racine de votre site, en le nommant xd_receiver.htm
étapes 3 : créer le code Java script
Voici le code à implanter que nous allons modifier
<!———–DEBUT CODE———->
<script src=
« http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php »
type= »text/javascript »></script>
<fb:comments xid= » » width= »520″></fb:comments>
<script type= »text/javascript »>
FB.init(« VOTRE_CLE_API », « path/xd_receiver.htm »);
</script>
<!———–FIN CODE———->
Nous allons d’abord modifier la balise : comments xid= » « il s’agit de l’identifiant unique des commentaires !
Si vous placé la balise avec un seul identifiant , toutes les pages auront les mêmes commentaires, il est donc impératif de donné un id unique par billet a la balise comments xid.
Nous devons donc récupéré un numéro unique (ou lien unique) pour associer les commentaires Facebook au billet qui s’affiche !
On va utiliser ceci :
<?php foreach ($comments as $comment) : ?><?php comment_ID() ?><?php endforeach; ?>
Ce code vas retournés le ID de votre article (en faite c’est plutôt le ID du commentaire) . Le principale c’est de récupéré un identifiant unique pour chaque article.
Donc au final on auras :
comments xid= »<?php foreach ($comments as $comment) : ?><?php comment_ID() ?><?php endforeach; ?> »
Ensuite dans :
FB.init(« VOTRE_CLE_API », « path/xd_receiver.htm »);
et bien copier coller votre numéro de clé API et renseigner l’url vers le fichier xd_receiver
ce qui pour ce blog donne :
FB.init(« 6852a67d78f1f59a753eaa753bba138b », http://www.alan-chakri.fr/xd_receiver.htm)
Vous pouvez spécifier différents paramètres au code notamment la largeur, le titre etc..
par exemple dans mon cas : width= »520″ la liste des possibilités se trouve ici
Et voila le résultat final avec mon blog en exemple :
<!———–DEBUT CODE———->
<script src=
« http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php »
type= »text/javascript »></script>
<fb:comments xid= »<?php foreach ($comments as $comment) : ?><?php comment_ID() ?><?php endforeach; ?> » width= »520″></fb:comments>
<script type= »text/javascript »>
FB.init(« 6852a67d78f1f59a753eaa753bba138b », « http://www.alan-chakri.fr/xd_receiver.htm »);
</script>
<!———–FIN CODE———->
Il ne nous reste plus que à coller ce bout de code dans :
wp-content/themes/VOTRETHEME/comments.php
Vers la ligne 22 AVANT la balise : <?php if ($comments) : ?>
Et voila vous pouvez tester en ajoutant un commentaire agréable ci-dessous 
Articles connexes
Afficher du code PHP, CSS, HTML dans vos articles WorPress sans plugins avec SyntaxHighlighter
Vous avez au moins 25 fans sur votre page Facebook ?
Pourquoi ne pas changer son URL ?!
Publier proprement et sans « duplicate content », un article sur le mur de votre page fans Facebook !
Hack WordPress “Top 10 Posts”
Créer une page officielle ou une page communauté sur Facebook ? Ne négligez pas cette étape essentielle !
23 juillet 2010 à 18:53
[...] Ce billet était mentionné sur Twitter par Le Rédac, Saugrin Sonia. Saugrin Sonia a dit: http://bit.ly/bMwr0s @leredac c'est ceci ? Pas mal en tous cas ! [...]
7 décembre 2010 à 15:24
ca marche pas
17 décembre 2010 à 3:18
Hum, pas mal de fonction on changé sur Facebook ces derniers temps, et puis « ça marche pas » c’est un peux vague comme info pour que je puisse te répondre
Bref perso j’ai viré ce truc de mon blog parce que au final les internautes utilisait plus les commentaires de WorPress que ceux de Facebook. Je sais c’est étonnant, mais bon voila …
1 février 2011 à 18:56
J’ai refait cette manip récemment sur la ptite gazette et ça marche no soucis …
6 juin 2011 à 18:20
bonjour,
j’aimerais le mettre sur mon site, mais je n’y arrive pas, j’ai créer une application mais ça reste flou! comment générer un code html pour que je puisse le déposer sur mon site?
6 juin 2011 à 18:34
ça dépend c’est pour utiliser sur WorPress ?
6 juin 2011 à 18:44
non j’utilise le logiciel d’adobe contribute cs5 pour gerer le site. j’ai essayé votre méthode mais le visuel facebook a changé et je suis perdu.j’ai essayé « html comment box » et cela a échoué également. D’autres sites proposent mais il manque la fonction modérateur..
6 juin 2011 à 19:07
Ce tuto est spécifique au CMS WordPress ! Perso j’ai viré cette fonction Facebook parce que je ne savais pas quand quelqu’un poster un message sur le site
20 juillet 2011 à 18:16
Ce tuto est super ! merci
13 octobre 2011 à 20:31
Sympa le tuto