Excessivement populaire

Ajouter des boutons à la barre de partage Blogger

Gadget VersionLayouts Version
1
1
2
Modifier
Attention ! Les catégories Fonctionnalités et Développements vont bientôt faire l'objet d'une révision.
Actuellement, cette page peut contenir des liens morts et des informations obsolètes!

Ajouter des boutons à la barre de partage Blogger
Customiser la barre de partage Blogger en choisissant les services que vous souhaitez proposer à vos lecteurs.
Taille des boutons, thèmes de couleurs, restrictions 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'adresse canonique de l'article.
etc, etc, etc...

Présentation

Version mise à jour le 24/06/2014.

Le générateur ci-dessous a été conçu pour permettre d'ajouter/supprimer des services et de modifier l'apparence de la barre de partage Blogger.

De nouvelles options de personnalisation du design font leur apparition :

  • Taille des boutons, libre choix de 20 à 60px.
  • Choix des masques : Blogger Light, Blogger Dark et Simple.
  • Réglage couleurs/gris selon l'action.
  • Ombre de portée.

Une option de fixation de la barre a été également ajouté. Cette nouvelle option n'est disponible que pour les pages de types "Item" (articles) et "static_page" (pages autonomes).

  • Réglage de la position (haut, bas, gauche, droite)
  • Sens d'orientation de la barre : Vertical ou horizontal.



Activer les boutons de partage

Pour pouvoir ajouter ce développement à votre blog, vous devez d'abord activer l'option de la barre de partage 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 la barre de partage originale de Blogger ne s'affiche pas, lisez l'article : Dompter les options des articles.



Personnaliser

Modifiez les paramètres dans ce tableau en fonction de vos envies et recopiez le fichier CSS et le code HTML aux endroits mentionnés ci-dessous.


Choix des boutons
Renommer les infobulles
Mail
Blogger
Twitter
Facebook
LinkedIn
Pinterest
Google+
StumbleUpon
Hellocoton
Google +1 Bouton +1 seul
Apparence
Thème
Teinte boutons
Teinte boutons survolés
Teinte boutons actifs
Taille 20px
Ombre de portée ?
Fixation ?
Affichage du module ?

Le fichier CSS
/* Barre de partage Blogger
   Ref.: http://goo.gl/aZTFm5 */

.share-bar {
  margin-top: .5em;
  vertical-align: bottom;
  display: inline-block;
  font-size: 0px;
  line-height: 0px !important;
}

.share-button {
  background: url(https://sites.google.com/site/bloggercodebc/home/share_buttons/share_buttons_BC_light.png) no-repeat left !important;
  background-size: auto 120px !important;
  width: 20px !important;
  height: 20px !important;
  overflow: hidden !important;
  margin-left: -1px !important;
  position: relative !important;
}

.share-button-link-text {
  text-align: left !important;
}

.post-share-buttons .dummy-container {
  padding-left: 5px;
  vertical-align: bottom;
  font-size: 0px;
  line-height: 0px;
}

.sb-email { background-position: 0 0 !important; }
a:hover.sb-email { background-position: 0 -60px !important; }
a:active.sb-email { background-position: 0 -100px !important; }
.sb-blog { background-position: -20px 0 !important; }
a:hover.sb-blog { background-position: -20px -60px !important; }
a:active.sb-blog { background-position: -20px -100px !important; }
.sb-twitter { background-position: -40px 0 !important; }
a:hover.sb-twitter { background-position: -40px -60px !important; }
a:active.sb-twitter { background-position: -40px -100px !important; }
.sb-facebook { background-position: -60px 0 !important; }
a:hover.sb-facebook { background-position: -60px -60px !important; }
a:active.sb-facebook { background-position: -60px -100px !important; }
.share-bar .sb-orkut { display: none; }
.share-bar .sb-linkedin { display: none; }
.sb-pinterest { background-position: -120px 0 !important; }
a:hover.sb-pinterest { background-position: -120px -60px !important; }
a:active.sb-pinterest { background-position: -120px -100px !important; }
.share-bar .sb-gplus { display: none; }
.share-bar .sb-stumble { display: none; }
.share-bar .sb-hc { display: none; }
Où recopier ce fichier CSS ?

Le fichier CSS doit être ajouté via le concepteur de modèles :


  • Tableau de bord
  • Modèle
  • Personnaliser
  • Avancé
  • Ajouter le fichier CSS


Le code HTML
<b:includable id='shareButtons' var='post'>
<!-- Barre de partage sociale Blogger.
     Ref. : http://goo.gl/aZTFm5 -->
  <div expr:class='"share-bar " + data:blog.pageType + "-bar"'>
<span class='share-button-link-text'><a href='http://bloggercode-blogconnexion.blogspot.com/2012/03/ajouter-des-boutons-la-barre-de-partage.html' target='_blank'>Fourni par Blogger Code</a></span><b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&amp;target=email"' 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 + "&amp;target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' 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 + "&amp;target=twitter"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' 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='data:post.sharePostUrl + "&amp;target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' title='Partager sur Facebook' target='_blank'><span class='share-button-link-text'>Partager sur Facebook</span></a></b:if><b:if cond='data:post.firstImageUrl'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&amp;target=pinterest"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Épingler sur Pinterest'><span class='share-button-link-text'>Épingler sur Pinterest</span></a></b:if>
  </div>
<b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><div class='g-plusone' expr:data-href='data:post.url.canonical' data-annotation='bubble' data-size='medium' data-align='left' data-recommendations='true' /></div></b:if>
</b:includable>
Où recopier le code HTML ?

  • Tableau de bord
  • Modèle
  • Modifier le code HTML
  • Rechercher Gadget Blog1

Déployez (►) le gadget Blog1 :


<b:widget id='Blog1' locked='true' title='Articles du blog' type='Blog'></b:widget>

Déployez (►) l'inclusion shareButtons :


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

Remplacez toute l'inclusion shareButtons.

Visualiser la dernière version du code complet de l'inclusion originale.

Posts les plus consultés de ce blog

Les types de données [introduction]

Facebook : Bouton partager [Share button]