Réseaux sociaux Packs Ajouter des boutons à la barre de partage Blogger

Ajouter des boutons à la barre de partage Blogger

Ajouter des boutons à la barre de partage Blogger
Ajouter des boutons à la barre de partage Blogger Customiser la barre de partage Blogger en choisissant les services que vous souhaitez proposer aux lecteurs.
Choix de la taille, thèmes de couleurs, conditions d'affichage, etc.
Boutons Facebook, Twitter, Envoi par mail, Orkut, StumbleUpon, LinkedIn, BlogThis, Google+ Share, HelloCoton, Pinterest et Google +1.
Tous les boutons partagent l'url canonique de l'article.
Update 29/03/2013 - Les corrections apportées :
  • Bouton Google Reader : Le service prenant fin le 1er juillet 2013, le bouton a été retiré de cette barre.
  • Bouton Pinterest : Ne s'affiche que si l'article contient une image. L'image sélectionnée sera la première de l'article (taille originale).
  • Bouton Facebook : Les données "titre", "image" et "description" sont extraites directement de l'article et non plus de l'OpenGraph ou des extraits enrichis. L'image sélectionnée sera la première contenue dans l'article (taille originale).

Update 23/07/2013 - Les corrections apportées :
  • Bouton Google +1 : Activation/désactivation + personnalisation de l'annotation.
  • Fichier CSS externe.
  • Possibilité de paramétrer des conditions d'affichage selon le type de la page.


Présentation de la barre

Petits boutons grisés
Petits boutons colorés
Grands boutons grisés
Grands boutons colorés


Haut de page


Activer les boutons de partage

Ce développement customise la petite barre des boutons de partage de Blogger.
L'activation de la fonctionnalité s'effectue via le tableau de bord.

  • Tableau de bord
  • Mise en page
  • Modifier "Articles du blog"

Dans les paramètres des options des articles, cochez les boutons et sauvegardez.

Si les boutons par défauts ne s'affichent pas, lisez l'article : Dompter les options des articles.


Ajouter des boutons à la barre de partage Blogger


Haut de page


Configurer les boutons

Sélectionnez d'abord les paramètres. Les codes ci-dessous s'adapteront en fonction de vos choix.

Fichier CSS
Recopiez ce fichier CSS dans le code HTML du modèle, juste avant la balise </head>.
<link href='https://sites.google.com/site/bloggercodebc/home/share_buttons/sharebar.css' rel='stylesheet' type='text/css'/>

Général
Taille et couleur
Condition d'affichage

Boutons Activer / Désactiver / Renommer
Email Renommer
BlogThis ! Renommer
Twitter Renommer
Facebook Renommer
Orkut Renommer
Pinterest Renommer
StumbleUpon Renommer
LinkedIn Renommer
HelloCoton Renommer
Google+ Share Renommer
Google+ PlusOne Annotation


<b:includable id='shareButtons' var='post'>
<span class='bt1'>
  <span class='post-share-buttons'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' title='Envoyer par email' target='_blank'><span class='share-button-link-text'>Envoyer par email</span></a></b:if> <b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' title='BlogThis !' target='_blank'><span class='share-button-link-text'>BlogThis !</span></a></b:if> <b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' title='Partager sur Twitter' target='_blank'><span class='share-button-link-text'>Partager sur Twitter</span></a></b:if> <b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?s=100&amp;amp;p[url]=&quot; + data:post.canonicalUrl + &quot;&amp;amp;p[images][0]=&quot; + data:post.firstImageUrl + &quot;&amp;amp;p[title]=&quot; + data:post.title + &quot; | &quot; + data:blog.title + &quot;&amp;amp;p[summary]=&quot; + data:post.snippet' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Partager sur Facebook' target='_blank'><span class='share-button-link-text'>Partager sur Facebook</span></a></b:if> <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' title='Partager sur Orkut' target='_blank'><span class='share-button-link-text'>Partager sur Orkut</span></a> <b:if cond='data:post.firstImageUrl'><a class='goog-inline-block share-button sb-pinterest' expr:href='&quot;http://pinterest.com/pin/create/bookmarklet/?url=&quot; + data:post.canonicalUrl + &quot;&amp;amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;amp;description=&quot; + data:post.title + &quot; | &quot; + data:post.snippet' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Épingler sur Pinterest'><span class='share-button-link-text'>Épingler sur Pinterest</span></a></b:if> <a class='goog-inline-block share-button sb-stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=580,width=800\&quot;); return false;&quot;' target='_blank' title='Partager sur StumbleUpon'><span class='share-button-link-text'>Partager sur StumbleUpon</span></a> <a class='goog-inline-block share-button sb-linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.canonicalUrl + &quot;&amp;title=&quot; + data:post.title' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Partager sur LinkedIn'><span class='share-button-link-text'>Partager sur LinkedIn</span></a> <b:if cond='data:blog.pageType != &quot;static_page&quot;'><a class='goog-inline-block share-button sb-hc' expr:href='&quot;http://www.hellocoton.fr/vote?url=&quot; + data:post.canonicalUrl' target='_blank' title='Voter pour cette page sur HelloCoton'><span class='share-button-link-text'>Voter pour cette page sur HelloCoton</span></a></b:if> <a class='goog-inline-block share-button sb-gplus' expr:href='&quot;https://plus.google.com/share?url=&quot;+ data:post.canonicalUrl' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target='_blank' title='Partager sur Google+'><span class='share-button-link-text'>Partager sur Google+</span></a> <b:if cond='data:top.showDummy'><a class='goog-inline-block share-button sb-bc' href='http://bloggercode-blogconnexion.blogspot.com/2012/03/ajouter-des-boutons-la-barre-de-partage.html' target='_blank' title='En savoir plus'><span class='share-button-link-text'>En savoir plus</span></a><div class='goog-inline-block dummy-container'><div class='g-plusone' expr:data-href='data:post.canonicalUrl' data-annotation='inline' data-size='medium' data-align='left' data-recommendations='true' /></div></b:if>
  </span>
</span>
</b:includable>


Où copier ce code ?
  • Tableau de bord
  • Modèle
  • Modifier le code HTML
  • Gadget Blog1


Déployez le gadget blog
<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget>


Remplacez l'inclusion shareButtons
<b:includable id='shareButtons' var='post'></b:includable>


Haut de page


A propos des boutons

  • Sur les pages index et archives, les boutons sont reliés à l'url canonique de l'article.
  • Le bouton Pinterest apparaîtra uniquement sur les articles contenant des images !
  • Le bouton HelloCoton ne s'affiche pas sur les pages statiques.


Haut de page


Dans le même dossier



Haut de page


Les discussions Blogger Google+ Facebook
Les publications populaires de la semaine
Plan du blog
Les forums
Liens de la page
URL
HTML
BB Code
Licence CC BY-NC-SA 3.0
Droits de propriété intellectuelle
Cette page intitulée « Ajouter des boutons à la barre de partage Blogger » issue de Blogger Code (http://bloggercode-blogconnexion.blogspot.com/) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, remixer, arranger, et adapter le contenu de cette page à des fins non commerciales dans les conditions fixées par la licence, tant que le code ci-dessous est intégré dans la copie.