Pubblicato il 06/05/13 - aggiornato il  | 7 commenti :

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

bottoni-condivisione-addthis

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>.


7 commenti :

  1. La libreria JQuery ora è la 2.0.0.

    Buon inizio settimana. Spero da te il tempo sia migliore... ;)

    RispondiElimina
    Risposte
    1. @# Infatti l'ho provata la 2.0.0 ma mi sembrava che rallentasse il caricamento della pagina con questo widget e allora ho lasciato la penultima versione

      Elimina
    2. Alla fine sono tornata anch'io alla 1.9.1 perché con la 2.0.0 non funzionava lo scroll infinito.

      Elimina
    3. @# Sono stati certamente troppo frettolosi a rilasciare questa nuova versione di JQuery

      Elimina
  2. per me è una sciocchezza perchè quei social dovrebbero essere messi bene in vista, non nascosti dietro una linguetta che oltretutto ha una scritta share poco leggibile con un brutto stile western, io nello stesso posto del mio blog ho una linguetta di social cinesi proprio perchè so che la maggioranza dei miei visitatori non ha bisogno di cineserie sotto al post e non vuole perdere di vista i social più noti, quindi in quel luogo ci ho messo i "cinesi" semi nascosti. Come alternativa in quel luogo potrei metterci dei pulsanti verticali, ma mai una linguetta simile, toglierebbe visibilità alla condivisione.

    RispondiElimina
  3. ho incollato il codice nel widget html java, ed è in effetti apparso "share", ma non sùccede altro!
    ho ùn mac ed ùso safari. cosa posso fare? grazie

    RispondiElimina
    Risposte
    1. In effetti non funziona più neppure nella Demo. Non so cosa possa essere successo. Forse sono state ritirate le API di AddThis. In ogni caso non dipende dal Mac né dal tuo browser :(
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy