Integrer la plateforme de commentaire Facebook pour Blogger ~ Blogger Geek

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 :

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 :

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

Blogger Geek