Excessivement populaire

Facebook : Bouton J'aime [Like button]

Gadget TypeGadget VersionLayouts Version
Blog
FeaturedPost
Global
HTML
PopularPosts
1
2
1
2
3
Modifier
Nous vous rappelons que lorsque vous accédez à ce blog, vous signez automatiquement un accord avec Blogger Code.
Consultez les CGU.


Blogger - Ajouter le bouton j'aime de Facebook
Le bouton J'aime est un plugin du réseau social Facebook qui permet à vos visiteurs de recommander du contenu.
La version présentée sur cette page est spécialement conçue pour travailler dans l'éditeur XML de Blogger et nulle part ailleurs !
Le bouton peut être relié aux articles des gadgets Blog, PopularPosts (articles populaires), FeaturedPost (Article en vedette) ou encore à la page courante dans un gadget "AddToBlogger".


Présentation du bouton

Le code proposé ci-dessous répond aux exigences des thèmes Blogger (Layouts Version 1 2 3) et au standard HTML5. Il propose diverses solutions pour intégrer le bouton sur un blog : Dans les options des articles, dans la version mobile personnalisée, dans un gadget AddToBlogger, etc...



Palette des boutons

Quelques exemples de combinaisons.


Générer un bouton

Configurez les options dans ce tableau et suivez les instructions d'installation.

Paramètres Blogger
Version du thème
Emplacement du bouton
Affichage du bouton ?
Apparence
Format
Largeur 450px ?
Action

Le code du bouton
<b:if cond='true'>
  <b:comment render='true'>
    Like button Facebook - Blogger Code - Ref.: https://bit.ly/bc-fbLike
  </b:comment>
  <b:with value='{ href: data:post.url, layout: "standard", width: 450, action: "like" }' var='bc'>
    <div class='fb-like'>
      <b:attr name='data-href' expr:value='data:bc.href.canonical ?: data:bc.href'/>
      <b:attr name='data-layout' expr:value='data:bc.layout'/>
      <b:attr name='data-action' expr:value='data:bc.action'/>
      <b:attr name='data-size' expr:value='data:bc.size'/>
      <b:attr name='data-colorscheme' expr:value='data:bc.colorscheme'/>
      <b:attr name='data-show-faces' expr:value='data:bc.show-faces'/>
      <b:attr name='data-share' expr:value='data:bc.share'/>
      <b:attr name='data-width' expr:value='data:bc.width'/>
    </div>
  </b:with>
</b:if>
Compatibilité
Ce code est conçu pour travailler dans le modèle de gadgets Version 2.
Les thèmes officiels compatibles avec vos choix sont :
  • Contempo
  • Emporio
  • Notable
  • Soho

Où recopier ce code ?
Le bouton est associé aux articles du gadget Blog. Choisissez l'un de ces emplacements :

Et enfin, pour terminer, vous devez équiper votre blog du script Facebook JS SDK.
Installer le script

Références

Pour personnaliser manuellement le bouton, vous devez modifier l'objet situé dans la 1ère balise <b:with>.

Paramètre Description Valeurs Valeur par défaut
href L’URL absolue de la page qui recevra la mention J’aime. Obligatoire
layout La disposition du bouton. standard
button_count
button
box_count
standard Facultatif
action Le verbe à afficher sur le bouton. like
recommend
like Facultatif
share Indique si un bouton de partage doit être ajouté à côté du bouton J’aime. true
false
false Facultatif
show-faces Indique si les photos de profil doivent être affichées sous le bouton (disposition standard uniquement). true
false
false Facultatif
size La taille du bouton. small
large
small Facultatif
width La largeur du plugin (disposition standard uniquement). 450 Facultatif
colorscheme Le jeu de couleurs utilisé par le plugin pour tout texte autre que le bouton lui-même. light
dark
light Facultatif
Exemple
<b:with value='{ href: data:view.url, layout: "button_count", share: true, size: "large" }' var='bc'>
  


Les autres plugins Facebook

Posts les plus consultés de ce blog

Les thèmes Blogger [introduction]

Facebook : Bouton partager [Share button]