lundi 9 août 2010

Ajouter le bouton Like de facebook à son blog Blogger





Dans un article précédent, j'ai parlé de l'intégration du bouton "share" de facebook sur un blog de la plateforme Blogger. Un autre bouton facebook peut aussi être intégré sur les sites web et qui est le bouton Like (j'aime) qui ressemble à ceci :

Avant de commencer, il faut dire que certains ne recommandent pas l'utilisation de ce bouton. Je vous laisse le soin de lire l'article qui en parle!

Procédure:
Pour placer ce bouton sur votre blog Blogger, et afin qu'il soit visible pour chaque article, vous devez suivre les étapes suivantes:

Etape1: Allez dans Présentation> Modifier le code HTM et cochez la case "développer des modèles de gadgets"
Etape2 :

Cherchez le code suivant (vous pouvez faire une recherche avec CTRL+F): 
<div class='post-header-line-1'/>
et ajoutez juste après le code suivant :

<iframe allowtransparency="true" expr:src="&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=500&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;" frameborder="0" scrolling="no" style="border: medium none; height: 30px; overflow: hidden; width: 450px;"></iframe>

NB : Si vous avez déjà ajouté le bouton share, vous pouvez ajouter ce bouton juste après son code. Vous pouvez aussi le placer à la fin de vos articles c'est à dire après la ligne : <data:post.body> A vous de voir!


Etape3: Personnalisation du bouton


Certains attributs peuvent être personnalisés :
- standard : peut être changé par button_count pour utiliser le bouton avec compteur.
- true : pour afficher les images de profil des personnes qui ont aimé un article / false si vous voulez les cacher.
- like : peut être remplacé par recommend, ça affichera "Recommander" à la place de "J'aime".
- Vous pouvez aussi choisir la police du bouton en remplaçant arial par une autre valeur (pour plus d'informations)
- changer la couleur du bouton en remplaçant light par dark

Exemple de personnalisation :

Si vous voulez limiter l’affichage de ce bouton sur les pages de posts (le cacher de la page d’accueil et des pages des libellés), vous devez le placer comme suit:

<b:if cond='data:blog.pageType == "item"'> Placez le code ici </b:if>

Remarques : 


- Pour les gens qui ne sont pas sur Blogger, cette page pourra vous aider à ajouter le bouton à votre blog!
- Pour les utilisateurs de Wordpress, un plugin est déjà disponible.
- Vous pouvez aussi utiliser le widget de AddThis (pour ajouter le bouton like ainsi que d'autres boutons de partage)

Partagez cet article sur vos réseaux sociaux :



Recevez les nouveautés par email

25 commentaires:

jmjm a dit…

Bonsoir,
Merci pour cette info.
J'ai essayé ce code et le bouton n'apparait pas.
Je suis sous Blogger.
Où est l'astuce???
Merci.

Nawras a dit…

Tu peux voir du coté de AddThis si ce code ne marche pas chez toi ;)

Jean-Marc Pontier a dit…

Merci ;o)
J'ai essayé, ça marche, ça apparait sur chaque article, mais un clic "j'aime" ou "tweet" etc... ne publie que le blog et non l'article.
Ah lala! Je ne vais jamais y arriver ;o)

Nawras a dit…

Pourtant ça marche chez moi, j'ai essayé avec un article de ton blog et ça partage bien l'article!

Nawras a dit…

J'ai fait une petite modif dans le code, essaie le maintenant.. j'espère que ça marchera cette fois..

Jean-Marc Pontier a dit…

En es-tu sûre?
J'avais testé, mais seul le lien simple du blog était présenté dans mon cas.
J'en ai profité pour mettre un bouton Share dans la colonne de droite.
Mais c'est surtout le bouton "Recommander" de Facebook qui m'attire, et il m'échappe ;o)

Jean-Marc Pontier a dit…

Ah! Bonne surprise! Ca marche avec ton code modifié ;o)
C'était une erreur de ton code ou un ajustement à mon blog?

Nawras a dit…

En fait, j'avais copié le code de mon template, c'était pas compatible en effet, y avait juste une ligne à supprimer :)
Enfin, la bonne nouvelle que ça marche :D !!

Jean-Marc Pontier a dit…

Merci beaucoup!
Bonne soirée :o)

Nawras a dit…

t'es le bienvenue ;)

beautifulfreak@live.fr a dit…

salut,
j'ai connu ta )age hier et tes explications mon beaucoup aidées.tes explications sont claires pour une débutante comme moi,j'adore.
j'ai une autre question,je suis hebergée par blogger et j'aimerais que sur mon blog il figure une sorte de diaporama ou a la rigueur un gif et que lorsqu'on clique dessus il fasse lien et aille sur le site commercial d'une amie.est ce possible?
Pour l'instant j'ai une photo mais je voudrais un truc plus chouette.

merci beaucoup beaucoup
!!:)

