Installer les boutons de partage dans Blogger (extensions pratiques et ergonomiques)

Installer les boutons de partage sociaux dans Blogger

Afin d’encourager les visiteurs à partager vos articles sur les différentes plateformes de médias sociaux tels que Pinterest, Facebook ou Twitter, vous avez intérêt à ajouter des boutons de partage dans les pages de vos articles. Cela vous permettrait éventuellement de conquérir de nouveaux lecteurs et générer du trafic sur votre blog.

Quelques avantages à ajouter des boutons de partage dans votre Blog

Factiliter le partage des articles (vos articles seront partagés en un seul clic)
Booster la visibilité et le trafic de votre blog
Développer l'engagement de vos lecteurs
Remonter plus facilement dans les résultats des moteurs de recherche, notamment si votre article est largement relayé sur les réseaux sociaux

Boutons de partage et boutons d’abonnement

Ne confondez pas les boutons de partage et ceux d’abonnement. Ces derniers permettent à vos visiteurs d’accéder uniquement à vos pages sur les réseaux sociaux alors que les premiers permettent de partager un article de votre blog dans leur compte personnel sur un réseau social déterminé (LinkedIn, Twitter, etc.).

Emplacement des boutons de partage

Quant à l’emplacement des boutons, vous avez le choix entre deux positionnements :

Les boutons de partage fixes ou statiques

Ils seront placés soit au début, au milieu ou à la fin de votre article. Il est préférable de les insérer soit au milieu ou à la fin de votre article, car un lecteur qui vous lit jusqu’au dernier mot est plus enclin à partager votre contenu.

On verra la procédure d'intégration dans la prochaine section de cet article.

Les boutons de partage flottants

Dans ce cas, vos boutons resteront fixes lors de la navigation dans la page des articles. Ainsi, ils seront visibles et accessibles à tout moment. Vous pouvez opter pour le format horizontal ou vertical et choisir entre 4 emplacements dans la page :

En haut à gauche
En haut à droite
En bas à gauche
En bas à droit

Les boutons de partage flottants nécessitent généralement l’installation d’un plugin externe comme Addtoany, Addthis ou Sharethis pour n'en citer que quelques-uns. On verra ces extensions plus en détail dans la dernière partie de ce tutoriel.

Installer des boutons de partage social statiques, légers et sans cookies

Dans la première partie pratique de ce tutoriel, on verra comment insérer des boutons de partage fixes dans votre blog. D’une part, ces boutons sont très légers et n’impacteront pas les performances de votre blog (simple code HTML et CSS) d’autre part, vos visiteurs ne seront pas pistés et aucun cookie ne sera déposé par un site web externe.

C’est la meilleure option si vous êtes à cheval sur le temps de chargement de votre blog et soucieux de la protection de la vie privée de vos lecteurs.

En plus, l'extension que je vous propose est facile à installer et s’adapte à tous les supports (smartphone et tablette).

Concernant l’affichage sur les petits écrans (responsive design), je vous ai concocté deux modèles :

Premier modèle

Deuxième modèle

L’affichage dans les écrans d’ordinateur sera identique pour les deux modèles

Installer des boutons de partage social fixes dans Blogger

Les boutons de réseaux sociaux qui seront affichés sont :

Twitter
Facebook
Pinterest
LinkedIn

Si vous avez des connaissances en HTML et CSS, vous pouvez en rajouter d’autres aisément si vous le souhaitez.

Prérequis avant l'installation du plugin

La bibliothèque d'icônes Font Awesome

Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.

Ce plugin utilise des icônes "Font Awesome", donc on va vérifier si la bibliothèque est bien installée dans notre thème, sinon il faudra l'ajouter.

Cliquez sur "Thème"> "Modifier le code HTML"
Une boite contenant le code HTML de votre thème s'affichera
Cliquez n'importe où à l'intérieur du code HTML
Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à gauche dans la nouvelle interface de Blogger.
Dans la barre de recherche, saisissez maxcdn.bootstrapcdn

Si vous trouvez le code suivant, passez à la prochaine étape :


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Sinon, ajoutez le code suivant au-dessus de la balise </head>


<script type='text/javascript'>

//<![CDATA[

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

//]]>

</script>

Insérer le code HTML des boutons de partage dans votre thème Blogger

Cherchez la balise </article>

Ajoutez le code suivant au-dessus de la balise </article>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-post'>
              <ul>
                <li><a class='twitter universb-share universb-share-top' data-universb-share='Partager sur Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span>Twitter</span></a></li>
                <li><a class='facebook universb-share universb-share-top' data-universb-share='Partager sur Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span>Facebook</span></a></li>
                <li><a class='pinterest universb-share universb-share-top' data-universb-share='Partager sur Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span>Pinterest</span></a></li>
                <li><a class='linkedin universb-share universb-share-top' data-universb-share='Partager sur LinkedIn' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/><span> LinkedIn</span></a></li>
                </ul>
         </div>
<div style='clear:both'/>
</b:if>

