Archive Pages Design$type=blogging

Bouton J'aime de Facebook pour Blogger

Sur le même sujet:




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

Etape 1 : Ajouter la specification fb à votre template:

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.

COMMENTAIRES

BLOGGER : 8
Loading...
Nom

astuces Facebook feature gadget Google Menu news Pages Réseaux Sociaux slider automatique templates Traduction trafic tutoriel
false
ltr
item
Blogger Pour Les Nuls: Bouton J'aime de Facebook pour Blogger
Bouton J'aime de Facebook pour Blogger
http://4.bp.blogspot.com/-dKRrhwoZP7E/UMUmYh30ulI/AAAAAAAABsQ/EA0cZrgBhiQ/s200/j'aime.jpg
http://4.bp.blogspot.com/-dKRrhwoZP7E/UMUmYh30ulI/AAAAAAAABsQ/EA0cZrgBhiQ/s72-c/j'aime.jpg
Blogger Pour Les Nuls
http://blogger-pourlesnuls.blogspot.com/2012/12/bouton-jaime-de-facebook-pour-blogger.html
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/
http://blogger-pourlesnuls.blogspot.com/2012/12/bouton-jaime-de-facebook-pour-blogger.html
true
7261274087058654712
UTF-8
Aucun article trouvé VOIR TOUS Lire la suite Répondre Annuler la réponse Supprimer Par Accueil PAGES ARTICLES Voir tous RECOMMANDE POUR VOUS LIBELLE ARCHIVE SEARCH Aucun article ne répond aux critère de votre requête Back Home Dimanche Lundi Mardi Mercredi Jeudi Vendredi Samedi Dim Lun Mar Mer Jeu Ven Sam Janvier Février Mars Avril Mai Juin Juillet Août Septembre Octobre Novembre Décembre Jan Fév Mar Avr Mai Jun Jul Août Sep Oct Nov Déc maintenant il y a une minute Il y a $$1$$ minutes il y a une heure Il y a $$1$$ heures Hier Il y a $$1$$ jours Il y a $$1$$ semaines il y a plus que 5 semaines