L’objectif de cet article est de mettre en place un système de commentaire Facebook en lieu et place du système natif de commentaire de wordpress sur la page article (single.php). La mis en place va être réalisée directement via du code source et non via un plugin.
L’avantage de faire l’intégration à la main est de mettre le système de commentaire que dans les pages ayant besoin de cette fonctionnalité.
Les plugins WP, tout prêt, ont la fâcheuse tendance à ajouter du code javascript sur toutes les pages du site et peuvent ne pas marcher parfaitement.
Moins il y a de plugin installé, moins il y a de failles potentielles de sécurité …
Enfin, plus il y a de plugin installé sur votre wordpress, moins le site est performant.

Désactiver le système de commentaire wordpress :

Tout d’abord il faut désactiver le système de commentaire natif de wordpress en allant dans Réglage puis Discussion, décocher la case Autoriser les lecteurs à ajouter des commentaires sur les nouveaux articles

Se créer une App Facebook :

Connectez vous à votre profil Facebook, puis cliquez sur le lien gérer les applications sur votre wall général :

Cliquer sur le bouton Add New App :

Dans notre cas, nous allons créer un web app, il faut donc cliquer sur www :

Remplir le formulaire : seul le nom de l’app est champ obligatoire lors de cette étape :

Vous arrivez dans le tableau de bord de votre app et vous devez voir votre id d’application .
Au premier abord c’est assez impressionnant vu le nom de lien cliquable qu’il y a sur la page. Le lien important dans notre cas est situé à gauche, l’onglet Paramètre :
Les champs email, domaine de l’app et url du site doivent être complétés pour que l’app Facebook soit opérationnelle en production :

Activer votre application via l’onglet App Review :

Code source du plugin :

Maintenant que l’on dispose d’une App Facebook et d’une app-id, nous pouvons ajouter le code source pour afficher le bloc commentaire facebook dans notre site. Trois bloc sont nécessaires :

• balise méta open graphic
• un peu de javascript
• un peu de html

Dans le header, ajout de balises méta open graph

Best practice pour les balises méta open graph
A mettre dans le fichier header.php ou dans le fichier functions.php via le hook wp_header :

<?php if(is_single ()){ ?>
        <meta property="fb:app_id" content="id_FB_de_votre_app" />
        <meta property="og:url" content="<?php echo get_permalink( $post->ID ); ?>" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="<?php wp_title( '|', true, 'right' ); ?>votre_site.com" />
        <meta property="og:locale" content="<?php echo str_replace("-", "_", get_bloginfo('language'))  ?>" />        
        <?php $p = strip_tags(get_post_field('post_content', $post->ID)) ; ?>
        <meta property="og:description" content="<?php echo $p; ?>" />
        <?php
        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
        $url = $thumb['0'];
        if(empty($url)){ ?>
        <meta property="og:image" content="<?php no_img(); ?>" />
        <?php }else{ ?>
        <meta property="og:image" content="<?php echo $url ?>" />
        <?php } ?>
        <meta property="og:site_name" content="votre_site.com" />
        <?php } ?>

http://ogp.me

Astuce la console debug facebook

Pour voir si votre codage est conforme et que vos balises métas sont bien trouvées et interprétées, Facebook met à disposition un outil de debug :
http://developers.facebook.com/tools/debug/
Après avoir mis l’url de votre page disposant des nouvelles métas, ce parseur de html va vous afficher si tout est bien conforme.

En cas d’erreur :

S’il y a des erreurs ou des informations manquantes, l’outil de debug de Facebook va vous les afficher.
J’ai eu personnellement des problèmes sur la balise og:type que je souhaitais personnaliser.
Il faut se conformer à la norme décrite dans la documentation et aux bests pratices de Facebook en terme de tags open graph.
Autre point important, l’url des images à mettre à disposition og:image doivent avoir au minimum les dimensions suivantes 200 x 200 pixels

Juste après la balise ouvrante body, ajout de js :

A mettre dans le fichier header.php ou ajouter do_action(‘after_body’); après la balise ouvrante body puis dans functions.php ajouter le hook add_action(‘after_body’, ‘fb_js’); avec le code suivant :

<?php if(is_single ()){ ?>
       <div id="fb-root"></div>
<script>(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#xfbml=1&version=v2.5&appId=id_FB_de_votre_app";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<?php } ?>

Dans votre page de template, la balise qui va afficher la textarea de commentaire FB

A mettre dans la page single.php, voici ma balise :

<div class="fb-comments" data-href="<?php echo get_permalink( $post->ID ); ?>" data-numposts="5" data-width="100%"></div>

Générateur de plugin FB

Dans sa documentation, Facebook met à disposition un générateur de code et un tableau sur les attributs / valeurs possibles à utiliser pour customiser l’affichage du plugin commentaire

Comportement du plugin mis en place

Après tous ces efforts, ça y est vous avez dans vos pages articles une zone de commentaire Facebook :

• Les commentaires qui seront dans ce champ seront stockés chez Facebook et plus dans votre base de donnée.

• Lors du lancement de votre page et lorsqu’il y a un click sur la textarea, des requêtes ajax sont lancées pour récupérer et/ou enregistrer des commentaires. Ces requête sont visibles dans la console Firebug :

  

• J’ai eu beau chercher il n’est pas possible de précochez la checkbox « publier également sur Facebook ».
• Last but not least, si un utilisateur décide de publier l’article suite à l’ajout d’un commentaire, l’article va être dupliqué sur le mur Facebook de l’utilisateur.
• Attention, si un article dupliqué dans Facebook et cet article dupliqué est commenté, ce commentaire ne va pas s’incrémenter dans votre bloc de commentaire facebook affiché dans votre site : votre article sur votre site wordpress et l’article dupliqué sur Facebook sont deux entités différentes et leurs commentaires ne sont pas partagés…