Comment Utiliser « Facebook Comments » sur un Blog WordPress

Par le 8 mai 2011 dans Webmarketing | 19 commentaires

Partager sur GooglePartager sur FacebookPartager sur Twitter

A nouveau site, nouvelles expériences. Cette fois, j’ai décidé de tester quelque chose de (relativement) nouveau et d’assez peu courant à ce que j’ai pu voir au sein de la blogosphère francophone. J’ai choisi de ne pas utiliser le module de gestion des commentaires de WordPress. A la place, comme vous avez peut-être pu le voir sur mon précédent billet, j’ai installé le module « Facebook Comments ».

La réalisation de cette manipulation n’est pas compliquée en soi. Elle n’est pas pour autant très… intuitive.

Avant toute chose, j’aimerai revenir sur les avantages et les inconvénients de la mise en place de Facebook Comments.

Avantages

  • Spam & Troll : Pour pouvoir commenter, vos visiteurs doivent posséder un compte Facebook (ou un compte Yahoo). TechCrunch, le célèbre site sur la high tech, a mis en place Facebook Comments avec comme objectif principal de diminuer le spam et faire taire les trolls. Le résultat est flagrant. Le fait de devoir utiliser son identité « réelle » fait que l’on est tout de suite beaucoup plus… attentif à ce que l’on dit.
  • Fréquentation : Encore une fois, l’expérimentation de TechCrunch est sans appel sur ce point. Deux mécanismes sont à l’oeuvre ici : les commentaires sont relayés sur le mur Facebook des utilisateurs / le fait de pouvoir « Aimer » les commentaires développe le nombre de « J’aime » donc le nombre et les chances d’apparition sur les murs Facebook des utilisateurs et de leurs amis.
  • Simplicité : L’interface utilisateur est super clean et super simple. Si en plus, vous êtes déjà « connecté » à votre compte Facebook, pas besoin de devoir renseigner quoi que ce soit : vous pouvez tout de suite interagir !

Inconvénients

  • Pas de bénéfice en termes de SEO : Les commentaires Facebook étant inclus dans une « iframe », ils ne sont pas pris en comptes par les robots des moteurs de recherche dans leurs visites. Il semblerait qu’il existe un moyen d’extraire ces commentaires via l’API Facebook et donc de les republier automatiquement par la suite. Si je trouve une méthode simple et pertinente sur ce point, je la partagerai avec vous.
  • Perte de contrôle : Laisser Facebook s’occuper des commentaires, c’est un peu perdre la propriété de son audience. Les commentaires sont accessibles depuis le site, mais ils ne sont pas herbergés chez vous. Ils sont sur les serveurs de Facebook. C’est un risque si un jour vous voulez changer pour autre chose.
  • Risque de « bloquer » certaines langues : Faire taire les trolls, c’est bien. Mais les possibilités de connection à Facebook Comments sont pour l’instant limitées. C’est soit Facebook, soit Yahoo. Impossible de se connecter avec Twitter, ou avec un compte Google par exemple. Le risque est donc de se couper d’une partie de son audience.

Je conclurai sur le fait que, malgré ces inconvénients, ma décision a été assez rapide en ce qui concerne ce nouveau site. Je n’ai pas d’historique de commentaires, donc je n’ai rien à « perdre ».

Pour un site déjà existant, le choix aurait été plus compliqué. L’affichage simultané des commentaires classiques et de Facebook Comments n’est pas forcément très esthétique ni simple pour l’utilisateur.

Je ne sais pas si j’aurai sauté le pas sur un site avec déjà un historique de commentaires.

Installer « Facebook Comments » sur votre blog

Rassurez-vous, nous n’allons pas rentrer dans le code.

Etape 1 – Installation du plugin

La première étape consiste à aller récupérer un plugin qui va nous permettre d’installer et de configurer facilement Facebook Comments sur le blog WordPress.

Voici le plugin à télécharger et à installer sur votre blog : Facebook Comments for WordPress.

Pensez à activer le plugin une fois que vous l’avez installé.

Etape 2 – Création d’une application Facebook

Cette étape n’est pas forcément très intuitive… Mais elle est nécessaire afin de faire fonctionner Facebook Comments sur n’importe quel site.

Vous devez vous rendre sur Facebook et installer l’application pour les développeurs.

Une fois que avez installé le module, vous devriez pouvoir créer votre propre application en cliquant sur le bouton en haut à droite de la page :

Vous devez renseigner le nom de votre application dans un premier temps (généralement le nom de votre site web).

Puis, vous allez pouvoir renseigner la description de votre application (Application pour Facebook Comments par exemple), ajouter des icônes, choisir la langue, donner quelques renseignements au cas où et ajouter vos pages de Mentions Légales.

