Come inserire i pulsanti Mi piace, Google +1 e Tweet su una sola riga

Pubblicato da Roberto Iacono il 28/07/2011 in Facebook, WordPress |

102 condivisioni

I pulsanti dei social network sono diventati davvero importanti per la vita di un blog, l’utente è sempre più propenso a condividere un buon post con i propri amici senza fatica grazie ai pulsanti “sociali”.
In un blog, anche la grafica vuole la sua parte, avere i pulsanti uno sopra l’altro non è per nulla bello se questi vengono messi a fondo post, ma la cosa migliore (a mio parere) sarebbe disporre i pulsanti Mi piace, +1 e Tweet tutti su un’unica riga.
Per fare ciò ho preparato una struttura che mostra i pulsanti su una sola riga e nelle dimensioni medie (quella di un normale tasto Mi piace di facebook per intenderci). Basta copiare e incollare questo codice nella zona del blog dove vuoi che compaiano, ma dovrai avere a disposizione circa 410px in larghezza, altrimenti i pulsanti potrebbero disporsi su più righe.
La struttura mostrerà i pulsanti nel seguente ordine: Mi piace – Tweet – +1

Sponsor

Per prima cosa (solo se non è stato già fatto in precedenza) occorre copiare e incollare questo codice prima della chiusura del codice </head> del codice html del tuo post (se usi wordpress lo trovi in header.php), che serve per il pulsante +1 di Google:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'it'}
</script>

Ora arriva il codice vero e proprio che mostra i pulsanti su un’unica riga:

<div style="float:left;"><script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script><fb:like href="<?php the_permalink(); ?>" width="170"  layout="button_count"  send="true" font=""></fb:like>
</div>

<div style="float:left;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="tuo-username-twitter" data-lang="it">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<g:plusone size="medium"></g:plusone>
</div>
<br clear="all"/>

Analizziamo la struttura:

viene inserito il pulsante mi piace di facebook all’interno, con float a sinistra. E’ impostato per visualizzare il pulsante send (se vuoi disabilitarlo metti send=”false”), e viene definita la larghezza width=”170px” per mantenere una distanza fissa dal tasto che lo segue, altrimenti la prima volta che viene premuto il Mi piace, esce il numero del conteggio dei mi piace e va a sovrapporsi al pulsante che lo segue (in questo caso il tasto tweet).
viene creato un nuovo div e viene inserito sia il pulsante tweet, sia il pulsante +1. Questo perchè il pulsante +1, normalmente assume una posizione più alta rispetto agli altri due pulsanti, ed inserendolo nel div assieme al tweet si posiziona alla stessa altezza (o almeno così è successo con me). Nel pulsante tweet devi sostituire tuo-username-twitter con… il tuo username di twitter
il br finale serve per annullare tutte le proprietà float, così da non scombussolare gli elementi successivi.

Che te ne pare?

Sponsor

VUOI CREARE IL TUO SITO O BLOG WORDPRESS?

HOSTING

Scegli uno tra i migliori hosting per WordPress

Hosting

GRAFICA

Scegli uno tra i migliori temi WordPress professionali

Grafica

GESTIONE

Guide e risorse per gestire il sito WordPress a 360°

Gestione

EMAIL NEWSLETTER

Vuoi ricevere i miei ultimi articoli
comodamente nella tua email? È gratis!
Ben 741 persone lo stanno già facendo!

Roberto Iacono

con le dita sempre in costante, frenetico movimento sulla tastiera… vengo spesso trascinato e catturato “in rete” per colpa delle mille idee che mi girano per la testa (prima o poi troverò quella giusta)… dal futuro incerto (nonostante una laurea, e chi non lo è?..siamo in tanti!) .. credo fortemente nella condivisione della conoscenza!