Bouton de partage Blogger ( Horizontaux & flottants )

Aujourd'hui on verra comment intégrer une barre horizontale contenant tout les boutons de partage, qui reste flottante même si on descend dans l'article.

On commence alors, l'intégration est facile, il suffit de suivre ces étapes:

Tutoriel d'intégration de la barre de partage flottante

1 - Connectez vous à Blogger, choisissez votre blog, en suite cliquez sur ' Modèle ', et ' Modifier le code HTML ' puis ' traiter '

2 - Grâce à la touche F3, cherchez le code ' </head> ' , et juste avant, collez le code ci-dessous:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /*<![CDATA[*/ #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;} #w2bSocialFloat td{padding:4px;margin:0;border:none;} #w2bSocialFloat td iframe{max-width:82px;width:82px !important;} #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/ // Set the Top Offset $theOffset = 0; jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})}); /*]]>*/ </script> <script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script> <script type="text/javascript"> /*<![CDATA[*/ // Twitter (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs"); // Google + (plus) (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Stumbleupon (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})(); // Digg (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})(); /*]]>*/ </script> </b:if>

3 - Enregistrez le modèle.

4 - Grâce à F3, cherchez le code ' <data:post.body/> ' , si vous n'en trouvez qu'un, passez à l'étape 5.

Si vous en trouvez 3, c'est que vous utilisez le resumé automatique, pour cela il faut chercher le code ' <b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/> '

5 - Juste avant ce code, collez les lignes ci-dessous:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id="w2bSocialFloat" class="w2bSocialFloat"> <table width="100%" class="w2bSocialFloat"> <tr> <td> <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a> </td> <td> <iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe> </td> <td> <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> <data:post.body/> <script type="text/javascript"> w2bPinItButton({ url:"<data:post.url/>", thumb: "<data:post.thumbnailUrl/>", id: "<data:post.id/>", defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYucufi67xPypVIqXfbxhKyaUscO2oRwE_tYvsnahhjUELQ2jnJouGFCBLSNvsmsD_d0AEabAqArowJ-E_UwM6eWy_P2mxubJoBIghVhREIv3XSZ1NaYKyuvgAlxaR-1rZNj2mkc7D056A/s1600/w2b-no-thumbnail.jpg", pincount: "horizontal" }); </script> </div> </td> <td> <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div> </td> <td> <su:badge layout="1" expr:location="data:post.url"></su:badge> </td> <td> <a class="DiggThisButton DiggCompact"></a> </td> </tr> </table> </div> </b:if>

6 - Enregistrez la template, et c'est bon ;)

Il existe plusieurs variantes pour ajouter des boutons de partage dans votre blog:

- Boutons de partages verticaux et flottants

- Boutons de partage dans vos articles

- Boutons de partage animés

Si vous avez un souci dans l'installation, n'hésitez pas à le signaler en commentaire :)