Pubblicato il 25/08/13e aggiornato il

Come inserire e personalizzare il bottone Mi Piace nei post di Blogger modificando il modello.

Come installare in modo semplice i bottoni Mi Piace, Invia e Consiglia di Facebook modificando il template di Blogger e senza creare applicazioni o inserire i metatag.
Continuo nei tutorial per l'installazione dei Social Plugin di Facebook in modo semplificato cioè senza bisogno di creare una applicazione e senza inserire nel template i metatag di Open Graph. Chi volesse usufruire dei plugin di Facebook in modo completo può consultare il post che ho scritto sul tema.

Qualche settimana fa mi ero occupato di come inserire i plugin in un widget di Blogger, con il tutorial su come visualizzare il pulsante Condividi nei post ho invece inaugurato una serie di articoli su come installare i plugin di Facebook direttamente nel template e questo senza bisogno di creare applicazioni specifiche per il nostro sito.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la riga che inizia con <body … . Nei template più recenti avrà questa struttura

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Subito sotto a tale riga si incolla questo div e questo script

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &#39;//connect.facebook.net/it_IT/all.js#xfbml=1&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>

Nel caso in cui preferiate le espressioni anglosassoni sostituite it_IT con en_US. Ovviamente si possono scegliere anche altre lingue modificando il codice relativo in cui la prima parte è data da ISO Code 639_1 mentre la seconda parte dopo l'underscore dal country code.

Sempre su Modello > Modifica HTML si clicca su Vai al widget > Blog1

vai-al-widget-blog1
e si cerca la sezione <b:includable id='post' var='post'> . Si clicca sulla freccetta nera posta a sinistra

sezione-blog1

per poter aprire la sezione e visualizzare tutto il codice. Se preferiamo inserire il bottone del Mi Piace alla fine di ciascun post allora cerchiamo in questa sezione la riga

<div class='post-footer'>


e, subito sopra, incolliamo questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="box_count" data-action="like" data-colorscheme="light" data-send="false" data-font="trebuchet ms"/>
</b:if>

nel modo illustrato in questo screenshot

mi-piace-facebook

Salviamo il modello. Quando apriremo un qualsiasi post visualizzeremo un bottone come questo

bottone-mi-piace

con cui sarà possibile condividere l'articolo nel profilo del navigatore. Cliccandoci sopra si aprirà un campo per digitare anche un commento di testo. Per visualizzare in modo corretto anche la miniatura e il riassunto del post stesso bisogna invece inserire anche i metatag.
 

PERSONALIZZAZIONI DEL BOTTONE MI PIACE

   1) Le due righe colorate di viola sono i tag condizionali che servono per mostrare il bottone solo nei post. Possono essere tolte per visualizzarlo ovunque oppure sostituite o integrate da altre per porre altri vincoli alla visualizzazione del pulsante

   2) Il pulsante Mi Piace ha diversi stili. Nel codice proposto ho optato per il pulsante con contatore verticale con data-layout="box_count". Quello standard prevede che oltre al pulsante siano visualizzati anche gli avatar degli amici che ci abbiano cliccato sopra. Il codice del bottone diventa

<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="standard" data-action="like" data-colorscheme="light" data-width="320" data-show_faces="true" data-send="false" data-font="trebuchet ms"/>

È stato aggiunto il parametro della larghezza data-width="320", che può essere personalizzato, e messo true al posto di false in data-show_faces="true". Se invece si opta per data-layout="button_count" il contatore si visualizzerà in orizzontale in questo modo 

mi-piace-orizzontale

   3) Facebook è venuto incontro anche ai siti con lo sfondo scuro . Mettendo dark al posto di light in data-colorscheme="dark" si vedranno bottoni come questo

bottone-mi-piace-scuro
  
 4) È possibile mostrare anche il bottone Invia insieme al Mi Piace mettendo true al posto di false in data-send="true". In questo caso il bottone prenderà questo aspetto

bottone-invia 
 
5) Si può togliere il tag data-font="trebuchet ms" e in questo modo verranno mostrati i bottoni con la famiglia di caratteri di default di Facebook. Altrimenti si possono scegliere i font tra quelli supportati che sono arial, lucida grande, segoe ui, tahoma, trebuchet ms, verdana. Per esempio per visualizzare i caratteri segoe ui si mette il tag data-font="segoe ui"

   6) Si può allineare il bottone a sinistra o a destra con il tag float mentre si può allineare a sinistra a destra e si può anche centrare con il tag text-align. Ecco un paio di esempi

