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
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-->
<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.
- 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.
- Sfondo della barra - background-color:#eeeeee; vedi i codici dei colori.
- Allineamento dei bottoni - Si effettua attraverso il valore del margine sinistro margin-left:4px; e della loro larghezza width:64px
- Se nel modello abbiamo già lo script di Google+ e lo script di Facebook non occorre inserire la parte del codice evidenziata di giallo.
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"
RispondiEliminaCome faccio?
Grazie mille e complimenti!
In pratica vorrei centrare il bottone tweet
EliminaGuarda: http://padova24news.blogspot.it
Grazie
@# 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.
EliminaErnesto 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@# Questo è solo uno dei tanti articoli che ho scritto su questo tema :))
EliminaGrazie mille: davvero molto utile!
RispondiEliminaPer me sei assolutamente indispensabile! Grazie Ernesto!
RispondiEliminaCiao, Ernesto!
RispondiEliminaHo 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 :)
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@#
Ciao Ernesto! Ottimo articolo!
RispondiEliminaHo 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! :)
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@#
Il problema e' che nella barra compare il Like, non lo Share...
EliminaComunque, 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 :)
Mi sopravvaluti :)
EliminaNon posso essere a conoscenza di tutte le tematiche del web :D
@#
Ahhaha! Beh, vuol dire che ho un'ottima opinione di te! :)
EliminaGrazie comunque!
Grazie!
RispondiEliminaCiao 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?
RispondiEliminaComunque, grazie per il widget. :)
Questo widget è flottante e non può essere inserito dentro un post
Elimina@#
e sarebbe possibile metterlo solo all'interno del port? a me finisce anche in homepage e non si capisce a quale post si riferisca :(
EliminaCerto 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
Eliminahttp://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
@#
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
EliminaRettifico: 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!!
Eliminama se invece volessi inserire le icone come queste nella sidebar, ma flottanti? come devo fare?
RispondiEliminagrazie Francesca
Per il fottante basta seguire questo tutorial
Eliminahttp://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
@#
Grazie mille appena inserito e funzionante :-)
RispondiElimina