Ce tutoriel vous aidera à intégrer le bouton j'aime de Facebook, dans votre blog, où vous voulez.
Ces quelques lignes de codes auront sûrement un impact positif sur le trafic de votre blog, et engagera mieux vos visiteurs.
Tutorial d'intégration du bouton J'aime à Blogger
Niveau : Facile
Connectez vous à votre blog, puis modèle, et cliquez sur ' modifier le code HTML '
Au début du code, ajoutez le code ci dessous tout près de ' <html ' . Voire photo ci dessous
xmlns:fb="https://www.facebook.com/2008/fbml"
Etape 2 : Maintenant, vous devez choisir ou mettre le bouton j'aime, vous avez 3 choix:
CHOIX 1:
Boutons de partage en haut de l'article (En dessous du titre):
On cherche alors grâce au bouton de clavier ' F3 ' , ou bien en appuyant simultanément sur 'Ctrl' et 'F', le code: ' <post-header-line-1> ' , et juste après on ajoute le code de l'étape prochaine. (Etape 3)
CHOIX 2:
Boutons de partage en bas de l'article (En dessous de l'article):
On cherche alors grâce au bouton de clavier ' F3 ' , ou bien en appuyant simultanément sur 'Ctrl' et 'F', le code: ' <data:post.body/> ' , et juste après on ajoute le code de l'étape prochaine. (Etape 3)
Etape 3 : Le code Facebook.
Après avoir effectué votre choix, il ne vous reste qu'à ajouter le code ci dessous (Après personnalisation, si vous voulez).
<div> <b:if cond='data:post.isFirstPost'> <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> </b:if> <fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like> </div>
Personnalisation du code:
J'ai colorié tout les variables modifiables, je vais les expliquer et par quoi les changer (avec la même couleur).
1 - Le code en rouge:
Le code en rouge désigne le type du bouton. Il en existe 3, à savoir:
- standard: Le type standard et basique, montre le nombre de gens qui on liké votre article, et apparaît une phrase : Soyez le premier de vos amis.
- Button_count : C'est une version plus minimaliste que la standard, du coup moins large, et ne fait pas apparaître la phrase, mais conserve le nombre de likes.
- Box_Count : Une version plus haute, et moins large de la button_count.
 |
| Différents types du bouton j'aime |
2 - Le code en jaune:
Cette variable prend 2 valeurs:
- true : Fait apparaître le bouton envoyer à côté du bouton j'aime.
- false : Enlève le bouton envoyer.
3 - Le code en vert:
Cette variable prend aussi 2 valeurs:
- true : Fait apparaître les visages des gens qui ont aimé votre article.
- false : Enlève les visages.
4 - Le code en bleu:
Qui désigne la police du verbe, et la hrase de ce bouton, vous pouvez la remplacer par:
arial | lucida grande | segoe ui | tahoma | trebuchet ms
5 - Le code en violet:
Désigne le verbe à apparaître dans le bouton:
- Like : Fait apparaître ' J'aime '
- Recommend : Fait apparaître le verbe ' Recommander '
6 - Le code en gris:
Il existe 2 couleur pour le bouton j'aime:
- light : Couleur standard à savoir le bleu ciel.
- dark: Couleur grise, optimisée pour les thèmes plus sombres.
Après avoir personnaliser votre code, ajouter le après votre choix de l'étape 2, sauvegardez, et c'est bon :-)
Si vous avez un problème quelque part, n'hésitez pas à le signaler.