La dernière étape est d’indiquer à Facebook l’adresse de votre site (http://www.MonSuperSite.com) et le domaine principal (MonSuperSite.com).

Gardez cette fenêtre ouverte car vous allez avoir besoin de l’ID de l’application et de votre clé secrète d’application pour configurer Facebook Comments sur votre blog WordPress.

Etape 3 – Configuration de Facebook Comments sur WordPress

Tout d’abord, dans l’interface d’administration de WordPress, vous devriez avoir un nouveau menu pour accéder aux options Facebook Comments en bas à gauche.

Facebook Comments for WordPress propose trois versions du plugin. Je n’ai pas essayé la v1 (qui date un peu et qui est de moins en moins utilisée), mais chez moi, le réglage « new » (par défaut pourtant) ne fonctionne pas. Par contre, aucun soucis avec la v2 qui est la version la plus récente des commentaires sur Facebook.

C’est dans cette zone qu’il faut renseigner l’Application ID et le code secret. Un copier/coller fera très bien l’affaire.

L’outil propose ensuite différents réglages, le double affichage des commentaires, la possibilité de rajouter le bouton « J’aime », plusieurs réglages sur l’apparence…

Pensez-bien à modifier l’option « Width of Comments Box » dans le menu « Comment Box Settings ». Cette valeur est la largeur en pixels que doit prendre votre module de commentaires.

Voilà, c’est presque terminé. Il reste la touche finale (qui n’était pas cochée par défaut sur mon installation… alors que c’est « primordial » !).

Il faut utiliser le menu « Options Avancées » pour inclure le SDK Javascript de Facebook, les références au langage XFBML et à l’Open Graph dans votre header ainsi que les meta informations sur les pages. Reproduisez simplement le réglage suivant si vous n’avez pas d’autre module Facebook d’activé sur votre site :

 

Et voilà ! Vous avez fini de configurer Facebook Comments for WordPress !

N’hésitez pas à jeter un oeil aux autres réglages proposés par l’interface de configuration. Le plugin est très complet et permet d’effectuer pas mal de réglages. Vous trouverez sans aucun doute votre bonheur !

Si vous souhaitez tester Facebook Comments, je vous invite à me laisser un commentaire ci-dessous ! ;) N’hésitez pas à me dire ce que vous en pensez !

