Excessivement populaire

Facebook : Bouton partager / Share button

Par –
Blogger - Ajouter le bouton de partage Facebook

Le bouton Partager est un plugin du réseau social Facebook qui permet à vos visiteurs d'ajouter un message personnalisé aux liens de vos articles avant de les partager sur leur profil ou ailleurs sur cette plate-forme.
La version présentée sur cette page est spécialement conçue pour travailler dans l'éditeur XML de Blogger.
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".

En obtenant et en utilisant des plugins Facebook, vous acceptez les conditions d'utilisation de Facebook.

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...

Le bouton de partage de Facebook, dans l'entête des articles. Le bouton de partage de Facebook, complétant la barre de partage des articles. Le bouton de partage de Facebook, complétant la barre de partage des articles dans la version mobile personnalisée. Le bouton de partage de Facebook, dans un gadget HTML/JS ou dans un gadget AddToBlogger. Le bouton de partage de Facebook, dans un thème version 3.

Palette des boutons

Liens Petits Boutons Gros Boutons

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
Le code du bouton
<b:if cond='true'>
  <b:comment render='true'>
    Share button Facebook - Blogger Code - Ref.: https://bit.ly/bc-fbShare
  </b:comment>
  <b:with value='{ href: data:post.url, layout: "button_count" }' var='bc'>
    <div class='fb-share-button'>
      <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-size' expr:value='data:bc.size'/>
      <b:attr name='data-mobile_iframe' expr:value='data:bc.mobile_iframe'/>
    </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 :
  • Essential
  • 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 sera partagée. Obligatoire
layout La disposition du bouton. box_count
button_count
button
icon_link
icon
link		 icon_link Facultatif
mobile_iframe S’il est défini sur true, le bouton Partager ouvrira la boîte de dialogue Partager dans une iFrame (au lieu d’une fenêtre contextuelle) en haut de votre blog sur mobile. true
false		 false Facultatif
size La taille du bouton. small
large		 small Facultatif
Exemple
<b:with value='{ href: data:view.url, layout: "button", mobile_iframe: true, size: "large" }' var='bc'>

Dernière mise à jour

Licence

Ce contenu est protégé par la licence CC BY-NC-ND 4.0

🛈 Info

Il arrive fréquemment que nos contenus soient reproduits sans autorisation. Si vous avez trouvé cette fiche ailleurs, nous vous recommandons vivement de consulter Blogger Code PE pour bénéficier de la version originale, à jour et vérifiée.

Spotlight

YouTube : bouton abonnement / Subscribe button

Image
Discret, puissant, et 100 % personnalisable : voici le bouton d’abonnement YouTube taillé sur mesure pour Blogger. Ce plugin n’est pas qu’un simple bouton : c’est un véritable pont entre votre blog et votre audience, un appel à l’action fluide et intégré, sans iframe disgracieuse ni widget externe instable. Grâce à notre générateur, vous choisissez le format, le style, la chaîne, le type de page concerné et même l’auteur lié à l’affichage. Que vous gériez un blog personnel ou un collectif multi-auteurs, ce plugin s’adapte à votre structure comme un uniforme taillé sur mesure par Paco R. (c'est qui celui-là ? 😎). Et parce qu’on aime les options : HTML, XML Gadget V1, XML Gadget V2… tout est prévu. Plus besoin de bricoler à la main, d'ajouter des scripts tiers ou de se battre avec des balises capricieuses : le code généré est propre, optimisé, et prêt à l’embarquement.
En savoir plus ➤

Populaires cette semaine

L'Éditeur XML de Thème Blogger : Quand le BackEnd Rencontre le FrontEnd

Image
En 2007, une évolution importante est survenue dans l'univers de Blogger : l'éditeur XML de thème a fait son apparition, brouillant les lignes entre backEnd et frontEnd pour des millions de "Bloggeriens". Mais que signifie cette évolution pour les utilisateurs ? Et surtout, qu'en est-il de la propriété intellectuelle et de la licence de ces thèmes ? Plongeons dans les détails de ce curieux mélange technique tout en tenant compte des Conditions générales d'utilisation (CGU) de Google.
En savoir plus ➤