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>
- Vous pouvez modifier la largeur de votre boite de commentaire en changeant ' 450 ' en rouge par la largeur que vous voulez.
- Vous pouvez aussi changer la langue dans les commentaires en remplacant 'fr_FR' en vert par 'en_US' pour l'anglais etc..
- pour un thème sombre, remplacez 'light' en bleu par 'dark'.
Voilà le résultat en image :
13 - Maintenant cherchez grâce à Ctrl+f ou F3 le code suivant : <html, puis ajoutez juste après le ce code :
xmlns:fb="https://www.facebook.com/2008/fbml"
Ca donnera : <html xmlns:fb="https://www.facebook.com/2008/fbml"
finalement 'Enregistrer le modèle'
14 - Et maintenat vous avez la plate forme des commentaires facebook sur votre blog :)
On 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 :)