Personnaliser l’apparence du plugin à l'aide des propriétés CSS

Cherchez le code ]]></b:skin>

Collez le code qui suit au-dessus de la balise ]]></b:skin>

Premier modèle


/* Boutons de partage Univers Blogger */
.universb-share {position:relative;display:inline-block;}
.universb-share:before, .universb-share:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} 
.universb-share:hover:before, .universb-share:hover:after {opacity:1;}
.universb-share:before {content:&#39;&#39;;position:absolute;background:transparent;border:4px solid transparent;position:absolute;}  
.universb-share:after {content:attr(data-universb-share)!important;background:#b6b1bf;color:#fff;padding:6px 8px;
font-size:11px!important;font-family:&#39;Open Sans&#39;!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.universb-share-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#b6b1bf;}
.universb-share-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body &gt; .share-post ul {padding:0;}
.share-post li{float:left;margin:20px 1%;width:22%;padding:0;list-style:none;position:relative;}
.share-post li a{color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;font-weight: 700;letter-spacing: 1px;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .linkedin:hover, .share-post li .pinterest:hover,.share-post li .twitter:hover,.share-post li .facebook:hover:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .linkedin{background-color:#0e76a8;}
@media only screen and (max-width:640px){
.share-post li .fa{margin-right: 0;width: 100%;float: none;}
.share-post li .fa::before{position: relative;}
.share-post li a span {display: none;}
.universb-share-top:before {left:0%;}
.universb-share-top:after {left:0%;}
.universb-share:after {content:attr(data-universb-share)!important;background:#b6b1bf;color:#fff;padding:0px;}}
@media only screen and (max-width:515px){.universb-share:hover:before, .universb-share:hover:after {display:none;}}

Deuxième modèle


/* Boutons de partage Univers Blogger */
.universb-share {position:relative;display:inline-block;}
.universb-share:before, .universb-share:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} 
.universb-share:hover:before, .universb-share:hover:after {opacity:1;}
.universb-share:before {content:&#39;&#39;;position:absolute;background:transparent;border:4px solid transparent;position:absolute;}  
.universb-share:after {content:attr(data-universb-share)!important;background:#b6b1bf;color:#fff;padding:6px 8px;
font-size:11px!important;font-family:&#39;Open Sans&#39;!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.universb-share-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#b6b1bf;}
.universb-share-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body &gt; .share-post ul {padding:0;}
.share-post li{float:left;margin:20px 1%;width:22%;padding:0;list-style:none;position:relative;}
.share-post li a{color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;font-weight: 700;letter-spacing: 1px;}
.share-post li a:hover{color:#fff;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .linkedin:hover, .share-post li .pinterest:hover,.share-post li .twitter:hover,.share-post li .facebook:hover:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .linkedin{background-color:#0e76a8;}
@media only screen and (max-width:640px){
.share-post li a{padding: 22px 0px 0px 6px;}}
@media screen and (max-width:480px) {
.share-post li{width:100%}
.share-post li a{padding: 6px 0px 0px 6px;}}

Si vous souhaitez les installer au début de l’article, insérer le code HTML juste en dessous de la balise <article qui est suivi généralement de l’attribut class
<article class='…'>

Insérer des boutons de partage flottants dans Blogger

Dans la seconde partie de ce tutoriel, j’ai choisi de vous présenter une extension nommée AddToAny qui permet d’installer facilement des boutons de partage social flottants en 2 clics !

AddToAny est la meilleure extension gratuite dans ce domaine. Elle est très bien maintenue et mise à jour régulièrement. En plus, elle est très légère comparé à d'autres extensions sur la toile comme Sharethis et Addthis.

Néanmoins, sachez que les actions des visiteurs seront de toute évidence collectées ! D’ailleurs, comme tout service gratuit sur la toile. Cela n’est pas nouveau et vous avez sans doute déjà entendu cette constatation quelque part « si c'est gratuit, vous êtes le produit ».

Quoi qu’il en soit, pour des raisons de performance et d’ergonomie, je vous recommande AddToAny si vous décidez d’installer des boutons flottants dans votre blog.

Assez parlé, passons à la pratique !

Intégrer les boutons de partage AddToAny dans Blogger

Comme à l'accoutumée, faites une sauvegarde de votre thème avant de modifier le code HTML de votre thème.

Cliquez sur "Thème"> "Modifier le code HTML"
Une boite contenant le code HTML de votre thème s'affichera
Cliquez n'importe où à l'intérieur du code HTML
Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à gauche dans la nouvelle interface de Blogger.
Cherchez la balise </body>
Insérer le code suivant au-dessus de la balise </body>


<script async='async' src='https://static.addtoany.com/menu/page.js'/> 
<b:if cond='data:blog.pageType== &quot;item&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<div class='a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style' id='my_centered_buttons' style='bottom:0px; right:0px; width=100%'>
<a class='a2a_button_facebook'/>
<a class='a2a_button_pinterest'/>
<a class='a2a_button_twitter'/>
<a class='a2a_button_linkedin'/>
<a class='a2a_button_whatsapp'/>
<a class='a2a_button_facebook_messenger'/>
<a class='a2a_button_copy_link'/>
</div>
</b:if> 
</b:if> 
<b:if cond='data:blog.pageType== &quot;item&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='a2a_kit a2a_floating_style a2a_kit_size_32 a2a_vertical_style' style='right:0px; top:150px;'>
<a class='a2a_button_facebook'/>
<a class='a2a_button_pinterest'/>
<a class='a2a_button_twitter'/>
<a class='a2a_button_linkedin'/>
<a class='a2a_button_whatsapp'/>
<a class='a2a_button_facebook_messenger'/>
<a class='a2a_button_copy_link'/>
</div>
</b:if> 
</b:if>

Ajuster le code à vos propres besoins

Le code ci-dessus se divise en trois parties :

Un scripte JavaScript

<script async='async' src='https://static.addtoany.com/menu/page.js'/>

Rien à modifier dans ce code !

Un code qui gère l’affichage dans les petits supports (smartphone et tablette)

<b:if cond='data:blog.isMobileRequest == "true"'>
<div class='a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style' id='my_centered_buttons' style='bottom:0px; right:0px; width=100%'>
<a class='a2a_button_facebook'/>
<a class='a2a_button_pinterest'/>
<a class='a2a_button_twitter'/>
<a class='a2a_button_linkedin'/>
<a class='a2a_button_whatsapp'/>
<a class='a2a_button_facebook_messenger'/>
<a class='a2a_button_copy_link'/>
</div>
</b:if>
</b:if>

Dans ce code, vous pouvez ajuster le positionnement de vos boutons flottants dans la ligne :
style='bottom:0px; right:0px; width=100%

bottom:0px signifie qu’ils se positionneront tout en bas de la page
right:0px signifie qu’ils se positionneront dans la partie droite de la page

En somme, les boutons s’afficheront tout en bas à droite de la page

Si vous souhaitez les afficher par exemple en haut de la page à gauche, vous devrez utiliser les propriétés top et left :

style='top:0px; left:0px; width=100%

Utilisez les propriétés top, right, bottom et left pour déterminer l'emplacement des boutons de partage dans la page des publications.

Supprimer un bouton de partage

Il suffit de supprimer la ligne contenant le réseau social, par exemple pour enlever le bouton Facebook je vais supprimer la ligne :

<a class='a2a_button_facebook'/>

Remarque : ce code s’activera uniquement sur les petits écrans. Par conséquent, pour visualiser les modifications, vous devez utiliser un smartphone ou ajoutez ?m=1 à l’adresse URL de la page d’article pour consulter la version "Mobile" de votre page.

Voici l’adresse URL d’un article dans Blogger :

https://tetstegd.blogspot.com/2017/11/cities-arer-dream-towards-latest.html

Pour afficher la version "Mobile" en ajoutera ?m=1, ce qui donnera :

https://tetstegd.blogspot.com/2017/11/cities-arer-dream-towards-latest.html?m=1

En effet, dans la plateforme Blogger, chacune de vos pages est dotée de deux liens. Le premier s’affichera quand la navigation s’effectue sur un ordinateur (version Desktop) et le deuxième sur smartphone ou tablette (version Mobile).

Un code qui gère l’affichage des boutons sur ordinateur

<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='a2a_kit a2a_floating_style a2a_kit_size_32 a2a_vertical_style' style='right:0px; top:150px;'>
<a class='a2a_button_facebook'/>
<a class='a2a_button_pinterest'/>
<a class='a2a_button_twitter'/>
<a class='a2a_button_linkedin'/>
<a class='a2a_button_whatsapp'/>
<a class='a2a_button_facebook_messenger'/>
<a class='a2a_button_copy_link'/>
</div>
</b:if>
</b:if>

Vous pouvez ajuster ce code de la même manière que l’affichage sur les petits écrans.

Bloquer l'affichage de la publicité

Enfin, puisque l’extension est gratuite, il se peut qu’elle affiche une bannière publicitaire AdSense après l’action du partage. Si vous ne souhaitez pas que cela arrive, ajouter le code suivant à la suite du précèdent (au-dessus de la balise </body>).


<script>
var a2a_config = a2a_config || {};
a2a_config.thanks = {
postShare: true,
ad: false,
};
</script>

Alors que cet article touche à sa fin, j’espère que ces boutons de partage social vous auront plu.

Merci d'avoir pris le temps de lire ce tutoriel. N'hésitez pas à le partager sur les réseaux sociaux si vous jugez qu'il pourrait être utile à d'autres personnes.

Ressources supplémentaires

3 magnifiques gadgets articles populaires personnalisés pour votre blog Blogger

Ajouter un diaporama éblouissant dans Blogger - Slideshow moderne

Installer une police de caractère personnalisée dans Blogger - Google Font

Univers Blogger

Suggestions de recherche