Article écrit par Tharcisse, de Freezeec.

Vous avez un site que vous avez développé vous-même, et vous vous demandez comment intégrer le système de commentaire de Facebook ? Pas de panique, voici l’explication détaillée !

Note : la manipulation n’est pas très longue, mais je vous conseille de la lire en entier avant de commencer.

Le point un peu délicat, c’est la gestion des commentaires par articles : c’est à dire qu’un article X à ces propres commentaires, qui diffèrent de ceux de l’article Y. Ce n’est pas tellement la mise en place différenciée qui est complexe, mais plutôt la gestion des commentaires coté administrateur/modérateur qui l’est.

Avec cette gestion différenciée, l’administrateur du site aimerait quand même avoir une vue globale de tous les commentaires postés sur le site et bien j’ai cherché tant bien que mal cette fonctionnalité sur la page « developers » de Facebook, elle n’est expliquée clairement nulle part. J’ai fini par y arriver, et à la vue des différents posts que j’ai pu voir dans les forums au cours de mes recherches, je pense que partager mon expérience peut aider des webmasters.

Pour commencer, il faut intégrer les deux balises suivantes dans le header :

1
2
<meta content="{votre identifiant facebook}" />
<meta content="{votre identifiant d'applications}" />

{votre identifiant facebook} représente votre identifiant ou l’identifiant de la personne qui s’occupera de la gestion des commentaires. Pour connaitre cet identifiant, rendez-vous sur la page http://graph.facebook.com/votre_nom_pseudo (votre_nom_pseudo = ce qui est derrière facebook.com sur la page de votre profil).

1
<meta content="{votre identifiant d'applications}" />

Oui pour voir tous les commentaires d’un domaine il faut un app_id ! C’est donc là que ça se gâte vraiment car il faut créer une application Facebook. Pour cela, allez sur cette page : https://developers.facebook.com/apps.

Vous pouvez donner le nom que vous voulez à l’application :

Facebook : création d'une nouvelle application

Facebook : création d’une nouvelle application

Vous avez ensuite cette page qui vous donne l’app_id :

Application Facebook : son ID

Application Facebook : son ID

Et puisqu’on est dans l’interface d’administration, on va en profiter pour faire tous les paramétrages :

Application Facebook créée

Application Facebook créée

Car il faut ensuite renseigner le domaine sur lequel se trouve les commentaires, par exemple freezeec.com (sans les http, ni les www) :

Application Facebook : paramétrage du domaine

Application Facebook : paramétrage du domaine

Ce n’est pas encore fini, le domaine ne suffit pas à Facebook pour s’y retrouver : il faut encore lui renseigner l’url racine complète de votre site. Et cette info se remplie via le lien « Website with facebook Login » (oui je sais le libellé est bizarre).

Mais cliquez ici :

Application Facebook : URL de votre site

Application Facebook : URL de votre site

et renseignez votre url :

Application Facebook : URL de votre site

Application Facebook : URL de votre site

Enregistrez, et s’en est terminé du paramétrage coté Facebook.

Dans les headers de votre site, vous avez ajouté :

1
2
<meta content="{votre identifiant facebook}" />
<meta content="{votre identifiant d'applications}" />

Ajoutez également le code suivant sous la balise body des pages contenant la gestion des commentaires :

1
2
3
4
5
6
7
8
9
10
<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]></script>

Et placez enfin ce code à l’endroit où vous voulez voir apparaitre le bloc des commentaires :

1
<div id="comments"></div>

Voilà c’est enfin terminé. Maintenant pour voir la globalité des commentaires de votre domaine, il vous suffit d’aller à l’adresse suivante : http://developers.facebook.com/tools/comments?id={app_id}.

Saisissez des commentaires, et demandez à des amis d’en saisir pour pouvoir testé. Attention si vous postez des commentaires avant d’avoir finalisé toutes les étapes, alors ces commentaires ne seront pas visibles via le lien ci-dessus. Si vous ne voyez aucun commentaire, alors que vous en avez posté pour tester, allez sur le lien suivant : http://developers.facebook.com/tools/debug.

Si vous avez des erreurs, essayez de les corriger et retentez (il faut reposter des nouveaux commentaires).

Je vous conseille également de tester une page contenant le bloc des commentaires (par ex : http://www.freezeec.com/freezeec-nouveau-site.html).

Les erreurs sont bloquantes, mais pas les warnings. Voilà ce que vous devriez avoir :

Commentaires Facebook sur votre site : fin du paramétrage

Commentaires Facebook sur votre site : fin du paramétrage

Il existe également une solution alternative : Disqus.

Article écrit par Tharcisse, de Freezeec.