2014/03/16

Comment intégrer la boite de commentaire Facebook pour Blogger

1 - Premièrement créer une application Facebook pour votre blog, pour cela, voilà le lien : https://developers.facebook.com/apps.

2 - En haut à droite, cliquez sur 'Créer une application' en vert.

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

Un nom pour votre app "Display name", vous pouvez choisir n'importe quel nom. Par exemple, je l'ai appelé: "saoud art comments".
Un "namespace" pour votre application, sans majiscules et sans d'espaces. Par exemple : "saoudac".
La dernière n'est pas nécessaire pour les commentaires.

4 - L'étape suivante c'est le 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 mettre votre numéro de tél, puis Fb vous envoie un code de confirmation).

Après cliquer sur Paramètres :

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'

Pour ajouter l'adresse de votre blog cliquer sur "Site Web" dans la " sélection des plates formes".

Une fois app est enregistrée, votre application de commentaires facebook 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=" 599502276808553 " property="fb:app_id" />

8 - Connecter à Blogger, puis choisissez modèle, puis cliquez sur 'modifier le code HTML'.

Puis dans le code HTML chercher la balise <head>

9 - Copiez ci-dessous le code de l'étape 7 <meta content=" 599502276808553 " property="fb:app_id" /> après <head> comme la photo ci dessous :

Après 'Enregistrer le modèle'

10 - D'abord, on doit ajouter des codes, pour celà on procède de la même façon:

Blogger > Modèle > Modifier le code HTML > ' Développer des modèles de gadgets ' (Par défaut)

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