Boutons de partage dans vos articles Blogger

Article mis à jour le 18 janvier 2014. (Nouvelle méthode plus facile).

Vous souhaitez que vos lecteurs partagent votre blog? facilitez leur la tâche en ajoutant des boutons de partage dans vos articles.

Ces partages représentent une source très importante de trafic pour votre blog; il y a même des sites qui vivent principalement du partage de leurs articles comme Buzzfeed, 9gag, etc. Sans oublier qu'un article partagé augmentera la notoriété de votre blog, et vous apportera de nouveaux lecteurs intéressés par le contenu de votre blog.

Pour ajouter ces boutons, c'est très simple, il faut juste suivre ce tutoriel. (Merci à Rafay pour ce tuto).

Par souci de conserver un temps de chargement rapide pour votre blog, j'ai choisi 3 boutons de partage des 3 réseaux sociaux les plus utilisés: Twitter, Facebook et Google+.

Etape 1: Appliquer le CSS

Connectez vous sur Blogger, choisissez votre Blog > Modèle > Modifier le code HTML.

Cherchez " </head> " en cliquant simultanément sur la touche Ctrl et F.

Juste avant, copiez le code ci-dessous.

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>// Twitter(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src=&quot;//platform.twitter.com/widgets.js&quot;;d.parentNode.insertBefore(a, d)}})(document, &quot;script&quot;, &quot;twitter-wjs&quot;);</script><style type='text/css'>/*---- Horizontal Social Buttons Bar By RafayTutorials ---- */#SocialShareBar {float: left;border-top: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;width: 610px;margin-bottom: 20px;margin-left: -10px;margin-top: 10px;position: relative;clear:both;z-index: 9999;}.social-heading h5 {float: left;padding-right: 20px;padding-top: 13px;text-transform: uppercase;font-weight: bold;margin: 0px;padding-left: 10px;font-family: &#39;Lora&#39;,Arial,Helvetica,Geneva,sans-serif;font-size: 15px;color: #555555;}.twitter-tweet, .facebook-like, .google-plus, .comment-counter {float: left;border-left: 1px solid #eaeaea;padding-left: 18px;padding-top: 15px;padding-bottom: 10px;width: auto;height: 22px;}.comment-counter a {text-decoration: none !important;}.share-bubble{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG1OdbldaL7eh2jiL5Gj5wh2lavVpw1rbP7n0qU3cY1TO7YTiwk-_leX4jN6wEUTtt3wC66iRgD1KJxWvLDKpFd28akXrXiEo59xCRnuI6CnkcW0LPlKbwe0uzOr9O2gTqADkF76F6B3rw/s1600/Comments.png) no-repeat;height: 22px;min-width: 30px;float: left;margin: 4px 5px 0px 5px;}.google-plus {margin-left: 20px;}</style></b:if>

Etape 2: Ajouter les boutons où vous voulez.

Dans cette étape, on copie d'abord le code ci-dessous.

<!-- Horizontal Social Sharing Buttons By RafayTutorials --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='SocialShareBar'> <div class='social-heading'>  <h5>PARTAGER &#8594;</h5> </div> <div class='twitter-tweet'>  <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <div class='facebook-like'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/> </div> <div class='google-plus'>  <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>  </div>  <div class='comment-counter'><div class='share-bubble'/> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a> </div>  </div> </b:if>

Maintenant, on a 2 choix: soit faire apparaître la barre contenant les boutons en tête de l'article ou à sa fin.

Choix 1: En tête de l'article, juste en dessous du titre.

On cherche en appuyant simultanément sur 'Ctrl' et 'F', le code: " <post-header-line-1> ", et juste après on ajoute le code qu'on a copié ci-haut. On enregistre le modèle, et c'est bon.

Choix 2: En bas de l'article.

On cherche en appuyant simultanément sur 'Ctrl' et 'F', le code: " <data:post.body/> ", et juste après on ajoute le code qu'on a copié ci-haut. On enregistre le modèle, et c'est bon.

C'est bon!