Allineamento a destra

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float: right;">
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="box_count" data-action="like" data-colorscheme="light" data-send="false"/>
</div>
</b:if>

Bottone centrato

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="text-align: center;">
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="box_count" data-action="like" data-colorscheme="light" data-send="false"/>
</div>
</b:if>
   
   7) Se al posto di data-action="like" mettiamo data-action="recommend" il Mi Piace diventerà Consiglia e l'aspetto del pulsante muterà in questo modo

bottone-consiglia-facebook 
   8) Il punto del layout in cui viene visualizzato il bottone dipende dal posizionamento del secondo codice. Quello proposto fa in modo che il pulsante si veda alla fine dei post. Se invece si vuole vedere all'inizio occorre incollare il secondo codice subito sotto la riga

<div class='post-header-line-1'>

che si trova nella stessa sezione del widget Blog1. Per un posizionamento nel footer si può invece incollare subito dopo la riga

<div class='post-footer-line post-footer-line-1'>

Ci sono tre righe simili rispettivamente con i numeri 1 o 2 o 3 quindi si può calibrare il punto esatto del footer in cui visualizzare il nostro bottone Mi Piace di Facebook. Enjoy.




36 commenti :

  1. Una domanda come faccio a inviare in automatico il mio articolo scritto in blogger nella mia pagina facebook?

    Grazie

    RispondiElimina
    Risposte
    1. Ci sono mille modi. Scegli quello che più ti piace tra Twitterfeed
      http://www.ideepercomputeredinternet.com/2009/11/come-postare-i-commenti-del-blog-su.html
      IFTTT
      http://www.ideepercomputeredinternet.com/2013/01/ifttt.html
      RSS Graffiti
      http://www.ideepercomputeredinternet.com/2011/03/rss-graffiti-per-importare-gli-articoli.html
      NetworkedBlogs
      http://www.ideepercomputeredinternet.com/2009/09/creare-una-pagina-fan-del-blog-ed.html
      e ce ne sono altri...
      @#

      Elimina
  2. Ciao Ernesto, grazie mille per questo tutorial che mi ha facilitato davvero la vita! Sono riuscita senza problemi ad installare il bottone nel mio blog di prova subito sotto il titolo, tuttavia dopo aver cliccato su "Like" viene richiesta una conferma che trovo abbastanza noiosa... Dipende da Facebook? Se vuoi dare un'occhiata il blog di prova è questo: http://lrdcrprova.blogspot.it/
    Grazie mille!

    Federica

    RispondiElimina
    Risposte
    1. È normale che accada con questo sistema semplificato che non richiede la creazione di applicazioni e che quindi non prevede l'inserimento dell'ID dell'amministratore
      @#

      Elimina
    2. grazie mille Ernesto! velocissimo ed esaustivo come sempre! :)

      Federica

      Elimina
  3. Grazie mille per queste istruzioni Ernesto, ne ho approfittato subito!
    Sei sempre chiaro e preciso, il mio blog si è migliorato tantissimo da quando seguo i tuoi tutorial...grazie mille!

    RispondiElimina
  4. Ciao!! E' un po' che ci sbatto la testa!! Ma seguendo le tue indicazioni alla lettera, ok inserisco il bottone, ma quando clicco su mi piace, si apre la box di facebook per condividere un commento, ma dopo 2 secondi sparice e sopratutto non mi appare la x sul pulsante per rimuovere il mi piace!! Cosa che nel tuo blog invece accade!!
    Cosa può essere??

    Inoltre anche seguendo le indicazioni del post per open graph quando condivido il link mi esce come titolo blogger login nel box di condivisione di facebook!!!

    Grazie

    RispondiElimina
    Risposte
    1. No ok!! Ho risolto per il pulsante se non cliccavo su conferma non andava!!


      Elimina
  5. Ciao! Ho seguito scrupolosamente la guida per inserire il bottone mi piace, ma quando visualizzo l'anteprima non compare alcun bottone. Come posso fare per ovviare al problema? Grazie in anticipo per la risposta. Questo è il mio blog http://cook-zone.blogspot.it/

    RispondiElimina
    Risposte
    1. In realtà non è un problema perché il bottone si deve vedere solo nei post quindi non può vedersi nella Anteprima visto che questa mostra solo la homepage. Devi procedere in questo modo
      1) Salvare il modello andando su Backup/Ripristino
      2) Installare il bottone secondo questa guida
      3) Salvare il modello
      4) Aprire un post del blog
      @#

      Elimina
  6. Questa guida funziona, il mi piace si inserisce sotto il titolo. Ma non capisco perchè dice ho zero follower se io ne ho quasi 400 su facebook.

    RispondiElimina
    Risposte
    1. Il numero del bottone non mostra il numero dei followers ma il numero dei Mi Piace ricevuti da quel dato articolo o da quella data pagina
      @#

      Elimina
    2. Ah ok, allora per me non va bene perchè io cerco quello del totale follower. Grazie!

      Elimina
  7. Ho provato sia questa guida che quella più vecchia alla lettera, e il bottone non compare :( e non riesco a trovare la riga <body ... ho solo body e basta... il mio blog è allovermakeup.blogspot.com

    RispondiElimina
  8. Se il codice lo hai inserito nella sezione
    b:includable id='post' var='post'
    dovrebbe funzionare. Se hai la riga < body > (senza spazi) significa che hai un template vecchio ma incollando il codice subito sotto va bene lo stesso
    @#

    RispondiElimina
  9. Si può inserire il bottone vicino ad ogni titolo dei post?

    RispondiElimina
    Risposte
    1. Sì. Non so come sarà il risultato estetico ma è possibile. L'ultimo codice che determina il posizionamento inseriscilo secondo le istruzioni di questo post
      http://www.ideepercomputeredinternet.com/2012/06/come-aggiungere-una-icona-prima-o-dopo.html
      dove al posto del codice dell'icona dell'immagine ci metti quello del pulsante Mi Piace
      @#

      Elimina
  10. Grazie mi è tornato molto utile! Soprattutto è una ficata che mi calcola anche i "mi piace" messi nei post su Facebook prima dell'installazione del bottone!

    RispondiElimina
  11. Sempre grande Ernesto, non facevo modifiche da molto tempo ma mi basta entrare nel tuo blog, cercare un articolo e capisco immediatamente cosa è cambiato e dove trovo il post giusto... unico appunto (ma non per te...) ultimamente ho problemi con chrome, le modifiche fatte utilizzandole non sono state recepite, usando firefox e ripetendo la procedura è andato tutto a posto!

    RispondiElimina
  12. Grazie per la millesima volta. Era sparito il bottone e grazie al tuo aiuto è tornato al suo posto.
    Mitico Ernesto!!!

    RispondiElimina
  13. FANTASTICOOOO ce l'ho fatta!!!!! grazie mille per le precisissime indicazioni!!!!!

    RispondiElimina
  14. Scusa Ernesto, una domanda. Come faccio a ricevere notifiche o vedere chi ha fatto mi piace ai post? È possibile? Ti ringrazio

    RispondiElimina
    Risposte
    1. Facebook permette di visualizzare l'attività solo delle persone con cui abbiamo un vincolo di amicizia sul social. Quindi è impossibile vedere chi ha cliccato sul Mi Piace se non è nostro amico. Per gli amici possiamo visualizzare anche il loro avatar con il bottone standard {vedi punto 2)}
      @#

      Elimina
  15. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  16. Ciao :)
    Purtoppo è la milionesima volta che provo a mettere il pulsante seguendo le istruzioni alla lettera, ma non mi esce nessun pulsante :((( come mai?

    RispondiElimina
    Risposte
    1. Non è che guardi l'Anteprima del modello prima di salvare? Perché il bottone si vede solo nei post e non nella home. Nei commenti precedenti ci sono riusciti. Potrebbe essere anche un problema del tuo template ma credo sia difficile.
      @#

      Elimina
    2. Aaaah.. no l'anteprima non la guardavo, salvavo direttamente. Però effettivamente facevo visualizza blog e non usciva niente, non cliccavo sul singolo post...Ora ci riprovo :)

      Elimina
    3. No...ci ho riprovato ma non funziona...pazienza, ne farò a meno :D Grazie comunque! Il tutorial era esaustivo! Saranno i computer che ce l'hanno con me XD

      Elimina
  17. Ciao, a me interesserebbe avere sotto al post i like ricevuti su fb relativi allo stesso post...per caso hai il tutorial??? grazie in anticipo

    RispondiElimina
    Risposte
    1. Su questo tema ho scritto moltissimi post. Leggi questo
      http://www.ideepercomputeredinternet.com/2013/08/mi-piace-facebook-blogger-template.html
      se fa al caso tuo
      @#

      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.