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 :)

34 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

    RépondreSupprimer
    Réponses
    1. Tu peux m'envoyer ta template, que j'examine d'ou vient l'erreur?
      dottk@hotmail.fr

      Supprimer
  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

    RépondreSupprimer
  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 ;)

    RépondreSupprimer
  4. Réponses
    1. Ravi que ça vous ai servi ;)

      Supprimer
    2. hello je ne trouve pas le code de létape 11!! comment faire?

      Supprimer
    3. Jooryn, tu me passes le lien de ta template je te dis la ligne à trouver

      Supprimer
    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'

      Supprimer
  5. la ligne du template? je prend ça ou? sorry je suis novice! merci d'avance!

    RépondreSupprimer
  6. ah oui je l'ai trouvé: http://www.blogger.com/blogger.g?blogID=4429287825160749946#templatehtml

    RépondreSupprimer
  7. heu mon blog: http://thehairlover.blogspot.com/

    RépondreSupprimer
  8. ça ne marche pas...snif!! avec la seconde option, la 1ère étant introuvable

    RépondreSupprimer
  9. ouffff après moult recherches j'ai trouvé!! merci! ;)

    RépondreSupprimer
  10. 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

    RépondreSupprimer
  11. Ce commentaire a été supprimé par l'auteur.

    RépondreSupprimer
  12. ça fonctionne maintenant merci :D

    RépondreSupprimer
  13. 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

    RépondreSupprimer
  14. un grande Merci frère (y) j'ai bien suivi tout les instruction et j'ai réussi.
    et voila http://pdf-swf.com/

    RépondreSupprimer
  15. . 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 ?

    RépondreSupprimer
  16. bonjour,
    voilà j'ai mis le premier code mais je trouve pas les autres lignes je suis bloquée à l'étape 11

    RépondreSupprimer
  17. 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/

    RépondreSupprimer
  18. Bonjour, à tous j'offre et partage des codes Free Wifi Code Orange et SFR chaque semaine pour vous connecté a internet dans toutes la france

    Mon site de partage ▄︻̷̿┻̿═━一 http://code-freewifi.com/


    code freewifi gratuit 2015

    RépondreSupprimer
  19. Merci pour votre tuto je cherche savoire s'il y a plugin blogger pour poster directement des photos sur un commentaire ?

    RépondreSupprimer
  20. Bonjour, et pour un module sans modifier le html du thème s'il vous plaît ?

    RépondreSupprimer
  21. Article exceptionnel ! Bonne continuation :)
    medespoir

    RépondreSupprimer

Enregistrer un commentaire