Pubblicato il 21/10/14 - aggiornato il  | 9 commenti :

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 -


9 commenti :

  1. senti ernesto, io l'ho installato, ma in pratica il bottone facebook, non consente di condividere il post su facebook, ma serve esclusivamente come contatore di n. di mi piace, che tra l'altro comunque non interagisce con facebook, quindi resta uno sterile contatore. Non so se ho reso l'idea, non ci sarebbe la possibilità di implementare il codice con un vero bottone fb, uno di quelli che condivide il mi piace su fb? grazie

    RispondiElimina
    Risposte
    1. Sicura? Prova a sostituire il codice di Facebook che iframe allowTransparency='true' ... con un codice di un altro bottone che magari hai nel tuo sito. Prova per esempio con uno di questi
      http://www.ideepercomputeredinternet.com/2013/08/mi-piace-facebook-blogger-template.html
      @#

      Elimina
    2. purtroppo niente da fare, ma tu hai visto che se passi con il mouse sul bottone fb non ti si apre nessuna finestra per condividere, mente per gli altri 2 bottoni si. Ho provato a sostituire i codici ma mi è scomparso anche il contatore mi piace :-(

      Elimina
    3. Nella Demo con Firefox si apre e ci si può cliccare sopra. Ora sono al cellulare ma poi ricontrollo
      @#

      Elimina
    4. io ho provato sia su safari che su chrome e sul mio blog non funziona (guarda anche tu madeinbottega.com). Ora mi chiedo cosa può interferire proprio con il codice di fb? perché gli altri 2 funzionano

      Elimina
    5. Non lo so. Forse hai altri bottoni Facebook con uno script diverso che interferiscono
      @#

      Elimina
    6. ho solo share this, ho provato a rimuoverlo, perché ho pensato anche io la stessa cosa, ma il pulsante fb non funzionava comunque @_@

      Elimina
  2. Ciao Ernesto. Anche io ho avuto dei problemi. Sul mio blog proprio non va. Ma a dire il vero è un po' che "litigo" con il pulsanti di condivisione.... Meglio che cambio template?
    http://my-way-online.blogspot.it/

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy