Boutons de partage animes sur Blogger

DEMONSTRATION 

J'ai bien constaté que la plupart des visiteurs de Blogger pour les nuls prêtent une attention bien particulière aux boutons de partages ( Google+, Facebook et Twitter ).

C'est pour cela qu'aujourd'hui j'ai decidé d'enrichir le contenu de mon blog dans ce domaine, en introduisant ce nouveau widget, très agréable et captivant, contenant 6 icônes :Pinterest, Google, Twitter, Facebook, Tumblr et e-Mail.

Installation du widget des boutons de partage pour Blogger:

1 - Connectez vous à Blogger, puis choisissez votre blog > Modèle > Modifier le code HTML, une fois la box ouverte, cochez ' Développer des modèles gadget '

2 - Cherchez à l'aide de Ctrl+F ou en cliquant sur f3 le code suivant ' </body> '

3 - Copiez puis collez le code ci-dessous juste avant le code trouvé à l'étape 3.

<!-- Start Shareaholic Sassy Bookmarks HTML --><div class='shr_ss shr_publisher'>
</div><!-- End Shareaholic Sassy Bookmarks HTML --><!-- Start Shareaholic Sassy Bookmarks settings --><script type='text/javascript'>var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}};</script><!-- End Shareaholic Sassy Bookmarks settings --><!-- Start Shareaholic Sassy Bookmarks script --><script type='text/javascript'>(function() {var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-ss.min.js&quot;;var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);})();</script>
<!-- End Shareaholic Sassy Bookmarks script --><!-- End Shareaholic Sassy Bookmarks HTML -->

      PS: Remplacez le code en vert par votre compte twitter.

4 - Enregistrez le modèle et le widget est prêt ;)

Nous vous recommandons de consulter les articles suivants concernant les boutons de partage :

• Bouton de partage dans vos articles : içi
• Boutons de partage flottants : içi

Source : SpiceUpYourBlog

LIRE LA SUITE ...

Boutons de partage dans vos articles Blogger

 

Les boutons de partage sont très importants pour votre blog, car elles permettent d'augmenter le trafic de votre blog grâce aux réseaux sociaux et de vous faire de nouveaux lecteurs etc ..

Pour cela, intégrer ces boutons devient un must.

Je vous propose donc ce petit tuto pour vous aider à intégrer 4 boutons de partage en bas (ou en haut) de vos articles.

TUTO D'INTEGRATION DE BOUTONS DE PARTAGE AUX ARTICLES:

Je vous propose le code ci dessous, il contient 4 boutons de partage ( Twitter, Facebook like, Google +1, Facebook share)

1 - Tout d'abord, copiez le code ci dessous:

<div style='background:lightblue;padding:5px;height:20px;margin-top:20px;-webkit-border-radius:8px'><div style='float:left;color:black;font-size:15px;padding-top:1px;text-shadow:0 1px 0 white;font-family:georgia,arial,sans-serif;'>Partager en 1 clic :</div><div style='float:right;position:relative;'><div style='padding-bottom:3px;'><table border='0'><tbody><tr> <td><div style='margin-right:5px;'><a class='twitter-share-button' data-count='horizontal' data-via='BloggerPLN' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div></td> <td><div style='margin-right:5px;'><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; margin-left:0px; width:100px; height:20px;'/></div></td> <td><div style='margin-right:5px;'><g:plusone expr:href='data:post.url' size='medium'/></div></td> <td style='margin-bottom:5px'><a name='fb_share' type='button_count'>Partager</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script></td></tr></tbody></table></div></div></div>

Le code en Rose désigne le verbe à appliquer, dans ce cas c'est ' Partager en 1 clic'

Le code en Bleu ciel désigne le bouton Tweeter

Le code en Bleu désigne le bouton j'aime de Facebook

Le code en Rouge désigne le +1 de Google

Le code en Violet désigne le bouton de partage de Facebook

NB / Vous pouvez supprimer, ou modifier n'importe quel bouton.

2 - La deuxième phase est celle de l'intégration, vous avez 2 choix:

      CHOIX 1

      Boutons de partage en haut de l'article (En dessous du titre)

On cherche alors grâce au bouton de clavier ' F3 ' , ou bien 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é dans l'étape 1. On enregistre le modèle, et le tour est joué!

     CHOIX 2

     Boutons de partage en bas de l'article (En dessous de l'article)

On cherche alors grâce au bouton de clavier ' F3 ' , ou bien 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é dans l'étape 1. On enregistre le modèle, et le tour est joué!

Aidez nous à faire connaître le blog en partageant cet article

Ps: en cas de problème lors de l'installation, laissez un commentaire ci-dessous.

LIRE LA SUITE ...