Barra con i pulsanti di Facebook, Google PlusOne, Stumbleupon, Twitter, Digg e Google Buzz.

Dopo l'introduzione di Google PlusOne è il caso di aggiornare il codice della barra flottante di condivisione che è stata adottata da molti di voi. Per il momento non sono riuscito a includere lo script di Google PlusOne direttamente nell'elemento pagina e quindi bisogna incollare una riga di codice nel modello. Potrebbe dipendere dal fatto che questo bottone ha solo un giorno di vita. Se ci fossero delle novità sarà mia cura aggiornare questo post. Dopo la installazione sarà visualizzata nel blog una barra verticale per condividere gli articoli sui vari social network che rimarrà immobile allo scorrere della pagina, come è possibile vedere in questa

• Demo dei pulsanti flottanti di FB, Google +1, SU, Twitter, Digg e Google Buzz -

 

Potrà essere inserita sulla sinistra prima dell'area del post oppure sulla destra tra area dell'articolo e sidebar. Per prima cosa dobbiamo installare lo script di Google PlusOne andando su Design > Modifica HTML e cercando la riga </head>. Immediatamente sopra si incolla la riga

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>{lang: &#39;it&#39;}</script>

e si salva il modello. Quindi si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice in Sezioni del sito

<!-- Share Button Start --> 
<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 .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='condivisione' title="Installa da Idee per Computer ed Internet">
<div style="clear: both;font-size: 10px;text-align:center;">Condividi</div>
<div class='sharebutton'>
<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='sharebutton'>
<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='sharebutton'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sharebutton' 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='sharebutton'>
<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='sharebutton' id='gplusone'>
<g:plusone size="tall">
</g:plusone></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://goo.gl/I8Wsp">Install</a></div>
</div>
<!-- Share Button End - www.ideepercomputeredinternet.com -->

I codici dei singoli bottoni sono stati colorati di diverso colore. Si possono quindi inserire solo quelli che riteniamo ci servano e eliminare i superflui. Si trascina l'elemento pagina con il drag & drop nella parte bassa del layout. Si può optare per metterlo sotto Post sul blog o alla fine della sidebar 

Se sotto l'area del post avete Disqus può darsi che ci siano delle interferenze e allora è meglio metterlo nella Sidebar. Se decidete di inserire il pulsante di Twitter ricordate di sostituire il mio username (parsifal32) con il vostro.

Posizionamento della barra flottante in relazione al layout

La stringa evidenziata di rosso dà solo una idea dei parametri che possono essere inseriti per posizionare al meglio i pulsanti.

bottom:30%; indica che la distanza dalla parte bassa del layout sarà il 30% della lunghezza della pagina. Si può sostituire bottom con top per fissare la distanza dalla parte alta e si può sostituire la percentuale con un valore assoluto (Es: top:200px; )

margin-left:-95px; fissa la distanza in pixel dal layout di sinistra. Il dato è negativo in modo da togliere la barra con i bottoni dall'area del post. Se si vuole spostare verso sinistra bisogna diminuire il valore mentre per lo spostamento a destra va aumentato. Ricordo che, in presenza di numeri negativi, diminuire -95px significa passare a -100px.

Questi pulsanti saranno visibili anche nelle pagine statiche. Se per esempio avete tolto le sidebar da quelle pagine, il risultato estetico potrebbe essere negativo in quanto la barra potrebbe sovrapporsi a delle gallerie fotografiche o a moduli di contatto. In questo caso si possono usare i tag condizionali per non mostrare la barra flottante nelle pagine statiche.

Si dà un titolo al widget in modo da poterlo trovare più facilmente andando su Design > Modifica HTML dopo aver messo la flag a espandi modelli widget. Dopo aver individuato il codice del gadget, si dovrà incollare

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

Si termina salvando il modello e eliminando il titolo del widget che a questo punto non ci serve più.