Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Integrer la plateforme de commentaire Facebook pour Blogger

Tuto pour intégrer 'Facebook Comments' pour Blogger

Difficulté: Moyen | Requis: Compte Facebook, blog sous Blogger.

1 - Tout d'abord, vous devez créer une application Facebook pour votre blog, pour cela, rendez-vous içi: https://developers.facebook.com/apps

2 - En haut à droite, cliquez sur 'Créer une application': voir photo ci-dessous:


3 - Après, vous allez être redirigé vers ce screen. Vous devriez choisir:


  • Un nom pour votre app, vous pouvez choisir n'importe quel nom. Par exemple, je l'ai appelé: "blogger pour les nuls comments"
  • Un namespace pour votre app, qui ne doit pas contenir de majiscules, ni d'espaces. Vous pouvez aussi choisir n'importe quel nom. Ex: bplncomments
  • Ne cliquez surtout pas sur la dernière option, car elle n'est pas nécessaire pour les commentaires!

4 - Vous devriez après passer un test captcha :

5 - Si votre compte Facebok est déjà confirmé, vous serez redirigé vers l'étape 6, sinon, vous devriez l'activer en passant le test de confirmation ( Vous mettez votre Num de tél, puis on vous envoie un code de confirmation).

6 - Vous serez redirigé vers la page ci-dessous:
  • En rouge votre App ID
  • En vert, vous devez ajouter 'Blogspot.com' , comme sur la photo. ( n'est pas nécessaire si vous avez un nom de domaine personnalisé)
  • En bleu, mettez l'adresse de votre blog.
  • Finalement cliquez sur 'Enregistre les modification'

Une fois enregisté, votre APP est prête!

7 - Maintenant, copiez votre APP ID (encadré en rouge en haut sur la photo), puis mettez le à la place de FB-ID ci dessous: 

<meta content="FACEBOOK-APP-ID" property="fb:app_id" />

Ca ressemblera à ça, dans mon cas :

<meta content=" 360128287371147 " property="fb:app_id" />

8 - Connectez vous à Blogger, puis choisissez modèle, puis cliquez sur 'modifier le code HTML': voir photo.

Cliquez ensuite sur 'Traîter', puis sur la touche sur votre clavier ' F3 ', ou bien ' Ctrl ' et ' F ', puis tapez <head>

9 - Une fois <head> localisée, copiez ci-dessous le code de l'étape 7 (Voire photo):


Ensuite en cliquez sur 'Enregistrer le modèle'

10 - Maintenant, on doit ajouter des codes, pour celà on procède de la même façon:
Blogger > Modèle > Modifier le code HTML > Traîter > et là en clique sur le bouton en haut ' Développer des modèles de gadgets '

11 - Cherchez le code ci-dessous grâce à F3 ou ctrl+F : 

<div class='post-footer-line post-footer-line-3'>

Voilà ce que ça donne en photo:


12 - Copiez le code ci-dessous, et ajoutez le immédiatement après le code que vous avez trouvé: 

<b:if cond='data:blog.pageType == "item"'> <div id="fb-root"></div> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> <fb:comments width='450' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/> </b:if>

Voilà ce que ça donne en image:


  • Notez que vous pouvez modifier la largeur de votre box de commentaire en changeant ' 450 ' en rouge par la largeur que vous voulez.
  • Vous pouvez également changer la langue dans les commentaires en remplacant 'fr_FR' en vert par 'en_US' pour l'anglais etc..
  • Si vous utilisez un thème sombre, remplacez 'light' en bleu par 'dark'.


13 - Maintenant cherchez grâce à Ctrl+f ou F3 le code suivant:  <html, puis ajoutez juste après le code suivant:

xmlns:fb="https://www.facebook.com/2008/fbml" 

Ca donnera le code comme ça: 

<html xmlns:fb="https://www.facebook.com/2008/fbml"

Voilà un screen de ce que ça donne:

Cliquez sur 'Enregistrer le modèle'

14 -  C'est bon! Maintenant, vous avez la plateforme de commentaires de Facebook sur votre blog ... ENJOY!

Une démo ? Voire ci dessous ;)
Aidez nous en partageant cet article sur vos réseaux sociaux ;)
Si vous avez un problème lors de l'installation, n'hésitez pas à laisser un commentaire :)