Nawras a dit…

Salut :)
Pour ta question, il te faut comme tu as dit un gif animé, si tu l'as déjà, essaie de l'héberger sur blogger et remplace ta photo par le gif, laisse le lien vers le site de ton amie appliqué sur ta nouvelle photo.

Au cas où blogger ne l'affiche pas comme gif (c'est le pb que j'ai par ex, l'image devient non animée une fois sur le blog), alors il faudrait l'héberger ailleurs et l'ajouter après à ton blog en choisissant (lien), y a plusieurs sites d'hébergement d'images, voici qqs uns :
- http://www.casimages.com/
- http://imagik.fr/
- http://www.hostingpics.net/

Si tu veux créer toi même un gif, tu peux te référer à cette adresse

J'espère que ma réponse t'aidera :)

beautifulfreak@live.fr a dit…

merci pour ta rapidité!!!:)
j'essaye et te dis demain!!
merci merci!!!
tess

beautifulfreak@live.fr a dit…

PFIOU merci!!
jusque là tout allait bien,chez imagik c'estait pratique il me donnait direct l'url de ma photo mais maintenant c'est blogger qui veut pas de l'url de cette photo.elle dit qu'elle n'est pas valide.
e vais dans ajouter gadget,image puisque je veux un lien dessus.

les autres hébergeurs me donnent uniquement des codes html.

je comprends pas....
tu n'as pas eu mon autre message?c'etait pour te remercier...

Nawras a dit…

y a pas de koi ;)
montre moi le lien que t'a donné imagik !
j'ai pas testé les autres hébergeurs :-/ et oui y en a qui donnent des liens html et pas directement l'url vers le fichier !

beautifulfreak@live.fr a dit…

http://imagik.fr/view-rl/368501

ça c'est le lien de la page en taille réelle.(celui que j'aimerais en fait.)
sinon il me donne ça:(URL de la page)
http://imagik.fr/view/368501



et
BBCODE:
[url=http://imagik.fr/view/368501][img]http://imagik.fr/thumb/368501.jpeg[/img][/url][url=http://imagik.fr][size=9]imagik.fr[/size][/url]


le truc c'est truc c'est que je voudrais le mette dans le gadget "image" de blogger comme ça je peux faire faire un lien à mon gif en m^me temps...
Vraiment merci de ta gentillesse. :D

beautifulfreak@live.fr a dit…

je suis trop nule.j'y arrive pas.:((

Nawras a dit…

Gadget image, tu choisis depuis le web, tu mets : http://imagik.fr/uploads/368501
;)

Tess... a dit…

j'ai un peu honte de revenir à l'assaut mais t'avais qu'a pas être sympa!!!
maintenant c'est pour le flux rss de mon blog que je ne pige rien.je ne trouve pas les codes.
le blog c'est http://www.thebeautifulfreak.com/
je te remercierais jamais assez!
je vais voir dans les onglets d'aide blogger mais vraiment y'a qu'avec toi que je suis un peu...desolée pour le boulot que je te donne!:-/

Nawras a dit…

Tu veux faire quoi avec le flux de ton blog ??
L'adresse de ton flux est : http://feeds.feedburner.com/blogspot/RbbLj

pour l'utilisation de feedburner voilà un bon tuto :
http://www.leblogger.com/2010/11/newsletter-abonnement-email-feedburner.html

y a pas de quoi :)

Tess... a dit…

je voudrais copier le code dans l'outil de creation de modele (css)
en fait je ne comprends rien a ce que je raconte:)
je voudrais un truc comme tu as a ta droite en dessous de ton twitter pour qu'on puisse s'abonner a mes posts.
et sur hello coton on me demande mon flux pour que ça mette a jour automatiquement ma page...
je sèche.
:D
tu dois bien te marrer!!!

Nawras a dit…

Le bouton sous mon twitter, c'est juste une image cliquable qui mène vers le lien de mon flux RSS afin de permettre à mes visiteurs de s'y abonner.. l'url de mon flux est similaire à l'url que je t'ai donné !
Fais comme le truc de l'image, ajoute un gadget image (choisis une image de flux RSS) et ajoute lui le lien de ton flux : http://feeds.feedburner.com/blogspot/RbbLj

smsdamour a dit…

:X merciiii bcp
veux pouvais visité la mienne :http://msgdamour.blogspot.com

Yaam Solidarité a dit…

Super merci!!!
ça marche bien!!
Visitez notre blog!
http://yaamsolidarite.blogspot.fr/

Anonyme a dit…

Very Helpful :D
Thanks!!

Sélectionnez les signes à côté du smiley à insérer dans votre commentaire

:)) ;)) ;;) :X :(( =(( :-o :-* :| :)] :-t
b-( :-L :-/ o_O :D ;) :p :) :( 8-) ^^

Enregistrer un commentaire

Related Posts with Thumbnails