Cerca nel blog

On line ora:

utenti collegati

Lettori fissi

Translate

Premium

Ciao, sono lo sviluppatore di questo sito e se vuoi sapere chi sono, puoi leggere la mia scheda qui.

Leggi la scheda

oppure puoi fare like sulla mia pagina FB:

CONSIGLIA

Archivio blog

Ricordati di farti fan, è il più bel ringraziamento.

Se ti piace condividi

INSERIRE I PULSANTI SOCIALI PER SITI E BLOG IN UNA SOLA RIGA.

PULSANTI PER CONDIVIDERE SUI SOCIAL NETWORK
I pulsanti dei social network sono diventati davvero importanti per la vita di un blog e di un blogger serio, l’utente è sempre più propenso a condividere un' articolo interessante e letto, con i propri amici senza dover "sbattersi" a destra e manca per trovare modo di condividerlo senza fatica.

Allora tutte le piattaforme hanno introdotto i pulsanti sociali per la condivisione, ma al quanto deboli di spiegazioni e poveri di metodi di variazioni che a parer mio andrebbero modificate un pochino per dar modo ai blogger non esperti di inserirli senza nessun problema.
In un blog, normalmente la grafica d' impatto (a prima vista) fa la maggior parte del lavoro, avere i pulsanti uno sopra l’altro non è per nulla bello e prende spazio prezioso per la pagina stessa, la rende disordinata e di cattiva navigazione per l' utente.

Ma si può far sì che i pulsanti stiano tutti su un’unica riga.

Per fare questo ho preparato una struttura che mostra i pulsanti su una sola riga, qui sotto puoi vedere l' esempio e provarlo:


nelle dimensioni medie (quella di un normale tasto Mi piace di facebook per capirci).
Basta copiare e incollare questo codice nella zona del blog dove vuoi che compaiano.

CARATTERISTICHE DELLA PAGINA:

La caratteristica di questo semplicissimo codice stà nel fatto che funzioni su qualunque piattaforma, la pagina deve avere come larghezza minima 410px in larghezza mentre in alterzza dove posizionerai il codice almeno 60px altezza, il colore di sfondo della pagina può essere qualsiasi, infatti il codice è di colore neutro.
Nient' altro.

Passiamo al codice. 
La prima cosa da fare, se non lo hai già fatto in precedenza è 
incollare il primo codice nella sezione <head>, del tuo blog o sito:

SE USI WORDPRESS: il codice lo devi incollare Widget>header.php 
dovrai incollarlo in cima dentro i tag <head> e </head>.

SE USI BLOGGER: il codice lo devi incollare appena sotto il tag 
di apertura <head> che trovi in MODELLO>MODIFICA MODELLO>(SPUNTA Espandi i modelli widget)> CERCA IL TAG <head> all' 
inizio del codice e subito sotto incolli il codice.

Questo serve per aprire 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="" 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"/>


Analizzando la struttura troveremo:
  1. 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).
  2. 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 
  3. il br  finale serve per annullare tutte le proprietà float, così da non scombussolare gli elementi successivi.

Condividi:

Share |

Sponsor

Guadagno facile col tuo facebook o sito...