33 commentaires

  1. merci mon ami j'ai fait tout les expliquation mais j'ai pas les commentaires sur mon blogger je sais pas pk ???
    http://annimals-gallery.blogspot.com/2012/07/cheval.html
    1. Tu peux m'envoyer ta template, que j'examine d'ou vient l'erreur?
      dottk@hotmail.fr
  2. après quand j'ai clicker sur Rétablir les paramètres par défaut des modèles de gadgets , je ne trouve plus cette ligne
    1. Quelle ligne?
  3. Merci beaucoup pour ce tuto, c'est très simple car c'est très bien expliqué, j'espère vous retrouver pour d'autres tutos ;)
  4. c fé merciiiiiiii bcp
    1. Ravi que ça vous ai servi ;)
    2. hello je ne trouve pas le code de létape 11!! comment faire?
    3. Jooryn, tu me passes le lien de ta template je te dis la ligne à trouver
    4. Tu cherches div class='post-footer-line post-footer-line-3'
      Si tu ne le trouves pas essaye div class='post-footer-line post-footer-line-2'
  5. la ligne du template? je prend ça ou? sorry je suis novice! merci d'avance!
    1. Non, juste le lien vers ton blog ;-)
  6. ah oui je l'ai trouvé: http://www.blogger.com/blogger.g?blogID=4429287825160749946#templatehtml
    1. Non, ton blog, avec .blogspot.com à la fin
  7. heu mon blog: http://thehairlover.blogspot.com/
  8. ça ne marche pas...snif!! avec la seconde option, la 1ère étant introuvable
  9. ouffff après moult recherches j'ai trouvé!! merci! ;)
  10. merci
  11. Bonjour
    Merci pour le tuto. en fait j'ai fait exactement comme vous l'expliquer dans le tuto mais je n'arrive pas à avoir le bloc commentaire facebook. Cdlt
  12. Unknown
    Ce commentaire a été supprimé par l'auteur.
  13. ça fonctionne maintenant merci :D
  14. Bonjour, je suis bloqué à l'étape 6 ou vous indiquez "En vert, vous devez ajouter 'Blogspot.com' , comme sur la photo. ( n'est pas nécessaire si vous avez un nom de domaine personnalisé)"
    lorsque je met blogspot.com j'ai un paneau attention avec un message en anglais " This must be derived from Canvas URL, Secure Canvas URL, Site URL, Mobile Site URL, Page Tab URL ou Secure Page Tab URL. Check and correct the following domains: blogspot.com" ( je ne parle pas anglais et la traduction ne m'aide pas). Est ce que vous pouvez m'aider. Merci
    Aurélie
    1. pareil pr moi :/
  15. un grande Merci frère (y) j'ai bien suivi tout les instruction et j'ai réussi.
    et voila http://pdf-swf.com/
  16. . Merci beaucoup ! j'ai tout installé et la barre de commentaires fb fonctionne. Par contre je n'ai pas de notifications lorsqu'on poste un commentaire et ils n'apparaissent pas non plus sur mon compte blogger. (en gros lorsque quelqu'un poste un commentaire je n'en suis pas informé) c'est normal ?
  17. bonjour,
    voilà j'ai mis le premier code mais je trouve pas les autres lignes je suis bloquée à l'étape 11
  18. très intéressant merci! :-d
  19. Bonjour j'ai regardé les blogs cités et ça marche bien depuis mon ordi mais pas depuis l'iphone, or moi j'ai surtout besoin de cette bidouille pour que mes lecteurs puissent laisser leurs commentaires via facebook depuis les smarphones... c'est faisable ?
    merci beaucoup
    http://espritvientenjouant.blogspot.fr/
  20. j'ai réussi a le faire
    www.zawjayen.ml
  21. Merci pour votre tuto je cherche savoire s'il y a plugin blogger pour poster directement des photos sur un commentaire ?
  22. Bonjour, et pour un module sans modifier le html du thème s'il vous plaît ?
  23. Bonjour
    J'aurai bien besoin d'aide aussi
  24. Article exceptionnel ! Bonne continuation :)
    medespoir