Pubblicato il 10/06/11e aggiornato il

Come allineare i bottoni di Facebook, Twitter, Google +1 ecc.

L'introduzione del bottone di voto Google PlusOne ha messo un po' in difficoltà i blogger meno esperti visto che i pulsanti importanti da inserire, alla fine o all'inizio del post, sono adesso almeno tre (Facebook, Twitter e appunto Google +1). Non basta quindi metterli uno a sinistra e uno a destra ma dobbiamo giocoforza usare un altro metodo. Mi sono già occupato en passant di un problema simile quando ho illustrato come allineare due o più annunci pubblicitari. Su quella stessa falsariga vediamo come per esempio sia possibile inserire uno accanto all'altro il Mi Piace di Facebook, il bottone ufficiale di Twitter, il pulsante Google +1  e una icona per  contattarci per email. Ecco come potrebbe essere il risultato

bottoni di condivisione allineati in blogger

Il codice da inserire nel modello potrebbe essere come quello seguente

La prima e l'ultima riga servono per mostrare i bottoni solo nei post. I codici dei singoli elementi sono colorati in modo diverso per rendere più semplice la loro individuazione. In sostanza si tratta di postare una cosa simile a questa

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table class="tabellabottoni" cellspacing="0" cellpadding="0">
<tr>   
    <td style="padding-top: 17px;">
   
………. Codice Mi Piace Facebook  ……….

    </td>
    <td style="padding-left: 15px;"> 

 ………. Codice Bottone Twitter …………

    </td>
    <td style="padding-left: 15px;">

……….. Codice Google PlusOne ……….

    </td>
    <td style="padding-left: 15px;">

 ………. Immagine con link che apre il programma predefinito di posta elettronica ……….
    
    </td>
  </tr>
</table>

</b:if>

I valori dei pixel tra i vari bottoni e tra i bottoni e il layout possono essere personalizzati a piacere e, oltre agli attributi padding-top e padding-left,  si possono usare padding-bottom e padding-right con ovvio significato. Ho inserito anche la classe tabellabottoni che può essere utilizzata per allineare i pulsanti tramite i CSS. E' anche possibile distanziare gli elementi inserendo dei valori nei parametri cellspacing, spazio tra le celle e cellpadding, spazio dentro le celle. Questa tabella può essere incollata subito sopra la riga

<div class='post-footer'>

o in altra zona del template. Ricordo che per farlo occorre andare su Design > Modifica HTML e espandere i modelli widget. Nel caso si volesse usare anche i CSS per allineare i pulsanti, occorre cercare la riga

]]></b:skin>

e, subito sopra, incollare un codice simile a questo

.tabellabottoni {margin: 0 auto; border:none; width: 100%;}
.tabellabottoni td {text-align: center; vertical-align: top;}

che serve per allineare i pulsanti al centro e al bottone più in alto. Se si opta per questa configurazione, bisogna eliminare gli stili dalle celle della tabella, cioè bisogna togliere i tag tipo style="padding-top: 17px;". Se invece non si utilizzano i CSS, si può togliere la tag class="tabellabottoni" che in questo caso diventa pleonastica.  Ho pubblicato una demo online in questo post. Ricordo che, con questo metodo, si possono mettere tra l'altro anche due pulsanti di Facebook, cioè il Mi Piace accanto al Consiglia. Se si vogliono inserire più pulsanti, non resta che inserire altre celle del tipo

<td style="padding-left: 15px;">
Codice del bottone     
    </td>

prima di </tr> </table>.





