25 mai 2012

Ajouter Le Bouton J'aime Facebook à Blogger

Bouton Jaime Facebook
Ajouter le bouton J'aime Facebook (Facebook Like Button) à votre blogue afin de faire un peu de promotion de vos articles sur Facebook.
Le bouton J'aime vous permettra de savoir qui a apprécié vos articles, et laissera une trace discrète sur le mur de l'utilisateur.
Il est relativement intéressant car il peut être mis en place en quelques minutes à l'aide de quelques lignes de code.




Présentation Du Bouton

Standard + bouton 'Send'

Bouton avec compteur

Boîte avec compteur


Configuration Du Bouton

Type du bouton
Texte dans le bouton
Afficher le bouton 'Send'
Couleur du thème
Font
Alignement
Emplacement du bouton
Condition d'affichage
<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/en_US/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>

Ajouter le bouton j'aime à Blogger

1. Copiez le code ci-dessus. Connectez-vous à votre compte Blogger et allez à "Modèle" ► "Modifier le code HTML" et cochez la case "Développer des modèles de gadgets".

2. Rechercher <data:post.body/> et juste avant coller le code copié.

27 commentaires:

  1. merci de vos services vraiment c formidable thanks thanks

    RépondreSupprimer
  2. Bonjour Georgia,
    Le script est toujours actif (regardez le tableau "Présentation du bouton" ci-haut)
    Vérifiez que vous avez bien copier et placer le code dans le bon endroit.

    RépondreSupprimer
  3. Bonjour,

    Je vais tenter ma chance ici concernant ce fameux bouton "j'aime" de facebook. J'ai déjà passé des heures depuis des mois à chercher sur internet y compris sur facebook developper une solution, en vain...

    Il se fait que sur mes 4 blogs, lorsque je veux que les gens "aiment" juste un article, ça "aime" à chaque fois tout le blog.

    Donc j'ai réessayé avec la méthode proposée ci-dessus, pareil lorsque je clique sur le "j'aime" que j'avais placé en bas de chaque article, il "aime" tout le blog et non l'article en question.

    Quelqu'un aurait-il une solution à ce problème?

    RépondreSupprimer
  4. Non c'est bon, j'ai enfin résolu le problème!

    Pour résumer, je voulais pouvoir partager chaque article avec des boutons en bas des articles ET partager le site complet dans un widget HTML. Ce qui n'allait pas, c'était les balises OpenGraph Protocol. Ces balises, c'est bien mais à utiliser avec parcimonie!

    J'ai d'abord résolu le problème du partage des articles en supprimant la totalité des balises Meta OpenGraph Protocol que facebook recommande sur son site dans la partie Facebook developers et que j'avais ajouté à mon modèle (Petite précision, j'utilise les boutons "sharethis", je ne sais pas si les boutons de partage fournis par blogger fonctionnent par cette méthode)

    Ou mais après, c'était le bouton "j'aime" du widget HTML qui m'affichait du coup une vignette au hasard, le rendu sur facebook n'était donc pas très esthétique.

    J'ai donc remis juste une seule balise OpenGraph (og:image), celle qui définit la vignette par défaut qui s'affiche sur facebook.
    J'ai aussi mis une balise Meta normale description du site.

    Ce qui nous donne comme résultat pour le partage d'articles, le choix entre 2 vignettes, celle de l'article en question ou celle par défaut + url + la description du site.

    Et pour le bouton "j'aime" le site entier, il affiche uniquement la vignette par défaut définie par la balise OpenGraph. Pour ce faire, j'ai utilisé le code iframe du bouton "j'aime" dans le widget HTML fourni par facebook developers.

    Voilà, j'espère que ça pourra aider d'autres personnes parce qu'à travers mes nombreuses recherches, j'ai pu constater que je ne suis pas la seule à avoir ce problème de personnalisation de ce fameux bouton.

    RépondreSupprimer
  5. tu peux juste me dire comment tu peux eviter le lien confirmer quand on clique sur j'aime ?

    RépondreSupprimer
  6. Merci beaucoup! Petit cadeau: http://le-kaleidoscope.blogspot.com.es/2012/08/la-beaute-de-lirrationnel.html

    RépondreSupprimer
  7. J'AIME VOTRE BLOG VISITEZ AUSSI DANS MON WWW.VARIEDADES1.COM

    RépondreSupprimer
  8. Salut,
    le code que tu donnes apparaît 3 fois chez moi
    j'ai essayé sur les 3, sur le 1er ça fout tout en l'air, sur les 2 autres il se passe rien
    as-tu une solution
    francis-info.blogspot.com
    Merci

    RépondreSupprimer
  9. ton article est super maiis la page modele ne s'ouvre pas sous blogger! je n'arrive pas a y acceder!!! que faire?????
    mrci!!!!

    RépondreSupprimer
  10. Bonjour,
    J'ai essayé ce gadget MAIS "data:post.body/" n'existe pas dans mon modèle de Blogger ....
    Où mettre le code dans ce cas?
    Merci ....

    RépondreSupprimer
  11. Coucouuu question hors sujet mais aussi en rapport avec ! lol

    Sa fais 3h que je cherche un tutoriel pour savoir comment on met les bouton que tu as en haut à droite de la page dans ta "rubrique" partager !
    j'ai déjà les images mais je voudrais mettre le lien de mon Facebook, twitter, instagram etc ...

    Pourrais-tu m'aider stp ? Bis

    RépondreSupprimer
  12. Rien à faire, ça ne veut pas fonctionner chez moi :(
    www.nycyla.com

    RépondreSupprimer
  13. Merci beaucoup voici mon blog :http://recettes-astucieuses.blogspot.fr/

    RépondreSupprimer
  14. je dois etre stupide mais je ne trouve pas la case
    "Développer des modèles de gadgets".

    et je ne trouve pas non-plus le code


    quelqu un pourrait m' aider?


    RépondreSupprimer
  15. idem pour moi, pas de case "Développer des modèles de gadgets" ni le code...quelqu'un peut-il nous aider ? merci

    RépondreSupprimer
  16. la même chose je me perds après avoir cliquer " modifier le code HTLM" impossible de trouver la suite ..

    RépondreSupprimer
  17. Vous n'êtes pas les seuls à ne pas trouver cette case, je galère aussi...Quelqu'un peu nous répondre?

    RépondreSupprimer
  18. moi aussi je trouve pas la case "Développer des modèles de gadgets" quelqu'un à une solution?!!

    RépondreSupprimer
  19. Je n'ai pas cette case «développer des modèles de gadgets» non plus.

    RépondreSupprimer
  20. Je ne sais pas ce que je fais d'incorrect mais ça ne marche pas :/
    J'ai pourtant bien suivi vos étapes, collé le code après la ligne puisque je le veux à la fin de l'article mais ça ne marche pas :( pas non plus avant l'article d'ailleurs.
    Dommage !

    RépondreSupprimer
  21. Bonjour,
    Alors apparemment il faut aller dans : Mise en page, ajouter un gadget puis choisir le gadget :HTML/JavaScript ... Saisir le titre puis copier le code ...
    J'espère avoir aidé un peu ;-)

    RépondreSupprimer
  22. Rien ne marche non plus par ici, j'ai ajouté le code comme expliqué plus haut, et j'ai testé la méthode proposée le 28 février par "Quelque part en France" mais rien n'y fait...

    RépondreSupprimer