Le nouveau bouton J'aime de Facebook
Facebook vient de sortir un nouveau bouton de partage intitulé Like et Recommended.
En plus d'un nouveau compteur des Likes et recommendations, ce bouton peut afficher les images de profil de vos amis qui ont aimé un article !
Vous pouvez tester le bouton ici :
Sinon allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez <data:post.body/>.
Ajoutez le code du bouton J'aime de Facebook juste en dessous.
Qu'est ce vous pensez de ce nouveau bouton ? Allez vous l'utiliser dans votre blog ?
N'hésitez pas à en discuter via les commentaires ...
En plus d'un nouveau compteur des Likes et recommendations, ce bouton peut afficher les images de profil de vos amis qui ont aimé un article !
Vous pouvez tester le bouton ici :
Le code
Voici le code qu'il faut ajouter dans votre blog pour avoir le bouton J'aime de Facebook.<b:if cond='data:blog.pageType == "item"'><iframe allowtransparency="true" frameborder="0" scrolling="no" expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&width=500&action=like&font=arial&colorscheme=light"' style="border: medium none; height: 30px; overflow: hidden; width: 450px;"></iframe></b:if>Si vous avez déjà ajouté des boutons de partage, il suffit d'ajouter celui ci juste à coté.
Sinon allez dans "Mise en page", "Modifier le code HTML", cochez la case "Développer des modèles de gadgets", et recherchez <data:post.body/>.
Ajoutez le code du bouton J'aime de Facebook juste en dessous.
Personnalisation
J'ai coloré en bleu les parties du code que vous pouvez personnaliser, voici les indications pour le faire.standard
Vous pouvez remplacer standard par button_count pour utiliser le bouton avec compteur.true
Vous pouvez cacher ou afficher les images de profil des personnes qui ont aimé un article : true ou false500
pour changer la largeur du bouton, en px.like
Remplacer like par recommended pour changer le texte du bouton de J'aime à Recommander.arial
Vous pouvez aussi choisir la police du bouton en remplaçant arial par une de ces valeurs:- lucida+grande
- segoe+ui
- tahoma
- trebuchet+ms
- verdana
light
changer la couleur du bouton en remplaçant light par dark ou evilQu'est ce vous pensez de ce nouveau bouton ? Allez vous l'utiliser dans votre blog ?
N'hésitez pas à en discuter via les commentaires ...






