Inserire in Blogger una barra verticale per condividere su Google+, Facebook, Twitter, Digg, StumbleUpon

Barra Verticale per condivisioni sociali in Blogger.

Questo widget che vado a presentare è uno dei più interessanti che abbia realizzato e penso che susciterà il gradimento di molti lettori specialmente se hanno un blog su Blogger di ultima generazione basato sul Designer Modelli. Si tratta di una barra verticale che rimane statica, cioè non scorre insieme alla pagina, che ha al suo interno i bottoni di condivisione con relativo contatore su Facebook, Twitter, StumbleUpon, Digg e Google Buzz. Il widget sarà visibile in tutte le pagine e se ne potrà calibrare la posizione a seconda del modello che utilizziamo. Le distanze sono state calcolate per il template Simple con layout standard. 

Se uno o più di questi bottoni non ci interessano, può essere sempre eliminato un po' come accade per gli storici bottoni di voto. La barra laterale flottante di condivisione ha questo aspetto

Quando si clicca su uno dei bottoni, la pagina corrente, che può essere un post, la homepage o una pagina di etichette verrà condivisa nel relativo social. Se non vogliamo mostrarla nelle pagine statiche visto che sono utilizzare per moduli di contatto, gallerie fotografiche e altre funzioni particolari, alla fine del post indicherò quali sono i tag condizionali da inserire.

Per l'installazione non occorre modificare il modello. Si va su Design > Aggiungi un gadget e in Sezioni del sito si incolla il codice

<!-- Bottoni di Condivisione Inizio--> 
<style>
#condivisione {position:fixed; bottom:30%; margin-left:-95px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#condivisione .bottoni {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='condivisione' title="Installa da Idee per Computer ed Internet">
<div style="clear: both;font-size: 10px;text-align:center;">Condividi</div>
<div class='bottoni'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='bottoni'>
<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' rel='nofollow'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</div>
<div class='bottoni'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='bottoni' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='bottoni'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='posta su google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>
<div class='bottoni' id='gplusone'>
<g:plusone size="tall">
</g:plusone></div> 
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://goo.gl/UmuLP">Install</a></div>
</div>
<!-- Bottoni di Condivisione Fine - www.ideepercomputeredinternet.com -->

Si salva l'elemento e si posiziona con il mouse sotto l'area del post.

Dopo aver salvato nuovamente cliccando su Salva in alto a destra su Design > Elementi pagina, si visualizza il blog per posizionare al meglio la barra con i bottoni di condivisione. Il meccanismo è il seguente:

Posizionamento orizzontale: bisogna modificare il valore di margin-left:-95px. Valori negativi spostano la barra verso sinistra mentre valori positivi la posizionano più destra.

Posizionamento verticale: Occorre modificare il dato bottom:30%; che può essere sostituito anche da un valore assoluto in pixel invece che da una percentuale che fissa la distanza dalla parte bassa della pagina. Es: bottom:150px; 

Aggiungere o togliere dei pulsanti: I blocchi dei codice relativi ai singoli social sono colorati alternativamente di rosso e blu per facilitare una  eventuale eliminazione di quelli che non interessano. Se si vuole aggiungere un altro bottone occorre inserire il codice relativo con questa sintassi

<div class='bottoni'>
CODICE BOTTONE CONDIVISIONE IN QUESTO PUNTO
</div>

Per il bottone di Twitter occorre anche sostituire il mio nickname (parsifal32) con il vostro in modo da inserire automaticamente la mention @username nei tweet generati con questi pulsanti. Come detto all'inizio, si può fare in modo che questo widget non appaia nelle pagine statiche. Si dà un nome posticcio al gadget in modo da poterlo più facilmente individuare cliccando su F3. Si va su Design > Modifica HTML e si espandono i modelli widget. Dopo aver trovato il codice del gadget si incolla la riga

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
subito dopo il codice
<b:includable id='main'>
e la riga
</b:if>
subito prima di
</b:includable>

Si salva il modello. Per maggiori dettagli consultate il post sui tag condizionali per widget. Ho testato i pulsanti e sono tutti perfettamente funzionanti. Se notate delle cose che non vanno vi prego di comunicarmelo nei commenti.

Aggiornamento: Se si vuole inserire la barra flottante con i pulsanti nella zona compresa tra l'area del post e la sidebar di destra occorre procedere in questo modo. Il gadget HTML/Javascript va inserito nella parte bassa della sidebar e non sotto il post come fatto in precedenza

 L'aggiustamento della posizione orizzontale e verticale va fatto agendo sulla stessa porzione di codice indicata prima cioè su margin-left:-95px per il posizionamento orizzontale e bottom:30%; per il posizionamento verticale.
Aggiornamento 2: E' stato inserito anche il pulsante Google Plus One. In questo caso occorre anche aggiungere la riga di codice
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">  {lang: 'it'} </script>
prima di </head>.