Barra flottante con i bottoni di Facebook, Twitter e Google+.

Barra verticale flottante per i bottoni di condivisione per Facebook, Google Plus e Twitter. C'è anche il pulsante Share.

La condivisione dei post sui social network è diventata una abitudine per i navigatori tanto che praticamente tutti i siti si sono dotati degli appositi pulsanti per facilitare tale operazione. C'è chi preferisce mettere i bottoni di condivisione all'inizio del post, chi li ama vedere alla fine e chi ha invece optato per posizionarli nella sidebar.

Un'altra opzione che vedo sta prendendo molto campo è quella di una barra di condivisione flottante in cui vengono inseriti tutti i principali bottoni. Ho già presentato un codice per mostrare i bottoni in una barra verticale in cui avevo inserito i pulsanti di Facebook, Google Plus, Twitter, Stumbleupon, Digg e Google Buzz.

Nel frattempo però Google Buzz è stato ritirato mentre Digg e Stumbleupon non sono molto popolari soprattutto in Italia. Ho quindi pensato di illustrare un altro sistema di realizzazione di una barra verticale flottante, vale a dire che rimane fissa durante lo scroll della pagina, con i soli bottoni di Twitter, Google Plus e Facebook. Per quest'ultimo social network ho inserito due opzioni, il pulsante Mi Piace e il pulsante Share per dare una doppia scelta di condivisione ai lettori. Tutti questi bottoni sono dotati di contatore che mostra il numero delle condivisioni

L'installazione non presenta difficoltà visto che non si deve modificare il template. Si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<!--Floating Share Buttons Start-->
<style>
#floatingbar {position:fixed; bottom:25%; right:12px; float:left; border: 1px solid #191919; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;background-color:#eeeeee;padding:0 0 2px
0;z-index:10;}
#floatingbar .sharebutton {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='floatingbar' title="Condividi">
<div class='sharebutton'><script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=" "></fb:like></div>
<div class='sharebutton'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sharebutton' style="margin-left:11px;"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sharebutton' style="margin-left:12px;"><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><br/><div style="clear: both;font-size:8px;text-align:center;"><a href="http://goo.gl/IEj8S" target="blank"><font color="#999">Get Widget</font></a></div></div>
<!--Floating Share Buttons End-->

Dove si può personalizzare la posizione della barra, il colore del bordo e quello dello sfondo. Se si lasciano questi valori, lo stile del bordo sarà dello spessore di un pixel e del colore #191919, mentre lo sfondo della barra verticale sarà del colore #eeeeee. Si salva il widget mentre il suo posizionamento su Layout non dovrebbe influire più di tanto sul risultato.   

La posizione dei bottoni di condivisione sarà infatti tale da avere una distanza del 25% dalla parte bassa della pagina e di 12 pixel dalla parte destra del layout. Questi parametri possono essere modificati a seconda delle esigenze personali. Si possono cambiare anche i tag inserendo top e left al posto di bottom e right con ovvio significato.

Se nel nostro modello abbiamo già inserito gli script di Google Plus e di Facebook per esempio quando abbiamo installato il Like Box o il widget della Pagina Business, allora diventano superflui i javascript colorati di blu che possono essere tolti dal codice.

Nella barra verticale è stato introdotto anche l'arrotondamento che non sarà visibile con le versioni correnti di Internet Explorer ma lo sarà solo con IE10 che però è ancora in Beta. Volendo possono anche essere inseriti bottoni di altri social network; visto che spesso sono di dimensioni diverse, per poterli avere centrati, si deve operare sul parametro margin-left:11px;.

Aggiornamento: Il pulsante Share di Facebook non funziona più perché sono state ritirate le API. Ho quindi creato un nuova versione di questa barra verticale.