Pas mal... Je l'ai essayé...
Petit truc qui fonctionne bien c'est le remplacement de la formule : data:post.url --► data:blog.url lorsque l'on place le code sur une autre partie de la page...
Par contre, très gros défaut, c'est la couleur... pas beaucoup le choix quand on a un fond gris...
Good job... :))
@NicTeam
Héhé Nicolas est de retour :D
Oui data:blog.url est à utiliser si on veut ajouter le widget dans la sidebar ou le footer et l'afficher dans la page d'accueil, des archives, libellés ...
Moi, j'ai galéré pour afficher le widget à l'intérieur de l'article et à la fin j'ai carrément utiliser son URL : http://www.leblogger.com/2010/04/nouveau-bouton-j-aime-facebook-blog.html
Je compte bien le rajouter :)
cool comme petit bouton !!
Mis a part te reste-t-il des invitation pour Tester Google Wave ? si oui j aimerai bien en obtenir une Je Vais t'en envoyer une en echange. En passant Super sympa ton Blog. Je lai decouvert parce que je cherchait Une invitation et je vais y revenir :)
Bonne Journee
Mon Email : Kazaktor(at)Gmail.com
@Sébas
Ok j'ai envoyé l'invitation Google Wave :)
@Soufiane
ho ho... Oui, toujours là, j'ai été pris par 2 autres projets :
L'amélioration du Blogger-tube --> http://coupecourt.blogspot.com/
Et un blog pour un jeu --> http://fwan-fr-blog.blogspot.com/
Je veux bien croire que tu as galéré... je pense qu'il n'existe pas de "références" toute faites pour l'intérieur des articles... Faut mettre directement dans le code source ou faire comme tu as fais...
:)
@NicTeam
La vache ! http://fwan-fr-blog.blogspot.com/ est trop bien, ça ressemble pas du tout à un blog !!!
Je vais l'inclure dans un prochain BeauBlogger
J'ai systématiquement ce message d'erreur qui s'affiche : "Certains contenus de ce message ont été signalés comme abusifs par des utilisateurs de Facebook." Pourtant je ne pense pas avoir du contenu abusif sur mon site !
http://rock-a-strasbourg.blogspot.com/
@Soufiane
Celui-là, je dois avouer qu'il m'a donné des cheveux blancs tant que ce projet est si particulier dans sa conception... A part sous IE, il semble bien fonctionner...
Si ça t'intéresses, je t'envoie une invit pour que tu puisses analyser... Je crois que tu y trouveras des idées pour tes prochains articles... :)
Salut,
Le code n'est pas accepté et voici pourquoi :
«Votre modèle ne peut pas être analysé, car sa structure n'est pas conforme. Vérifiez que tous les éléments XML sont bien fermés.
Message d'erreur XML : Element type "iframe" must be followed by either attribute specifications, ">" or "/>".»
Peux-tu faire quelque chose ? Merci ! :)
J'ai trouvé ce qui clochait !
Dans mon cas et sur mon blogue, il suffit de supprimer la balise de fermeture /iframe par cette barre / et à la fin du code suivant :
iframe allowtransparency='true' frameborder='0' scrolling='no' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&width=500&action=like&font=arial&colorscheme=light"' style='border: medium none; height: 30px; overflow: hidden; width: 450px;'/>
@Djief
Vérifie que le bouton fonctionne bien, j'en suis pas sûr !
Blogger remplace automatiquement /iframe par un /
@NicTeam
Pourquoi il faut une invit ?
@Eric T. Lurick
Aucune idée !
je l’ai intégré sur mon site http://www.toupil.fr en page d’accueil depuis hier. reste à voir les éventuelles répercutions sur le traffic( je suis un peu perplexe …)
Le compteur n'affiche pas les bons chiffres !!!
soufiennnn !! n'a pa fonctinner chez moi com d'hab y'a tjrs d prblm dcs mn blog lool
@Soufiane
Bien sûr qu'il faut une invit... je te l'ai envoyé sur ton gmail... :)
Je te mettrai en admin pour que tu puisses consulter à ton aise... ;-)
bonjour.
j'ai fait un test d'ajout du bouton à ma page blogger, le bouton s'affiche et fonctionne normalement.
Seul petit hic, j'ai demandé à un ami de cliquer sur ce même bouton et son "j'aime" qui apparait bien sur sa page n'est pas comptabilisé.
Un solution ?
merci à vous
Oups, ça ne fonctionne pas pour tous les articles... Est-ce normal?
Salut Soufiane,
Dans mon cas, le bouton fonctionne bien, sauf l'image de profil qui ne veut pas s'afficher (je met "true" ou "false" finalement ?) et j'aurais aimé l'insérer ailleurs que sur les commentaires, en bas des articles... Merci !
Soufiane,
Pourquoi ton bouton ne veut pas apparaître sur ma page d'accueil et uniquement sur mes pages de commentaires ?
Salut Soufiane,
Y a-t-il moyen d'avoir un gadget qui donne les posts les plus like du blog ?
Merci
@Camille
Oui, j'ai déjà fait le tuto et je vais le publier demaine :-)
@Matt Raynaud
Il y a des bug dans le compte des "Likes" je ne pense pas qu'on puisse faire quelque chose !
comment je peut ajouter le code d'un script dans un commentaire , j'ai trouvé le script k'il l'ajouter pour ke ce boutton fonctionn com il faut com chez moi http://ochek-allayl.blogspot.com/ ; il faut ajouter un autre script mé kan je veu le partager là il mé di k'il n'accepte pa le cod div
:)
euh... c koi le bug, j'ai l'ompression que chez moica marche www.stroobia.comwww.stroobia.com
il doit effectivement y avoir un bug au niveau de la comptabilisation des likes car j'ai beau avoir corrompu quelques un de mes amis, le compteur reste bloqué à 1 :)
Bonjour,
moi je l'ai fait et ça ne s'affiche qu'apres avoir cliqué sur les commentaires, c'est embêtant j'aimerais l'avoir tout le temps, comme mon Partager et Retweeter qui sont tout le temps affichés. Y'a-t-il un moyen?
http://rose-orage.blogspot.com
Merci,
Solange
@Solange
Il faut supprimé le code en bleu foncé au début et à la fin du code :-)
Autre petite question (désolé...) mais la requête de Solange m'a fait penser à autre chose. Comment peut-on aussi ajouter ce bouton j'aime (et par la même, le code de mon bloc addThis) aux pages statiques du blog ?
J'ai bien essayé de modifier la condition de la première balise en bleu mais ce fut plus un échec qu'autre chose :)
Merci à vous.
@Matt Raynaud
Oui c'est vrai, j'avais oublié ce point.
La condition que j'ai ajouté va afficher le bouton si et seulement si on se trouve dans un article.
Le plus simple et d'ajouter une deuxième condition pour l'afficher aussi dans une Page.
J'ai modifié le code et maintenant le bouton va aussi s'afficher dans les Pages Blogger.
Merci pour le commentaire ...
Ça y est ! Widget ajouté! Par contre c vrai que le compteur ne fonctionne pas... Notre grand Rice a nous peut-il nous aider?!?
Encore merci grand Rice!
pour mon premier blog elle fonctionne correctement mé pour e deusieme elle s'affiche a la fin d'article et pas sous le titre d'article directement ; Soufien svp comment je peu la transferer
soufiane > malheureusement, j'ai l'impression que le doublement de la condition (item puis static page) ne fonctionne pas. Je viens d'essayer avec la seule condition "item", ça fonctionne. Idem avec la seule condition "static_page". En revanche, dès que je mets les deux conditions à la suite, rien ne s'affiche sur mes pages.
n'y a t'il pas possibilité de mettre ces deux conditions au sein d'une seule et même balise b:if avec un opérateur logique de type ou ? Je testerai bien mais ne sachant pas quel est ce langage utilisé par blogger, je ne sais comment m'y prendre !
encore merci
@Matt Raynaud
D'accord je testerais "!= main" avant de publier une màj
@Matt Raynaud
Je ne peux pas utiliser Blogger en ce moment, tu peux essayer cette condition :
<b:if cond='data:blog.pageType != "index"'>
Qui normalement devrait afficher le bouton dans les pages autres que la page d'accueil (archives et libellés... ?)
(il faut bien sûr supprimer le dernier </b:if> )
4 cmtr sans reponse b-
ok Soufien pa grv j'aller chercher encore
bingo Soufiane, ça fonctionne tip-top sur les messages (item) et pages fixes (page_static) !
Pas encore pu tester dans les archives ou libellés étant donné que je mets tout ça en place avant de réellement lancer mon blog.
Encore merci pour ton aide !
Coucou , bon ca marchait pas chez moi mais j'ai resolu le probleme en googlant et maintenant ca marche. Donc j'ai le même bouton que toi sur tout mes posts.
Par contre ce que je voudrais c'est le bouton comme sur la page facebook developper avec le petit machin pour poster un commentaire sur facebook directement lorsqu'on clique sur j'aime...
Comment faire.
C'est ici => http://developers.facebook.com/docs/reference/plugins/like
@Le blog de Letilor
Je ne vois pas où est ce qu'on peut laisser de commentaire dans la page que tu as donné ??
Est ce que tu parles de ça : http://developers.facebook.com/docs/reference/plugins/comments
Ca n'affiche aucune photo de profil...
@mch
Il faut augmenter la hauteur du widget, par exemple remplacer height: 30px; par height: 80px;
Sur le widget dans cet article tu devrais voir les images de profil, est ce que c'est le cas ?
ça march pas sur mon blog!!!!
soufien svp , j'ai un pti problem avec la boutton j'aime , elle affiche le tite de blog sur fcbk et pas le titre de l'articlé aimé !!!! kesk je doi faire ???
Tiens ça ne marche plus sur mon blog. Bizarre :s Pourtant le code est tjrs là!
Comment le mettre à droite sur une page ?
Comment tu fais pour n'avoir que le chiffre a coté du j'aime ?
C'est super, moi qui croyais que ce genre de code devait être placé dans chaque article!
Par contre, si je peux abuser.. On peut retirer ou modifier cette phrase "Soyez le premier de vos amis bla bla..." ?
Re-Salut,
Je te donne du travail aujourd'hui ;)
J'ai bien insere le code, au bon endroit. Le bouton j'aime n'apparait pas :( !
as tu une idée?
Merci
Merci pour cette astuce
ça marche !!!!!
bonjour,
j'aurais aimé savoir comment tu as fait pour mettre tous les boutons qui se trouvent en haut à droite de ton blog (RSS, email, twitter...)
C'est un grand mystère pour moi et je trouve ca vraiment super.
Merci
quoi de9 le bouton ne marche plus
plus d'info sur http://developers.facebook.com/docs/guides/web#plugins
bonjour,
besoin de votre aide...Le bouton apparaît dans aperçu lorsque j'écris un nouveau message, mais pas sur mon blog...
Merci de m'aider mais expliquez bien, je ne suis pas douée !!! unefaimdeloup.blogspot.com
merci
C'est génial ce tuto, le seul soucis c'est que le bouton est à la suite du commentaire et non dessous!
Ca donne un truc comme ça:
"Bonne soirée J'aime [f] Soyez le premier de vos amis etc."
au lieu de
"Bonne soirée
J'aime [f] Soyez le premier de vos amis etc."
Je sens que c'est un truc tout con mais je suis vraiment un noob
Alors ca c'est un tuto bien expliqué. Merci pour le partage.
Je n'arrive pas a l'installer sur mon blog, pourriez-vous m'aidez svp ?
voici mon adresse stitch063@hotmail.com
Merci pour toute l'aide que tu apportes à la réalisation de mon blog, je t'en suis éternellement reconnaissant mon cher Soufiane !!!
Merci pour toute ces explications, j'ai quand même 2 questions:
1/Comment fait-on pour placer ce bouton en haut du message et pas en bas?
2/Comment fait-on pour insérer ce bouton à l'endroit qu'on désire dans un message?
J'ai essayé avec data:blog.url avec condition et sans condition mais je n'y arrive pas...
Dans mon cas, ça ne fonctionne absolument pas! Je fais exactement tel que décrit, ajoute le code après , et rien de rien n'apparait sur mon blogue... Ça peut être du à quoi???
super !
Par contre, ça ne s'affiche que sur la page de l'article.
Bonjour Soufiane !
Merci pour tes trucs de blogger. que ferait-on sans toi.. maintenant j´ai une question : je cherche à mettre le bouton J´aime qu´on trouve chez tumblr par exemple. juste j´aime, pas celui de FB. tu as la moindre idée de comment ca marche ? je suis chez blogspot, et je l´ai vu chez tumblr, mais aussi chez angel, lataiedoreiller.blogspot.com.
merci !
ho ho... Oui, toujours là, j'ai été pris par 2 autres projets :
L'amélioration du Blogger-tube --> http://coupecourt.blogspot.com/
Et un blog pour un jeu --> http://fwan-fr-blog.blogspot.com/
Salut je pourais avoir le template de :
http://coupecourt.blogspot.com/
je le kiff trop
Merci
Bonjour,
C'est super comme astuce et merci. Cependant, je voudrais savoir comment comment on le place en haut de l'article, par exemple juste en dessous de la première image ? Car suivant votre recommandation, le bouton se trouve tout en bas de l'article. Merci d'avance !
bonjour soufiance bravo et merci pour toutes tes judicieuses astuces!
j'ai essayer le code pour ce nouveau bouton mais ca ne marche pas, ca ne mets rien. J'ai l'impression qu'il ne marche pas parce que j'en ai installé un autre qui fonctionne parfaitement. Pourrais tu maider?
J'essais de mettre le même lien sur un simple "[f]" en typo bleu facebook Est-ce possible?
Bonjour
moi c'est fais! Maintenant comment savoir qui a cliquer sur Facebook???
Cela m'intéresse de savoir quel ami a cliquer.
Merci
Pour moi ca ne fonctionne pas non plus
Le bouton partager pas de problèmes
Mais rien à faire avec celui J'aime
merci à vous.
Hélas, mon commentaire vient rajouter un nouvel échec... Cela ne s'affiche pas. Peut-être faut-il détailler un peu plus ?
-----
Fr Argent - Gagner de l'argent avec Facebook
je vais l'essayer tout de suite
bonjour à tous
Voila je vous explique mon problème quand je clic sur j'aime je me rend compte que la photo qui s affiche dans mon facebook ne correspond pas à l article besoin de votre aide urgent
l'adresse de mon blog www.dj-contest.net
Merci d'avance pour votre réactiver
J'ai un petit problème ... ce bouton ne s'affiche que lorsqu'on clique sur un article , mais sur la page d'acceuil , il reste inexistant !
je viens de creer un blog sur blogger et jaimerais bien y ajouter un bouton "j'aime"
Mais je ne sais pas du tout comment ca marche
Quelqu'un peut il maider ?
J'ai le même problème que Aly, je n'arrive pas à l'avoir sur tous les articles de pages d'accueil mais uniquement en affichant article par article. Comment résoudre cela?
et sinon vous savez comment ne pas afficher le bouton j'aime si l'utilisateur aime déjà?
Question intéressante. (Y)
Nous sommes à présent deux "Anonyme" à nous la poser... ;-p
Je vais tester ça, merci bien pour cette astuce :)
bonjour,
pouvez vous m'expliquer comment mettre la serie des boutons que vous avez mis apres " Partager cet article : "
car j'ai tester plusieurs solution mais j'arrive pas et je desire juste une barre comme vous avec ces 6 boutons
merci
Bonjour Soufiane,
Je viens de me creer un blog; donc autant dire que je suis une vraie debutante. Ton blog m'est vital ;) Merci.
Je voudrais ajouter le bouton j'aime de Facebook, j'ai donc copie le code que tu as indique, au bon endroit...Mais rien n'apparait!! Cela met il du temps?!!
Help!!!!
merci,
pauline.
bonjour
jai copié le code mais sa marche pas .es ke vous pouvez m expliquer svp
J'ai le même problème: j'ai copié le code mais rien n'apparait dans les messages. Est-ce qu'il existe une touche J'aime pour l'ensemble du blog?