22 gennaio 2013 Ultimo aggiornamento:

Bottoni di Facebook, Google+ e Twitter inseriti in una barra verticale flottante.

Bottoni di condivisione floottanti per blog su Blogger di Facebook, Twitter e Google Plus.
Ho già presentato alcune barre verticali con i bottoni di condivisione su Facebook, ora però il bottone di condivisione non funziona più perché sono state ritirate le API a tutto vantaggio del bottone Mi Piace. Vado quindi a presentare una nuova versione di tale barra di condivisione limitata ai soli pulsanti di Facebook, Twitter e Google Plus.

La sua installazione non presenta alcuna difficoltà visto che non occorre minimamente modificare il modello. Ciascun bottone aprirà una finestra di dialogo per confermare la volontà di inviare un tweet, di dare un +1 con annesso commento o di pubblicare il link nel nostro Profilo Facebook inserendo opzionalmente anche un commento.



Quando si clicca con il mouse sopra uno dei tre bottoni si aprono queste finestre

condivisione-facebook-twitter-googleplus

Per l'installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il codice

<!--Floating Share Buttons Start - by http://www.ideepercomputeredinternet.com-->
<style type='text/css'>
#floatingbar {position:fixed; bottom:55%; left: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:999;}
#floatingbar .sharebutton {float:left;clear:both;margin:5px 5px 0 5px;}
</style>
<div id='floatingbar' title="Condividi">
<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:4px; width:64px;"><script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script><div class="fb-like" data-layout="box_count"
data-send="false"  data-show-faces="false" expr:href='data:post.canonicalUrl'/></div>
</div><br/><div style="clear: both;font-size:8px;text-align:center;"><a href="http://goo.gl/js5wT" target="blank"><font color="#888">Get Widget</font></a></div></div>
<!--Floating Share Buttons End-->

Si salva l'elemento pagina. Questo apparirà in posizione fissa sulla sinistra del layout. Le personalizzazioni più importanti sono state colorate e riguardano.
  1. Posizione della barra - bottom:55%; left:12px; implica una distanza di 12 pixel dalla parte sinistra e una del 55% dalla parte bassa della pagina. Si possono variare i parametri numerici e si possono inserire top al posto di bottom e right al posto di left.
  2. Sfondo della barra - background-color:#eeeeee; vedi i codici dei colori.
  3. Allineamento dei bottoni - Si effettua attraverso il valore del margine sinistro margin-left:4px; e della loro larghezza width:64px
  4. Se nel modello abbiamo già lo script di Google+ e lo script di Facebook non occorre inserire la parte del codice evidenziata di giallo.




