Widget scorrevole con pulsanti con contatore per condividere su Twitter, Facebook e Google+.

Come visualizzarfe in un banner scorrevole i bottoni con contatori di Facebook, Twitter e Google Plus quando si scorre la pagina verso il basso.

Il widget che vado a presentare è veramente originale e credo che sia in grado di aumentare considerevolmente il numero di condivisioni sui social più famosi quali Twitter, Facebook e Google+. Il lettore quando scorrerà la pagina di un articolo verso il basso vedrà apparire una barra grigia semitrasparente con i pulsanti per condividere su tali social muniti anche di contatore. La barra sarà visibile solo quando il lettore scenderà in basso e quindi solo quando avrà letto buona parte del post e si spera dopo che avrà avuto modo di apprezzarlo. Il navigatore avrà comunque a disposizione un pulsante per chiudere il banner scorrevole. 

I pulsanti di Facebook, Twitter e Google+ avranno un secondo effetto scorrevole e si mostreranno nella loro interezza solo quando ci si passerà sopra con il mouse.  

Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la riga </body> e, subito sopra si incolla questo codice

<!-- Bottoni Sociali Flottanti - Inizio -->
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){ if($(document).scrollTop()>=$(document).height()/5) {
$('#socialslide').show('slow');
} else {$('#socialslide').hide('slow');}
});
function closesocialslide(){
$('#socialslide').remove();
;}
//]]>
</script>
<!-- Bottoni Sociali Flottanti - Fine -->

Successivamente si cerca la riga che segna l'inizio della versione desktop del blog che è la seguente

<b:includable id='post' var='post'>

Si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice. Si scorre in basso fino a trovare una di queste tre righe

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-2'>

La scelta di una o dell'altra la discuteremo alla fine dell'articolo. Subito sotto a una di queste righe va incollato il seguente codice

 <!-- Bottoni Flottanti Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#socialslide {display: none;overflow: hidden;position: fixed;bottom: 0px;left:0;width: 100%;margin: 0;padding: 0 0 28px;font-size: 18px;z-index: 100000;
background-color: rgba(128, 128, 128, 0.4); border-radius: 8px;box-shadow: inset 0 0 4px #fff;}
#socialslide a {position: absolute;top: 6px;right: 4px;color: #000;font-size: 20px;font-weight: bold;}
#socialslide &gt; a + div {text-align: center;margin: 0;padding: 10px;background: #ccc;color: #000;box-shadow: inset 0 0 4px #fff;}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#share-buttons{border-radius:5px;background:#FFF;width:495px;overflow:hidden;margin-left:130px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:6px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:25px; position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228} </style>
<div id='socialslide' style='display: none;'>
<a href='javascript:void(0);' onclick='return closesocialslide();'>Chiudi - X</a>
<div>Se ti è piaciuto perché non condividi questo post?</div>
<div style='width: 800px; margin: 20px auto;'>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div>
<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=true&amp;width=105&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:105px; height:20px'/>
</div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='' href='https://twitter.com/share'> Tweet </a><script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</script></div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </div>
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
}
)();
</script></div>   </div></div></div></b:if>
<!-- Bottoni Flottanti Fine -->

dove possono essere personalizzati i codici dei colori e dove si possono tralasciare i javascript di Twitter e Google+ evidenziati di giallo se fossero già presenti nel nostro sito. Si salva il modello ricordandosi che nell'Anteprima non sarà visibile niente visto che ci sono i tag condizionali per mostrare il banner scorrevole solo nei post e non in Homepage.

La scelta di incollare il secondo codice dopo la prima, dopo la seconda o dopo la terza riga dipende dal punto di scorrimento della pagina in cui si vuole che inizi a visualizzarsi il banner. Se si sceglie la prima riga appare presto mentre se si sceglie la terza appare solo alla fine. Si possono testare tutte e tre i posizionamenti prima di prendere una decisione in merito.

Fonte | Amor Sevillista -