23 marzo 2011

Inserire in Blogger una barra verticale per condividere su PlusOne, Facebook, Twitter, Digg, StumbleUpon e Google Buzz.

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. Ho postato in rete questa barra di condivisione che può essere visionata su
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
barra laterale di condivisione
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.
barra di condivisione sui social network posizione
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
elemento pagina pulsanti

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



55 commenti :

  1. Grande!
    Hai trovato un posticino perfetto per questi nuovi bottoncini sul tuo sito! Hihihihihi
    Studiato bene eh? ^.^

    RispondiElimina
  2. @Sarù @ Dolci Creativi Carino eh? Dopo qualche prova sono riuscito a trovare un posticino adatto ^_^

    RispondiElimina
  3. @Ernesto T. Grazie l'ho dovuto modificare ma perchè sto imparando grazie a te.

    RispondiElimina
  4. ma se non ho un account Twitter, non posso inserire il gadget di twitter?

    RispondiElimina
  5. @Alessandro Neri Ti consiglio di procurartelo un account Twitter. In ogni caso il gadget lo puoi mettere lo stesso. Inserisci il tuo nick al post del mio. Chi condividerà i tuoi post con Twitter avrà come mention il tuo username anche se non è connesso a un account (@Alessandro_Neri)

    RispondiElimina
  6. Ho un problema, a livello estetico con il bottone condividi di facebook sotto ai post. In pratica hanno preso la stessa dimensione di quello ora inserito in questo gadget. Come posso risolvere la cosa? Sotto ai post non serve avere il tasto pressato ai lati perchè lo spazio c'è e rende tutto poco bello.

    RispondiElimina
  7. @SE-Gen Per il bottone sotto ai post prova a usare uno di questi codici personalizzati
    http://www.ideepercomputeredinternet.com/2011/03/come-inserire-e-personalizzare-il-mi.html
    Non dovrebbero interferire con questo.

    RispondiElimina
  8. grazie mille provo subito ;)

    RispondiElimina
  9. Grande! Non ci sarei mai riuscita senza leggere questo post, per adesso ho posizionato il widget fuori a sx, non appena riesco ad allargare le colonne lo sistemerò meglio. Dove pesco il codice per condividere via email da google? Grazie, Teresa.

    RispondiElimina
  10. @inSABBIAndo (l'arte) La condivisione via Email è già prevista da Blogger
    http://www.ideepercomputeredinternet.com/2010/12/impostazioni-per-configurare-il-post-su.html
    Devi mettere la spunta a "Post per email"

    RispondiElimina
  11. @Ernesto T.

    wow strepitoso!un altro metodo bellissimo,sono così belli questi metodi di condivisione che hai proposto che sento di aver fatto un abbuffata :)

    RispondiElimina
  12. veramente ottimo, ma nel mio template non sta benissimo! Complimenti, come sempre!

    RispondiElimina
  13. Grazie Ernesto! Ho finalmente deciso di installare la barra di condivisione su alcuni mei blog. Sono riuscito anche a personalizzarla (StumbleUpon non mi interessava). Complimenti per il tuo prezioso lavoro.

    RispondiElimina
  14. Complimenti proprio un bel widget!

    RispondiElimina
  15. E' possibile sapere che stringa inserire per avere un tasto di condivisione per friendfeed ed uno per tuble?

    RispondiElimina
  16. @Pivo
    Tuble non lo conosco. Per FriendFeed prova con questo codice
    <div class='bottoni'>
    <a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://friendfeed.com/share/bookmarklet/javascript');document.body.appendChild(e)})())" onclick="return clicked(event)"><img style="margin-bottom:-5px" src="https://lh4.googleusercontent.com/-n__ainErox0/TjmOWRBtFFI/AAAAAAAAUHM/spjb5FmMWuw/friendfeed.png" alt="Condividi su FriendFeed"></a>
    </div>
    Eventualmente ridimesiona l'immagine

    RispondiElimina
  17. Prova anche a togliere
    style="margin-bottom:-5px"

    RispondiElimina
  18. Grazie mille, dovessi trovare anche la stringa per Tumblr fammi sapere grazie

    RispondiElimina
  19. @Pivo
    Ahh Tumblr, avevi scritto Tuble ;)

    RispondiElimina
  20. Ciao,
    innanzitutto volevo farti i complimenti per il tuo sito: dove trovi il tempo per scrivere tutti quei post? :)
    Poi, scusandomi per il pasticcio che ho fatto con i 2 commenti precedenti, volevo chiederti un paio di cose. A me piacerebbe avere il bottone di Facebook uguale a quello di Twitter e Google+1. Vorrei anche diminuire la larghezza del bottone di Twitter. Puoi aiutarmi?
    Ti ringrazio in anticipo!

    RispondiElimina
  21. @The Bol ...
    Non mi sembra di scrivere tanti post. Al massimo sono due al giorno, raramente sono arrivato a tre. Ci sono blog che ne postano anche più di dieci. Mi chiedo come fanno loro ;)
    I bottoni dei social network sono acquisiti direttamente da loro e quindi al massimo si può scegliere tra le varie opzioni di grandezza che offrono. Non sono delle semplici immagini che si possono ridimensionare a piacere ;(

    RispondiElimina
  22. Dicevo che ne scrivi tanti perché leggevo la lista dei widget per Blogger (sono nuovo) e sembrava non finire :D
    Ho capito che i bottoni non possono essere modificati, ma il tasto "Mi piace" di Facebook che hai sotto ogni tuo post potrei inserirlo nella barra? E Google Plus ne ha uno?
    Grazie :)

    RispondiElimina
  23. @The BolTom Post 22
    Sono quattro anni che bloggo ... quindi di post ne ho scritti ;)
    Guarda se ti piace questa barra con tutti i bottoni
    http://www.ideepercomputeredinternet.com/2011/06/barra-con-i-pulsanti-di-facebook-google.html
    oppure prova a inserire tutti i pulsanti sotto i post come nel mio blog
    http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html

    RispondiElimina
  24. Scusa se rompo,
    a me interessava avere il codice del bottone di Facebook che hai sotto i post (quello con il numerino), così da inserirlo nella barra laterale per averlo uguale agli altri.
    Grazie ancora :)

    RispondiElimina
  25. @ The BolTom Post
    Allora dillo subito ;)
    Il codice è questo
    <div id='fb-root'/><fb:like data-layout='box_count' data-send='false' data-show-faces='false' data-width='55' expr:href='data:post.url'/>
    però per inserirlo devi seguire queste istruzioni
    http://www.ideepercomputeredinternet.com/2011/06/come-installare-tutti-i-plugin-di.html
    riguardo alla prima parte.
    Se vuoi che si veda solo nei post devi insererire dei tag condizionali
    http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

    RispondiElimina
  26. Buonasera...avrei un piccolo problema con il gadget. L'ho inserito correttamente sul mio blog proprio come dici tu, però il bottone di facebook si sdoppia o addirittura se ne creano 3 sovrapposti. Come si risolve questo problema?

    RispondiElimina
    Risposte
    1. @M.P.
      Non ti saprei dire perché è cosa che non avevo mai sentita. Forse dipende dal fatto che avevi già aggiunto altri script di facebook nel modello.

      Elimina
  27. Ho solo il likebox come quello in questo blog. Il risultato che ottengo è questo : http://img710.imageshack.us/img710/3185/fttw.png
    Poi avrei anche un'altra curiosità: io ho creato il template con l'ausilio di Artisteer,fatto stà che se abilito i bottoni di condivisione di default di blogger non riesco a visualizzarli e nemmeno altri bottoni esterni riesco a visualizzare, tranne la barra flottante.

    RispondiElimina
    Risposte
    1. @M.P.
      Se hai un template creato con Artisteer allora si spiega tutto. Bisogna tenerlo così com'è perché non vi funziona quasi nulla

      Elimina
  28. Ciao Ernesto, innanzitutto grazie per tutto quello che condividi!
    Poi, volevo chiederti come si fa a cambiare l'immagine delle icone.

    Alysha

    RispondiElimina
    Risposte
    1. @Alysha
      Le immagini delle icone sono quelle dei vari servizi ci arrivano dai loro server mediante dello script.

      Elimina
    2. Grazie per le info.
      Ora ho un altro piccolo problemuccio ... grrrrr!!!
      La lightbox delle immagini dei post funziona in maniera anomala.
      Ossia, cliccando sull'immagine si ingrandisce visualizzandola nella lightbox, ma non si vedono più le anteprime di tutte le foto del post in basso, e poi, non si vede più nemmeno il pulsante nell'angolo in alto a destra per chiudere la schermata e tornare a leggere il post.
      Help me please.

      Elimina
    3. @Creazioni ...
      Mi sa che sia il classico caso di incompatibilità tra due diversi tipi di javascript e c'è poco da fare.

      Elimina
  29. Ernesto,
    io vorrei tenere solo il pulsante di Twitter e quello di Google +, e sostituire il pulsante Share di Facebook con il pulsante Mi piace, che poi permette anche la condivisione.
    Però ho qualche problemino nell'eliminazione del pulsante Share di Facebook e nell'aggiunta di quello Mi piace.
    Non capisco se basta che aggiungo il codice del Mi piace e tolgo quello del pulsante Share, o se devo eliminare qualcosa anche nella parte superiore del codice, dove vedo tutti quei riferimenti del tipo fb_share_count_top e FBConnectButton_Small.
    Ti ringrazio.

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      Puoi togliere il pulsante Share semplicemente eliminando il codice colorato di blu. I CSS li puoi lasciare anche stare. Non è però possibile con questo metodo sostituirlo con il Mi Piace.

      Elimina
    2. Ah, ecco perchè il Mi piace non si vedeva... ^^
      Ho visto che altri siti hanno i tre pulsanti che vorrei mettere io, provo a vedere se riesco a scoprire come si fa a metterli.
      Posso chiederti una piccola precisazione, dal momento che sono un po' ignorante per quanto riguarda Facebook & co.?
      Che differenza c'è tra il pulsante Mi piace e il pulsante Share? Intendo dire, a livello pratico qual è il pulsante più utile tra i due? Basta mettere uno dei due o è meglio averli entrambi?
      Grazie.

      Elimina
    3. @GiulianaMosetti
      Con il mi piace si condivide e si può aggiungere un commento, con lo share credo si possa solo condividere (non sono sicuro). Un bottone per me basta e avanza ^_^

      Elimina
  30. Salve. Io ci ho provato in tutti i modi. Sul mio blog (http://danimarcapertutti.blogspot.it/) sembra istallata ma quando condivido su twitter o facebook il numero non cambia. Qualcuno mi aiuta? :-)

    RispondiElimina
    Risposte
    1. @DanishLove
      E' vero il contatore su Twitter e Facebook non funziona più però i post li condivide lo stesso. Posso vedere di risolvere nei prossimi giorni ma senza impegno.

      Elimina
    2. Fantastico! Continuerò a seguirti :-)

      Elimina
  31. ciao! :)
    ottimo spiegone come sempre! :P
    per caso c'è la possibilità di aggiungere il bottone Google +???
    se sì...dove posso recuperare il relativo codice? :)
    grazie
    ciao :)

    RispondiElimina
    Risposte
    1. @Supergerod
      Il codice di Google+ c'è già :)

      Elimina
  32. Ciao Ernesto, come mai il contatore delle condivisioni fb è scomparso dalla barra verticale?
    Inizialmente fungeva alla perfezione.
    Attendo tue

    RispondiElimina
    Risposte
    1. @Daniele
      Nei giorni scorsi sono spariti i contatori di Facebook da tutti i blog per un certo periodo. Potrebbe tornare tutto alla normalità. Ho provato a condividere con la barra di demo e funziona.

      Elimina
  33. sì, la condivisione è ok. Attendiamo che i contatori ricompaiano.
    Grazie
    Alla prossima

    RispondiElimina
  34. Ciao Ernesto,mamma mia,tieni un blog con i fiocchi :)Complimenti ....

    Ho un problemino pero' su questo widget,non capisco come mai quando clicco sul bottone per condividere non esce fuori l'immagine di anteprima e la descrizione ,e ti diro' di piu' ,spunta alla fine dell'indirizzo la parola "null" ...come posso risolvere ???

    PS: a me interessa solo il bottone di Facebook ,gli altri li ho praticamente tolti

    RispondiElimina
    Risposte
    1. @♥Love♥
      Pare che Facebook abbia disattivato, o stia per farlo, il bottone Condividi (Share) a vantaggio del Mi Piace ed è per questo che non funziona più tanto bene.

      Elimina
  35. Ciao !
    Forse lo avrai gia detto...ma i tre pulsanti come ituoi ( twitter - Google+ - Facebook ) con nuvolina sopra dove li trovo ? :)

    Grazie e ti faccio i complimenti per il tuo blog ( o sito ? ) ;)

    RispondiElimina
    Risposte
    1. @FedetailsFranco
      Non vedo la nuvolina ma i tre bottoni sono quelli ufficiali di Facebook, Twitter e Google Plus. Vai qui
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      ci dovresti trovare tutti i link

      Elimina
  36. Veramente carino ma manca linkedln!

    RispondiElimina
  37. Buonpomeriggio Ernesto,
    sto cercando il codice di una piccola barra social (con il pulsante per fare mi piace, +1 e twittare) da porre sotto il titolo di ogni post.
    Tipo questa: http://www.10people.net/blog/wp-content/uploads/2011/06/screen-shot-2011-06-24-at-113753-am.png

    Mica hai il codice per una barra simile?

    Grazie 1000 in anticipo!

    RispondiElimina
    Risposte
    1. Barre orizzontali di condivisione ho solo questa
      http://www.ideepercomputeredinternet.com/2013/02/bottoni-facebook-twitter-googleplus.htmlhttp://www.ideepercomputeredinternet.com/2013/02/bottoni-facebook-twitter-googleplus.html
      se ben ricordo. Mi pare però diversa da quella che cerchi
      @#

      Elimina
    2. Non è quella, grazie lo stesso. :(

      Elimina
  38. Grazieeeeeee!!! Stavo impazzendo! Ottima descrizione e suggerimenti!
    Approfitto di chiederti se mi puoi dire come si possono visualizzare i pulsanti di condivisione anche sugli smartphone e tablet. Sul blog si vedono da pc, ma se accedo al mio sito da uno smartphone non si vedono. Mi potresti aiutare per favore? Grazie Moira

    RispondiElimina
    Risposte
    1. I widget possono essere visualizzati anche su tablet e smartphone se sono inseriti nell'area dei post e non nelle sidebar. Prova a seguire queste istruzioni
      http://www.ideepercomputeredinternet.com/2013/10/blogger-versione-mobile-desktop-personalizzare-editor-html.html
      Dubito però che questa barra possa essere visualizzata anche da mobile a meno che uno non richieda la versione desktop tramite il browser del tablet o del cellulare
      @#

      Elimina

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