9 maggio 2012

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

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

barra-verticale-condivisione
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.






39 commenti:

  1. io non ho capito una cosa, ma si condivide l ultimo post? e se io non sono su Facebook? lo lascio lo stesso così??

    p.s.: ho visto che hanno 'aggiustato'l'orario nei commenti incorporati , era ora, è proprio il caso di dire!!!

    RispondiElimina
    Risposte
    1. @Fioredicollina
      Non mi ero accorto dell'orario. Evviva!!!
      Il fatto che tu sia registrata su Facebook non conta. Se un navigatore apre una pagina del tuo blog, potrà condividerla. Se clicca su un pulsante condivide la pagina che ha aperto che potrà essere la homepage, una pagina statica, un pagina delle etichette o naturalmente un articolo. Si visualizzerà un link al tuo post nella Bacheca di Facebook, nello Stream di Google Plus o nella Home di Twitter di colui che ha effettuato la condivisione del post. Prova con i pulsanti di demo. Il contatore muterà a seconda della pagina così come cambiano i contatori che per esempio ci sono nella sidebar di questo blog. Il concetto è lo stesso, varia il tipo e l'aspetto della installazione.

      Elimina
    2. aggiunta!!! grazie!! ti chiedo solo un piccolo favore dato che non sono pratica coi codici se la volessi posizionare nel lato inferiore (ora la vedo a metà) cosa devo variare?

      Elimina
  2. @fioredicollina
    C'e' scritto nel post. Al posto di 25% metti 10% o anche meno.

    RispondiElimina
    Risposte
    1. grazie, ci ho ripensato e l ho tolta....non mi ero accorta che avevo già dei pulsantini per le condivisioni....che sbadata! sorry....

      Elimina
  3. Questo lo aspettavo con ansia, e ti giuro che proprio oggi ci pensavo!
    Bellissimo, grazie mille Ernesto :)
    Una domanda: ingrandendo le dimensioni della pagina il widget rimane fisso rispetto al bordo, anche andando a finire sopra ai contenuti del blog.
    Ho visto che invece in altri siti questo non succede, cioè il pulsante si adatta alle nuove dimensioni della pagina e si sposta in linea con il resto dei contenuti.
    C'è modo di fare questa modifica? Ad esempio impostando un margine tra il testo degli articoli e il widget anzichè tra il widget e il bordo?
    Ti ringrazio tanto,
    un bacione
    Giuliana

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      Puoi ridurre fino a zero la distanza con il margine destro (o sinistro). I bottoni che cambiano dimensione devo dire che mi mancavano :), non li ho mai visti :P

      Elimina
    2. No, forse mi sono spiegata male ^^
      Non è che i bottoni cambino dimensione, ma la loro distanza dagli elementi del blog (ad esempio dal testo) non varia nemmeno se la pagina viene ingrandita o rimpicciolita.
      Per farti un esempio pratico: se io con Explorer provo a zoomare la pagina del tuo demo ingrandendola ad esempio da 100% a 150%, la barra dei pulsanti va a finire sopra alla colonna destra del blog, coprendo in parte gli elementi che sono sotto.
      Ho provato a fare la stessa cosa in un altro sito che ha lo stesso tipo di barra pulsanti, e quando ho zoomato la pagina per ingrandirla la distanza tra la barra e il testo non è cambiata, e la barra stessa non è andata a sovrapporsi al testo.
      Spero di essermi spiegata meglio...

      Elimina
    3. @GiulianaMosetti
      Hanno messo le percentuali invece dei valori assoluti delle misure. E' un lavoro più di cesello, forse si tratta di un plugin wordpress.

      Elimina
    4. Lo sospettavo ;)
      Grazie, Ernesto

      Elimina
  4. Grazie Ernesto! è di una facilità disarmante inserirla!

    RispondiElimina
  5. sicuramente personalizzabili quasi nei minimi dettagli però preferisco addthis perchè ha analytics e tiene il conto dei click

    RispondiElimina
  6. Ciao Ernesto, complimenti per il sito!
    Ti seguo da qualche mese ma questo è solo il mio primo commento.
    Mi piacerebbe mettere sul mio blog (blogger) i 5 pulsanti come hai messo tu in alto a destra (feed, twitter, facebook, google+ e youtube).
    Come si fa? Ho cercato anche sul sito ma non l'ho trovato. Ti ringrazio in anticipo.
    Ciao Daniele

    RispondiElimina
  7. @danielesaisi
    Il post è qui
    http://www.ideepercomputeredinternet.com/2012/03/icone-sociali-con-effetto-3d.html

    RispondiElimina
  8. E se la volessi a sinistra??? complimenti per il sito

    RispondiElimina
    Risposte
    1. @IvanDEFelice
      E' già spiegato nel post
      "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."
      Ovvio significato significa che la barra sarà visualizzata a sinistra e in alto se si mettono i tag top e left al posto di bottom e right

      Elimina
  9. Ciao, ho inserito questa funzione però in questo modo il primo bottone Facebook rappresenta le condivisioni, mentre io vorrei sostituirlo con il mi Piace della mia pagina facebook dove ci sono i fans, come fare?
    So' che devo andare su Facebook>Risorse>Usa i plugin social poi quale devo selezionare tra i tanti ed infine in quale parte del tuo codice posso aggiungerlo?

    RispondiElimina
    Risposte
    1. @Andrea
      Se ci riesci poi lo dici anche a me perché io non ce l'ho fatta :(

      Elimina
  10. In linea generale ci sono riuscito almeno con Chorme, ma con IE non appare il bottone che ho inserito io, si deve però perfezionare la posizione del bottone che ho inserito che non è esattamente centrata, ma non riesco.
    In poche parole ho copiato sotto alla parola Condividi"> presente nel tuo codice, il codice presente da plugin facebook.
    Poi, sempre su Chrome, se tolgo il bottone Facebook già preimpostato nel tuo codice, quello che ho messo io diventa invisibile...
    Ho lasciato il commento tramite ID magari così da poter vedere come è venuto :)

    RispondiElimina
    Risposte
    1. @scuolissima
      Mi sembra che tu abbia fatto un buon lavoro. Su IE ci sono dei problemi ma quello è normale. Fino a poco tempo fa non sarebbe stato possibile inserire il Mi Piace in modo flottante si vede che su FB stanno cambiando qualcosa. Centrare è piuttosto complicata e snervante. Prova con i vari margin e padding.

      Elimina
  11. Bello ma non funziona il tasto "condividi" e non compare nemmeno l'immagine di facebook. Ma bisogna modificare qualcosa?

    RispondiElimina
  12. Premetto che il mio blog è su tumblr e ho semplicemente inserito il codice nel tema

    RispondiElimina
  13. @Arianna+-+-+-
    Dovrebbe funzionare anche su Tumblr ma mi accorgo che non funziona più neppure la Demo che è qui
    http://shadowboxeffect.blogspot.it/2012/05/demo-della-barra-verticale-di.html
    Avevo letto che FB voleva disabilitare il plugin Share a vantaggio del Like e forse lo ha fatto proprio in questi giorni.

    RispondiElimina
  14. Mi sai dire perchè sto benedetto Facebook non riesca piu a farlo vedere???

    RispondiElimina
    Risposte
    1. @IvanDeFelice
      Leggi il commento n°14

      Elimina
    2. Se si volesse mettere il 'like' come si dovrebbe fare?
      Un caro saluto e grazie.

      Elimina
    3. @FrancescoTerzago
      Il like di FB con questo codice non viene più supportato. Se ci saranno delle novità ne farò un altro post

      Elimina
  15. Ernesto, ciao.
    Io sto cercando semplicemente i bottoni che hai tu sulla sidebar (Tweeter, Google+ e Fb) al di sotto di quelli 3d, ma sul tuo sito non li trovo. Praticamente messi sulla sidebar danno il totale delle condivisioni, giusto? Dove li trovo?
    Grazie.

    RispondiElimina
    Risposte
    1. @ Veronica
      Non ci ho fatto un post specifico ma puoi consultare questo
      http://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
      Solo che al post del modello devi inserire il codice su Layout > Aggiungi un gadget > HTML/Javascript

      Elimina
  16. Ciao Ernesto.Ho scaricato dal tuo sito la Barra flottante con i bottoni di Facebook, Twitter e Google+.http://www.ideepercomputeredinternet.com/2012/05/barra-flottante-con-i-bottoni-di.html .Ma sul mio sito http://mauroferrar.blogspot.it/ non compare il bottone di Facebook.Sai darmi una spiegazione. Ciao

    RispondiElimina
    Risposte
    1. @MauroFerrari
      Ti ho già risposto ma leggi il commento n°14

      Elimina
  17. Ernesto in questo widget non funziona più facebook, sai come mai?

    RispondiElimina
    Risposte
    1. @ DaveGamba
      Non funziona più perché Facebook ha tolto le API per il pulsante Share o Condividi. Ho aggiornato questo widget
      http://www.ideepercomputeredinternet.com/2013/01/share-buttons.html

      Elimina
  18. E' possibile inserire la barra solo nella pagine dei post? Ossia non nell'homepage e nelle varie pagine contenenti le anteprime (pezzi con "continua a leggere") dei vari post.
    Grazie

    RispondiElimina
    Risposte
    1. Certamente sì. Occorre usare i tag condizionali
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      Leggi la sezione
      COME USARE I TAG CONDIZIONALI NEI WIDGET
      @#

      Elimina
    2. L'icona di facebook cambia, passa da quella azzurrina a quella blu lunga in base al browser e se si è connessi a facebook. E' possibile far apparire solo quella blu? Altrimenti essendo di lunghezze diverse si sfasa la centratura.

      Elimina
    3. Non sono a conoscenza di questa tematica. Mi informerò
      @#

      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.