40 commenti :

  1. Ernesto non trovo la seguente riga nel mio template div class='post-footer' come posso fare.grazie

    RispondiElimina
  2. Ernesto sono riuscito ad inserirlo però' non compaiono sotto i post ma confuse come posso fare?
    grazie

    RispondiElimina
  3. sono riuscito a fare tutto pero' il pulsante face non è come il tuo, vorrei quello come hai inserito tu con il numero dei click grazie mille.

    RispondiElimina
  4. @boston blog
    Il bottone che uso io è il box_count
    Leggi qua
    http://www.ideepercomputeredinternet.com/2011/03/come-inserire-e-personalizzare-il-mi.html

    RispondiElimina
  5. grazie fatto ho un ultimo problema:( il bottone me lo posiziona piu lontano non vicino agli altri
    gtrazie

    RispondiElimina
  6. @boston blog
    Diminuisci la larghezza del bottone seguendo le istruzioni del post che ti ho linkato nel precedente commento.

    RispondiElimina
  7. non iresco a far comparire il box count mi esce sempre quello standard

    RispondiElimina
  8. @boston blog
    Nel codice devi inserire
    data-layout="box_count" data-width="55"
    oppure
    layout="box_count" width="55"
    a seconda del codice che hai usato

    RispondiElimina
  9. ho usato questo codice
    https://docs.google.com/document/pub?id=1EsusMJ6hqGCbMOgCWNnCDDHgRXwlfcP_wT7aTun-EEM

    RispondiElimina
  10. @boston blog
    Allora al posto di
    layout=standard metti layout=box_count e al posto di width:530px; metti width:55px;

    RispondiElimina
  11. grazie Ernesto sei grande, un ultima cosa se volessi far comparire i pulsanti nella parte in alto a destra del blog come dovrei fare? grazie

    RispondiElimina
  12. @boston blog
    Non è che possa soddisfare tutte le esigenze anche le più disparate. Ti posso linkare degli articoli
    http://www.ideepercomputeredinternet.com/2010/09/come-inserire-il-bottone-di-facebook.html
    http://www.ideepercomputeredinternet.com/2011/05/inserire-in-una-posizione-fissa-e.html
    Poi grande ... magari! Non arrivo neppure a 1.80 :(

    RispondiElimina
  13. Ciao ernesto ottimo articolo...
    senti per inserire i bottoni accanto alla data dei post nel blog quale stringa devo trovare...riesco ad incollarli accanto al titolo ma non mi soddisfa

    RispondiElimina
  14. @DonnaDelirio
    La riga di codice che introduce la data nel modello si trova espandendo i modelli widget ed è questa
    <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    Poi per incollare la tabella vedi tu, dipende dal modello

    RispondiElimina
  15. Grazie mille!Ora proverò!Sei un genio ;P

    RispondiElimina
  16. Ciao Ernesto, ho fatto la modifica ma il pulasnte facebook, si trova leggermente in basso, ecco un link per vedere, i bottoni si trovano alla fine dell'articolo http://cervelliamo.blogspot.com/2012/03/nuova-mercedes-classe-sportiva-e.html

    RispondiElimina
    Risposte
    1. @GiuseppeSantoro
      Invece di padding-top: 17px; metti un numero più basso, se non si allinea puoi mettere anche un numero negativo tipo padding-top: -5px;

      Elimina
  17. ciaO ernesto ho provato a metterlo ma non mi appare non so perchè. io volevo il bottone di FB Mi PIace e twitter come avete voi in alto a destra tipo "fumetto col contatore", sotto ogni post a sinistra.

    RispondiElimina
    Risposte
    1. @PizzarroDJ
      Prova a seguire questa procedura
      http://www.ideepercomputeredinternet.com/2011/12/come-installare-i-plugin-di-facebook.html
      per il pulsante Mi Piace. Comunque se non vedi niente hai sbagliato qualcosa.

      Elimina
  18. Ciao Ernesto, vorrei inserire i tre bottoni (f mi piace, tweet, g +1) in alto a destra come nel tuo blog! Cosa devo fare?

    RispondiElimina
    Risposte
    1. @Giuliana ...
      Hai scelto il post giusto. Devi solo inserire il codice in Layout > Aggiungi un gadget > HTML/Javascript e non nel modello. Poi le distanze le puoi configurare a piacere.

      Elimina
    2. Grazie mille!! Scusa se approfitto ma se volessi inserire i bottoni sotto il titolo del post, giustificati a sinistra, prima del contenuto del post cosa devo fare?

      Elimina
    3. @Giuliana
      Sposti semplicemente l'elemento pagina in quella posizione

      Elimina
    4. Ok ho inserito i bottoni sotto il titolo del post utilizzando i tuoi codici! Ho un piccolo problema per il bottone di facebook: mentre il tuo consente di esprimere il mi piace e di condividere il contenuto il mio consente solo di esprimere il mi piace! Come posso fare perchè dia anche la possibilità di condividere il contenuto del post? Grazie come sempre!!

      Elimina
    5. @Lacucinaimperfetta
      Prova a usare il codice acquisito con questa procedura
      http://www.ideepercomputeredinternet.com/2011/12/come-installare-i-plugin-di-facebook.html

      Elimina
  19. Grazie Ernesto sono riuscito a fare tutto. Solo ancora una domanda: come mai aprendo il blog, mi si apre in versione "modifica" cioè con vicino ad ogni gadget i pulasnti per modificare?

    RispondiElimina
    Risposte
    1. @Enzo
      Probabilmente perché sei il proprietario del blog ...

      Elimina
  20. Buongiorno Ernesto, piacere di conoscerti.
    Sono arrivata qui perché ho una domanda a cui ancora non ho trovato risposta. Vorrei inserire dei bottoni che rimandino a fb, google+, pinterest... come quelli che hai tu in alto a destra. Bottoni rotondi che mi permettano di fare un po' di pulizia sulla colonna di destra del mio blog. Sicuramente hai la risposta per me, considera però che non sono molto esperta :)
    Grazie per l'attenzione, marina

    RispondiElimina
    Risposte
    1. @Marina
      Per mettere i bottoni come i miei ci vuole un po' di esperienza grafica (solo per aggiungere quello di Pinterest). Il post di riferimento è qui
      http://www.ideepercomputeredinternet.com/2012/03/icone-sociali-con-effetto-3d.html
      Se invece vuoi inserire icone meno complesse vai qui
      http://www.ideepercomputeredinternet.com/2012/03/come-inserire-bottoni-animati-con-i.html

      Elimina
    2. Vado a studiarmi i post, intanto grazie per la tempestività :)

      Elimina
  21. Ciao buongiorno.
    Ho seguito passo passo questo tutorial, e molti altri tuoi, senza avere mai un problema sebbene io capisca poco o nulla di grafica HTML e via dicendo. Mi è successa però una cosa strana, ho 2 blog uno è per provare le varie modifiche grafiche e l'altro è quello ufficiale dove poi inserisco i vari codici.
    Bene, la stranezza è che su quello di prova mi funziona perfettamnete, su quello ufficiale non si vede il contatore di googleplus.
    Ho pure provato a incollare il codice "difettoso" nel blog di prova.... ma funziona.

    Cosa pensi potrebbe essere? ho magari spuntato qualche opzione che mi impedisce la visualizzazione?

    Grazie
    Diego

    RispondiElimina
    Risposte
    1. @Diego
      Prova a leggere questo post
      http://www.ideepercomputeredinternet.com/2011/12/come-tornare-vedere-il-pulsante-google.html

      Elimina
  22. Ciao ernesto, per inserire i pulsanti social allineati come i tuoi dovrei aprire un elemento html ed inserire quel codice scritto sopra?

    RispondiElimina
    Risposte
    1. @vale
      I bottoni in 3D si installano seguendo questo tutorial
      http://www.ideepercomputeredinternet.com/2012/03/icone-sociali-con-effetto-3d.html

      Elimina
  23. Ciao ernesto, ho inserito i pulsanti, ma quello di fb non va, allora l'ho rimpiazzato con questo:



    Ma neanche toccato i width ed height di allinea, grazie

    RispondiElimina
    Risposte
    1. @StefanoBruno
      Il post è datato e quindi può essere che il codice di Facebook ora non sia più funzionante :)

      Elimina
    2. Si, perchè se metto l'iframe classico che genero tramite fb va, ma non riesco ad allinearlo...

      Elimina
  24. Ciao Ernesto, il tuo post (ed i commenti sotto!) mi sono stati davvero utili per realizzare i pulsanti come volevo; solo una cosa non mi piace della resa finale: inserendo i bottoni all'interno di una tabella, pur mettendo a "0" la dimensione del bordo, viene lasciato molto spazio sia sopra che sotto i bottoni; inoltre, mi fa sempre vedere una piccola linea sotto (se può essere utile utilizzo un sito creato con drupal). Hai qualche suggerimento per risolvere queste piccole imperfezioni? Grazie

    RispondiElimina
    Risposte
    1. @# Il padding-top e padding-bottom non c'è nel codice così come il border. Sono probabilmente ereditati dal tuo tema il Drupal.Non conosco quel CMS. Prova a inserire border:none !important! e dei valori negativi di padding, tipo padding-bottom:-5px !important;

      Elimina
    2. Non ci sono riuscita... forse è proprio il tema drupal che imposta questa visualizzazione: pazienza!
      Alla fine non è malaccio, ti ringrazio molto per i tuoi consigli e per la celere risposta!

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.