25 commenti :

  1. Ciao Ernesto, ho inserito questo gadget. Ho anche modificato la posizione del mi piace di facebook e del +1 di google+. Non riesco però a spostare più a destra il bottone tweet, in quanto, per questo, non hai inserito "margin-left"

    Come faccio?

    Grazie mille e complimenti!

    RispondiElimina
    Risposte
    1. In pratica vorrei centrare il bottone tweet
      Guarda: http://padova24news.blogspot.it

      Grazie

      Elimina
    2. @# Questo widget mi ha fatto impazzire per realizzarlo e purtroppo le larghezza dei vari bottoni sono diverse quindi centrarli non è semplice e su quello di Facebook non si può usare lo style come con gli altri.

      Elimina
  2. Ernesto finalmente hai risolto un dilemma che mi porto dietro da anni! Infatti nel web è impossibile trovare dei pulsanti mi piace che si riferiscano al singolo post e non all'intero blog, e tu non solo ci sei riuscito ma l'hai reso di una facilità estrema!!! Davvero complimenti e grazie ;)

    RispondiElimina
    Risposte
    1. @# Questo è solo uno dei tanti articoli che ho scritto su questo tema :))

      Elimina
  3. Grazie mille: davvero molto utile!

    RispondiElimina
  4. Per me sei assolutamente indispensabile! Grazie Ernesto!

    RispondiElimina
  5. Ciao, Ernesto!
    Ho installato questo widget, ma ho un problema: se qualcuno aumenta o diminuisce lo zoom, la barra invade il post e le persone non leggono cosa c'è scritto... C'è un modo per bloccare la barra verticale nella stessa posizione? Se non sono stato chiaro, basta andare qui: http://www.gossippiu.com/2013/10/teresanna-pugliese-e-antonio-passarelli.html

    fare zoom + o zoom - e si spiega tutto... Grazie comunque per tutto :)

    RispondiElimina
    Risposte
    1. Tutti i widget di questo tipo per Blogger hanno questo comportamento mentre in alcuni plugin di Wordpress simili è stato invece risolto. Non mi sembra particolarmente rilevante il problema dello zoom quanto il fatto che chi ha una risoluzione di soli 1024 pixel vede parte del testo coperto. Questo d'altra parte è ineliminabile anche per i plugin Wordpress.
      @#

      Elimina
  6. Ciao Ernesto! Ottimo articolo!
    Ho un problema: se aggiungo la barra laterale, i counts del Like di facebook non sono aggiornati a quelli che ho a fine post (uso la sharebar di ShareThis). Per questo ho dovuto rimuovere la tua barra dal mio blog, nonostante mi piacesse un sacco! :(
    Non e' che ci sarebbe una soluzione?

    Grazie e complimenti, sei bravissimo! :)

    RispondiElimina
    Risposte
    1. Può darsi che ci siano script diversi per barra e per bottone. La differenza potrebbe dipendere dal fatto che nella barra si usa lo Share invece del Like. Oppure dipende da ShareThis che registra i Like in modo diverso dagli script ufficiali di Facebook
      @#

      Elimina
    2. Il problema e' che nella barra compare il Like, non lo Share...

      Comunque, girovagando per il web, ho notato che trovare il button Share con il counter nelle floating bar e' molto difficile. Quando il miracolo accade, i counts sono resettati a zero o sono uguali ai Like. Ecco perche' non eliminerei mai la share bar (di ShareThis) in fondo al post, perche' da' una pubblicita' molto migliore allo stesso...Tu hai rilevato lo stesso problema?

      Grazie :)

      Elimina
    3. Mi sopravvaluti :)
      Non posso essere a conoscenza di tutte le tematiche del web :D
      @#

      Elimina
    4. Ahhaha! Beh, vuol dire che ho un'ottima opinione di te! :)
      Grazie comunque!

      Elimina
  7. Ciao Ernesto. Volevo chiederti: è possibile inserire questa barra proprio all'interno di un post? In pratica come i post di "La Repubblica", dove i box sono vicino al testo?
    Comunque, grazie per il widget. :)

    RispondiElimina
    Risposte
    1. Questo widget è flottante e non può essere inserito dentro un post
      @#

      Elimina
    2. e sarebbe possibile metterlo solo all'interno del port? a me finisce anche in homepage e non si capisce a quale post si riferisca :(

      Elimina
    3. Certo che si può fare. Basta inserire una riga di tag condizionali prima dell'inizio del codice e una riga alla fine. I tag condizionali li puoi trovare qui
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      Scegli quello per mostrare un elemento solo nei post
      P.S. La riga finale è sempre la stessa
      @#

      Elimina
    4. però in questo caso il widget è aggiunto non al template ma come HTML/javascript, il tag condizionale non funziona...lo sto cercando nel template ma nulla

      Elimina
    5. Rettifico: ho dato un nome al widget (prima era solo un HTML7) e l'ho ritrovato, con un tag condizionale l'ho messo solo nei post. Grazie mille a te e i tuoi super tutorial!!

      Elimina
  8. ma se invece volessi inserire le icone come queste nella sidebar, ma flottanti? come devo fare?
    grazie Francesca

    RispondiElimina
    Risposte
    1. Per il fottante basta seguire questo tutorial
      http://www.ideepercomputeredinternet.com/2013/04/fixed-widget-blogger.html
      mentre le icone sono quelle 3D che puoi trovare qui
      http://www.ideepercomputeredinternet.com/2012/03/icone-sociali-con-effetto-3d.html

      @#

      Elimina
  9. Grazie mille appena inserito e funzionante :-)

    RispondiElimina

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.