Tuto pour intégrer 'Facebook Comments' pour Blogger
Difficulté: Moyen | Requis: Compte Facebook, blog sous Blogger.
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 :)
Articles
