Tutorial : installer un “Comments Box” Facebook sur son blog / site en 5 étapes…

post

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”

etape1

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“.

etape2

  • Fournissez les renseignements demandés (optionnel) icône, logo, langue, email…

etape3

  • 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://

etape4

  • 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>

Ou télécharger le ici !

  • 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 🙂

10 thoughts to “Tutorial : installer un “Comments Box” Facebook sur son blog / site en 5 étapes…”

  1. 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 …

  2. 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?

  3. 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..

  4. 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 😉

Laisser un commentaire

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