Pubblicato il 21/05/12e aggiornato il

Sticky Sidebar con JQuery per Blogger per condividere sui social network.

Bottoni di condivisione per Facebook, Google Plus, Pinterest e Stumbleupon in una barra verticale flottante con JQuery.
Sticky Sidebar JQuery è un plugin che mostra in verticale i bottoni di condivisione sui social network. Rispetto a versioni che ho precedentemente illustrato (prima versione e seconda versione), viene utilizzata la libreria JQuery che permette lo scorrimento della barra lasciandola flottare allo scorrere della pagina. Serve per dare la possibilità ai lettori del blog di condividere i singoli post sui vari social network quali Facebook, Twitter, Stumbleupon e Pinterest.

E' presente anche una icona per l'iscrizione ai feed del blog. Per avere una idea di come funzioni questa barra date uno sguardo alla apposita demo che ho postato online

 
Ciascun pulsante avrà il contatore che mostra il numero delle condivisione o dei Mi Piace.

stickybar

Quando si scorrerà la pagina del post, la barra resterà sempre visibile con un movimento di scorrimento verticale. Per la sua installazione si deve operare sul template quindi occorre innanzitutto andare su Modello > Backup/Ripristino e salvare il modello completo per sicurezza nel caso in cui le modifiche non andassero a buon fine. Si torna su Modello > Modifica HTML > Procedi e si espandono i modelli widget.

Si cerca la riga

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

e, subito sotto, si incolla il codice

<!--Barra Bottoni condivisione Inizio-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share-buttons'><div class='twitter scount'> <a class='twitter-share-button' data-count='vertical' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div><div class='facebook scount'><fb:like expr:href='data:post.url' font='' layout='box_count' send='false' show_faces='false' width='50'/></div><div class='stumble scount'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><div class='gplus scount'> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/> </div><center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
//]]>
</script>  </center><br/><a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN' rel='nofollow' target='_blank' title='Sottoscrivi il Feed'><img src='https://lh4.googleusercontent.com/-PiEVqJbiYUE/T7n1r_d_kPI/AAAAAAAAYQ4/ZSqUn2sycxE/s48/rss-icon.png'/></a>
<br/><a href='http://goo.gl/HZhK5' target='_blank' title='Installa bottoni di condivisione'><small>Get Widget</small></a></div>
</b:if>
<!--Barra bottoni condivisione fine-->

dove si sostituisce il nome utente di Twitter, l'URL di FeedBurner e, eventualmente, l'icona per abbonarsi ai feed. Se non siete iscritti a FeedBurner inserite l'indirizzo generico dei feed

http://nomeblog.blogspot.com/feeds/posts/default

Adesso andate su F3 o su Ctrl+F, cercate la riga </head> e, subito sopra, incollate quest'altro codice

<!--Sticky Sidebar Inizio-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><script src='https://sites.google.com/site/scriptperilblog/javascript-2/share-botton-bar.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
$('#share-buttons').stickySidebar({speed: 300, constrain: true})
});
//]]>
</script>
<!--Sticky Sidebar Fine-->

dove la riga colorata di viola rappresenta lo script del Google Plusone e può essere tralasciata se abbiamo già installato tale bottone. La riga colorata di blu è la libreria JQuery aggiornata. Anche questa può essere tralasciata se nel modello fosse già presente.

Se avete un dominio personalizzato, dovete scaricare il javascript colorato di rosso e caricarlo su DropBox nella cartella Public quindi inserire il suo nuovo URL. Il parametro 300 rappresenta la velocità di scorrimento della barra e può essere modificato.

Se non avete inserito nel modello lo script di Facebook dovete cercare nuovamente </head> e, subito sotto, incollare questo ultimo script 

<!--Codice Facebook Inizio-->
<div id='fb-root'/>
<script>
//<![CDATA[
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/it_IT/all.js#xfbml=1';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>
<!--Codice Facebook Fine-->

che è stato localizzato in italiano. Se lo volete in inglese, basta sostituire it_IT con en_US. Non resta che inserire i fogli di stile. Si cerca la riga ]]></b:skin> e, subito sopra, si incolla il blocco di codice


/*Barra pulsanti inizio*/
#share-buttons {
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #BBB;
left: -105px;
padding: 8px;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
-goog-ms-border-radius: 5px;
border-radius: 5px; }
#share-buttons .scount{
clear: both;
display: block;
margin: 2px auto;
text-align: center;
width: 55px;z-index:-1;
}
.post-outer{height:auto;}
#main{position:relative;}
#main-wrapper{position:relative;}
/*Barra pulsanti Fine*/

dove possono essere personalizzati colore di sfondo e stile del bordo. Il parametro più importante è evidenziato in grassetto e serve per posizionare orizzontalmente la barra di condivisione cambiando il numero -105px;. I 5px rappresentano il valore del raggio dell'arrotondamento della barra che non sarà visibile con tutte le versioni di Internet Explorer (escluso il prossimo IE10). Nel caso in cui si scelga la localizzazione in inglese, il pulsante Mi Piace sarà sostituito da Like ma sarà meno largo

pulsante-mi-piace 
Finalmente si salva il modello. La barra sarà visibile solo nei singoli post visto che sono stati introdotti dei tag condizionali. Enjoy!




5 commenti :

  1. Ernesto, mi sbaglio o questa barra fluttuante è diversa da quella che quando zoomavi la pagina andava a finire sopra agli elementi del blog?
    Mi sembra che questa rimanga fissa a prescindere dalle dimensioni della pagina, è corretto?

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      La differenza sostanziale risiede nel fatto che viene utilizzata la libreria JQuery che aggiunge un effetto slide alla barra che si muove verticalmente allo scorrere della pagina quando arriva al top della stessa.

      Elimina
  2. ciao grazie per la guida, ho fatto come hai detto ma il pin va sul pulsante condivisione di google, come risolvo? come posso togliere il pulsante del pinterest? grazie mille!

    RispondiElimina
    Risposte
    1. @# Prova a cancellare tutto il codice che va da <center><a class='pin-it... fino a ...//]]>
      </script> </center>

      Elimina
    2. @# Se invece vuoi mantenere anche il bottone di Pinterest non sovrapposto a quello di Google+ incolla questo codice <br/><br/> subito prima del codice <center><a class='pin-it...

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.