19 commentaires

  1. Harold Paris

    11 juillet 2011

    Répondre

    Voici les commentaires avant la suppression de Facebook Comments :

    Olivier Jadzinski
    je suis en train de peser le pour et le contre aussi, je vous dirai!

    Harold Paris
    Super Olivier ! N’hésite pas à nous faire un retour d’expérience sur le sujet ! Tu le teste sur un nouveau site ou bien sur un site déjà existant ?

    Olivier Jadzinski
    sur un nouveau .. mais pas concluant pour le moment !

    Emanuelle Brusacoram
    Bonjour Harold, tout d’abord un grand merci pour ce guide :) Par contre saurais-tu comment augmenter la hauteur de la box ?

    Harold Paris
    Bonjour Emanuelle ! Bien sûr, dans les options, tu as une partie qui s’appelle « Comment Box Settings ». Ici tu peux choisir la largeur de l’espace de commentaires et le nombre de commentaires à afficher. Plus tu en mets, plus la box est haute !

    Elise Boisquillon
    Merci pour ces explications. Ca pourra m’être utile!

    Harold Paris ;) Merci pour le retour ! N’hésitez pas à poser vos questions ! :)

    Jeremy Petrowski
    Le miens ne fonctionne pas :/

    Harold Paris
    Bonjour Jeremy ! Vos commentaires Facebook ne fonctionnent pas sur un de vos sites ? Je peux peut-être vous filer un coup de main ? Qu’est-ce qui ne marche pas exactement ?

    Jeremy Petrowski
    J’ai suivi scrupuleusement votre tutoriel, et rien absolument rien n’apparait pour commenter, comme si je n’avais rien fait

  2. Florent

    12 juillet 2011

    Répondre

    Bonjour,

    J’ai installé Facebook comments sur mon site, mais lorsque les gens laissent un commentaire, le lien qui est publié sur leur mur n’est pas correct.
    Il semble y avoir une erreur d’encodage, mais cela ne me semble pas être le seul problème.

    Ex d’un lien pour la page http://www.paintball-blog.fr/le-materiel-de-paintball/lanceur-paintball/test-du-tippmann-a5-193 :
    http://www.facebook.com/plugins/comments_v1.php?xid=_post193&url=http%3A%2F%2Fwww.paintball-blog.fr%2Fle-materiel-de-paintball%2Flanceur-paintball%2Ftest-du-tippmann-a5-193&fb_comment_id=fbc_10150222786782958_18014777_10150262964622958

    Je n’arrive pas à comprendre pourquoi…
    De plus Facebook dans les stats m’indiquent qu’il n’y a aucun utilisateur actif alors que j’ai une petite vingtaine de commentaires…

    Si vous avez une idée du problème ?
    Merci :)

    • Harold Paris

      12 juillet 2011

      Répondre

      Bonjour Florent ! Et merci pour ton commentaire. J’ai été voir ta page. En regardant tes sources, il n’existe pas de référence à l’OpenGraph Facebook dans ton header, tu devrais peut-être commencer par là.

      Si tu regardes la dernière partie de l’Etape 3, j’indique une série d’options avancées à activer sur Facebook Comments, essaye d’appliquer ces options dans un premier temps.

      • Florent

        13 juillet 2011

        Répondre

        Bonjour Harold, merci de ta réponse rapide !
        J’avais essayé les différents paramètres, j’ai retenté dans le doute et malheureusement toujours le même problème :(

        J’ai essayé également le plugin d’Alex, qui a l’air plus simple à installer & paramètrer (moins d’options) et surtout la possibilité de gérer par article les métas !
        Sauf que rien ne remonte sur mes articles (pas de bouton like ni commentaires)… je vois avec lui pour comprendre.

        PS : je confirme qu’il faut bien désactiver le premier plugin avant d’installer le second, sous peine de crasher complètement le site !

        • Alex

          14 juillet 2011

          Répondre

          Ce ne serait pas un problème avec le header html ?
          IE ?
          Si les commentaires sont appelés en xfbml, alors il faut ajouter une valeur dans le header html

          Si ça peut aider.

          Sinon le cache de Facebook concernant les OpenGraph meta est très long, du coup même si on change/ajoute des metas, si facebook a déjà la page dans le graph, alors il va afficher les données qu’il détient et non celle de votre site.
          la solution c’est d’utiliser l’url linter de facebook.

          Ça permet de mettre à jour le cache d’une page en particulier.

          Le plugin que j’ai développé utilise ce système à chaque fois qu’on crée/met à jour un article.
          Par contre pour la home, il faut peut être passer par la méthode manuelle.

          • Alex

            14 juillet 2011

            j’ai oublié la ligne à ajouter pour que xfbml fonctionne sur ie:

    • Harold Paris

      17 juillet 2011

      Répondre

      C’est une excellente question ! A laquelle je vais répondre dès demain à l’occasion d’un article spécial sur ce sujet ! :) Je rajouterai le lien sur cette page ! Merci pour votre commentaire en tous cas !

  3. Alex

    9 septembre 2011

    Répondre

    Hello Harold,

    Ca y est… je commence à voir le bout du tunel…
    Tu peux aller sur la page du plugin Facebook AWD sur mon site.(ahwebdev.fr)

    tu verras que les commentaires de facebook sont affichés en dur (html)
    dans les commentaires WP.
    Biensur ce n’est totalement au point, j’ai du mal a bien les mélanger par date. (ce n’est qu’une question de temps.)

    J’ai aussi ajouté un système de cache pour éviter de charger les commentaires depuis facebook a chaque chargement de page (toutes les heures.)

    Le plugin sera bientôt dispo et vendu 20€ directement sur mon site.

  4. Harold Paris

    11 septembre 2011

    Répondre

    Excellent Alex ! C’est vraiment du bon boulot ! N’hésite pas à nous tenir au courant quand le plugin est en vente. :)

  5. Tony

    7 octobre 2011

    Répondre

    Bonjour,
    Merci pour ce tuto.
    J’ai un problème qui se pose. J’aimerai lier les com de wordpress à ceux de FB. Car quand quelqu’un commente je me rend compte que la petite bulle de commentaire ne compte pas le com.

  6. Ben

    29 novembre 2011

    Répondre

    J’ai suivi votre tuto et mes commentaires des ma page facebook ne s’affiche pas pouvez vous m’aider ?

    • Harold Paris

      29 novembre 2011

      Répondre

      Bonsoir Ben ! Facebook Comments ne fonctionne pas exactement de cette manière. En effet, lorsque vous utilisez les commentaires Facebook, ceux-ci restent sur votre page internet mais apparaissent aussi sur le mur des personnes qui ont commenté (si ils ont coché l’option) et donc dans le flux d’actualité de leurs amis. C’est le coté viral qui est particulièrement utile avec Facebook Comments. Mais il n’y a pas de concordance exacte avec ce qui se passe ensuite sur Facebook. :) Ca reste un outil bien sympa, quand même… Même si personnellement, j’ai fait le choix de les retirer.

  7. Ben

    30 novembre 2011

    Répondre

    Merci d’avoir pris le temps de répondre, je viens de le retirer moi aussi.

  8. Denis Houtain

    28 mars 2013

    Répondre

    Merci pour ce tutoriel. Pour ma part, je cherches un plugin permettant de commenter en se connectant à son compte WordPress, Facebook ou Twitter. Le gros problème c’est que j’aimerai que les commentaires des personnes connectées via Facebook apparaissent sur leur mur ( comme facebook comments). Pourriez-vous m’aider ?

Trackbacks/Pingbacks

  1. Supprimer les Commentaires Facebook sur son Blog… et Mieux Dormir la Nuit. | HaroldParis.fr - [...] Lorsque j’ai démarré ce blog, il y a un peu plus de deux mois, j’avais pris la décision de …

Publier un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

TRIBELEADR - Agence webmarketing à Orléans