Barra verticale con effetto slide per bottoni dei social network.

Come installare su Blogger una barra verticale scorrevole con i bottoni di condivisione per Facebook, Twitter e Google Plus e con il pulsante di AddThis per stampare e condividere con OKNotizie, Diggita e i social network di tutto il mondo.

AddThis è un servizio specializzato nella realizzazione di widget per gli utenti di tutte le piattaforme. E' talmente usato che ha Page Rank 10 esattamente come Google e Twitter e più del 9 di Facebook. Ho già presentato diversi gadget di AddThis come quello dei bottoni di condivisione o della toolbar. Si possono usare gli script di AddThis per creare dei metodi di condivisione che altrimenti sarebbero più complicati basandosi esclusivamente sulle API ufficiali dei vari social network. 

Il gadget che andrò a illustrare è una barra verticale a scomparsa che si visualizza al passaggio del mouse su una apposita icona e che mostra direttamente i bottoni con contatore di Facebook, Twitter e Google Plus ma che ha anche il pulsante di AddThis che consente ai lettori di stampare il post, di metterlo tra i Preferiti o di condividerlo su servizi quali OKNotizie, Diggita, Tumblr, StumbleUpon e altri ancora. Andando inoltre su Impostazioni si possono personalizzare i servizi da visualizzare selezionandoli tra i centinaia supportati da AddThis. Ecco uno screenshot dei vari passaggi

L'installazione è semplicissima e non è necessario modificare il modello. L'effetto Slide è ottenuto tramite la libreria JQuery che potrebbe essere già presente nel vostro template. Andate su Layout > Aggiungi un gadget e scorrete l'elenco fino a HTML/Javascript. In Sezioni del sito incollate questo codice

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
    /*<![CDATA[*/
   jQuery(document).ready(function(){jQuery(".IpCeI_wdg").hover(function(){jQuery(this).stop().animate({left:"0"},"medium")},function(){jQuery(this).stop().animate({left:"-72"},"medium")},700)});
    /*]]>*/
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<style type="text/css">
    .IpCeI_wdg {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9jP3pw4wZLiH-XhdbGupBWcP5LgFcxLGR6hYFwbVhV8t35VkNjUpGamvcds4g8lFY-L3XnuIeVhohEYOnReX8pbA3Y2AuYOREHGA1YazmoD3JhJVDHtKPvDGNSrtn8MoJ9XHjYAZGT4PN/s105/share.png") no-repeat scroll right top transparent !important;
        display: block;float: left;height: auto;
        padding: 0 45px 0 0px;
        width: 67px;
        z-index: 9999;
        position:fixed;
        left:-72px;
        top:25%;
    }
    .IpCeI_wdg div {
        border:none;
        position:relative;
        display:block;
    }
</style>
<div class="IpCeI_wdg" style="">
    <div> 
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" >
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
<div id="crlink" style='font-size:8px; font-weight:bold; text-align:center;margin-top:7px;'><a href='http://goo.gl/k5VPC' target="_blank"/>Get Widget</a></div>
</div>
</div></div>

dove la riga evidenziata di giallo è appunto JQuery e può essere tralasciata nel caso fosse già presente nel modello. Si salva e si visualizza il sito. La barra è realizzata per essere vista sulla sinistra del layout. Per determinarne la distanza dalla parte alta si può personalizzare il valore 25%. L'URL in rosso è la icona che rimane sempre visibile e può essere sostituita da un'altra a vostra scelta. Qualche lettore che sia anche un grafico farà certamente di meglio di quanto abbia realizzato io con le mie modeste capacità.

OSSERVAZIONI AGGIUNTIVE

Alla fine della barra verticale sarà visibile un link di installazione che rimanderà a questo post. Se vi dà esteticamente fastidio potete facilmente eliminarlo incollando all'inizio del codice questa riga

<style>#crlink{display:none}</style>

La barra è correttamente visibile con Chrome e con Firefox. Se avete delle difficoltà a visualizzarla, non nella Demo, ma nel vostro blog con Internet Explorer 8, 9 o 10 dovete rendere compatibile il vostro modello di Blogger con tale browser. Andate su Modello > Modifica HTML e cercate la riga di codice

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Può essere che non ci sia una riga proprio identica a questa e allora provate a cercare solo la parte finale 'X-UA-Compatible'. Sostituite tale riga con quest'altra

<meta content='IE=8, IE=9, IE=10, chrome=1' http-equiv='X-UA-Compatible' />

e salvate il modello. Nel caso in cui non ci fosse proprio una riga di questo tipo perché avete scaricato il modello da internet allora incollatela semplicemente subito dopo <head>.