Customiser la barre de partage Blogger en choisissant les services que vous souhaitez proposer aux lecteurs.Choix de la taille, de l'ordre des boutons et du thème de couleurs.
Choix entre Facebook, Twitter, Envoi par mail, Orkut, StumbleUpon, LinkedIn, BlogThis, GooglePlus Share, HelloCoton, Pinterest et
Partage l'url canonique du message.
Présentation de la barre
Activer les boutons de partage
Configurer les boutons
Le code HTML de la barre
Où copier ce code ?
La mise en forme
Où copier la mise en forme ?
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 le message contient une image. L'image sélectionnée sera la première du message (taille originale).
- Bouton Facebook : Les données "titre", "image" et "description" sont extraites directement du message et non plus de l'OpenGraph ou des extraits enrichis. L'image sélectionnée sera la première contenue dans le message (taille originale).
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 barre officielle 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 "Messages du blog" |
Dans les paramètres des options des messages, cochez les boutons et sauvegardez.
Si les boutons par défauts ne s'affichent pas, lisez l'article : Dompter les options des messages.
Haut de page
Configurer les boutons
Sélectionnez d'abord les paramètres. Les codes ci-dessous s'adapteront en fonction de vos choix.Haut de page
Le code HTML de la barre
Changez l'ordre des boutons en déplaçant les codes colorés avec la souris (1 couleur = 1 bouton).
<b:includable id='shareButtons' var='post'>
<span class='post-share-buttons'>
<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'><data:post.dummyTag/></div></b:if>
- <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&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 + "&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 + "&target=twitter"' 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='"http://www.facebook.com/sharer.php?s=100&amp;p[url]=" + data:post.canonicalUrl + "&amp;p[images][0]=" + data:post.firstImageUrl + "&amp;p[title]=" + data:post.title + " | " + data:blog.title + "&amp;p[summary]=" + data:post.snippet' 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>
- <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' 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='"http://pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl + "&amp;media=" + data:post.firstImageUrl + "&amp;description=" + data:post.title + " | " + data:post.snippet' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Partager sur Pinterest'><span class='share-button-link-text'>Partager sur Pinterest</span></a></b:if>
- <a class='goog-inline-block share-button sb-stumble' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.canonicalUrl + "&title=" + data:post.title' expr:onclick='"window.open(this.href, \"_blank\", \"height=580,width=800\"); return false;"' 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='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.canonicalUrl + "&title=" + data:post.title' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Partager sur LinkedIn'><span class='share-button-link-text'>Partager sur LinkedIn</span></a>
- <b:if cond='data:blog.pageType != "static_page"'><a class='goog-inline-block share-button sb-hc' expr:href='"http://www.hellocoton.fr/vote?url=" + 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='"https://plus.google.com/share?url="+ data:post.canonicalUrl' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Partager sur GooglePlus'><span class='share-button-link-text'>Partager sur GooglePlus</span></a>
</span>
</b:includable>
Haut de page
Où copier ce code ?
| Tableau de bord ► Modèle ► Modifier le code HTML (gadgets développés) |
A partir de :
<b:includable id='shareButtons' var='post'>
Jusqu'à (inclus) :
</b:includable>
Haut de page
La mise en forme
/* Share Buttons Blogger Code
----------------------------------------------- */
.post-share-buttons {
margin-top: .5em;
vertical-align: middle;
font-size: 0px;
}
.share-button {
background: url(https://sites.google.com/site/bloggercodebc/home/share_buttons/share_buttons_BC.png) no-repeat left !important;
width: 20px !important;
height: 20px !important;
overflow: hidden !important;
margin-left: -1px !important;
position: relative !important;
}
a:hover.share-button {
text-decoration: none !important;
z-index: 1 !important;
}
.share-button-link-text {
text-align: left !important;
display: block !important;
text-indent: -9999px !important;
}
.dummy-container {
padding-left: 3px;
}
.sb-bc { background-position: -280px 0 !important; }
a:hover.sb-bc { background-position: -280px -20px !important; }
a:active.sb-bc { background-position: -280px -40px !important; }
.sb-email { background-position: 0 0 !important; }
a:hover.sb-email { background-position: 0 -20px !important; }
a:active.sb-email { background-position: 0 -40px !important; }
.sb-blog { background-position: -20px 0 !important; }
a:hover.sb-blog { background-position: -20px -20px !important; }
a:active.sb-blog { background-position: -20px -40px !important; }
.sb-twitter { background-position: -40px 0 !important; }
a:hover.sb-twitter { background-position: -40px -20px !important; }
a:active.sb-twitter { background-position: -40px -40px !important; }
.sb-facebook { background-position: -60px 0 !important; }
a:hover.sb-facebook { background-position: -60px -20px !important; }
a:active.sb-facebook { background-position: -60px -40px !important; }
.sb-orkut { background-position: -80px 0 !important; }
a:hover.sb-orkut { background-position: -80px -20px !important; }
a:active.sb-orkut { background-position: -80px -40px !important; }
.sb-pinterest { background-position: -100px 0 !important; }
a:hover.sb-pinterest { background-position: -100px -20px !important; }
a:active.sb-pinterest { background-position: -100px -40px !important; }
.sb-stumble { background-position: -120px 0 !important; }
a:hover.sb-stumble { background-position: -120px -20px !important; }
a:active.sb-stumble { background-position: -120px -40px !important; }
.sb-linkedin { background-position: -140px 0 !important; }
a:hover.sb-linkedin { background-position: -140px -20px !important; }
a:active.sb-linkedin { background-position: -140px -40px !important; }
.sb-hc { background-position: -160px 0 !important; }
a:hover.sb-hc { background-position: -160px -20px !important; }
a:active.sb-hc { background-position: -160px -40px !important; }
.sb-gplus { background-position: -180px 0 !important; }
a:hover.sb-gplus { background-position: -180px -20px !important; }
a:active.sb-gplus { background-position: -180px -40px !important; }
Haut de page
Où copier la mise en forme ?
| Tableau de bord ► Modèle ► Personnaliser ► Avancé ► Ajouter fichier CSS |
Haut de page
A propos des boutons
- La barre s'affichera sur tous les messages et pages statiques.
- Sur les pages index et archives, les boutons sont reliés à l'url canonique du message.
Le bouton Google Reader ne s'affiche pas si vous n'avez pas activé vos flux de messages.Le bouton Pinterest ne s'affiche pas sur les pages index et archives- Pinterest n'autorise pas le partage des messages ne contenant pas d'images ou de vidéos !
- Le bouton HelloCoton ne s'affiche pas sur les pages statiques.
< > " '