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
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 = '//connect.facebook.net/it_IT/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<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 = '//connect.facebook.net/it_IT/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</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
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 == "item"'>
<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>
<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
Salviamo il modello. Quando apriremo un qualsiasi post visualizzeremo un bottone come questo
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
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
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
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 == "item"'>
<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>
<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 == "item"'>
<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>
<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
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.
Una domanda come faccio a inviare in automatico il mio articolo scritto in blogger nella mia pagina facebook?
RispondiEliminaGrazie
Ci sono mille modi. Scegli quello che più ti piace tra Twitterfeed
Eliminahttp://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...
@#
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/
RispondiEliminaGrazie mille!
Federica
È 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@#
grazie mille Ernesto! velocissimo ed esaustivo come sempre! :)
EliminaFederica
Grazie mille per queste istruzioni Ernesto, ne ho approfittato subito!
RispondiEliminaSei sempre chiaro e preciso, il mio blog si è migliorato tantissimo da quando seguo i tuoi tutorial...grazie mille!
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!!
RispondiEliminaCosa 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
No ok!! Ho risolto per il pulsante se non cliccavo su conferma non andava!!
EliminaCiao! 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/
RispondiEliminaIn 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
Elimina1) Salvare il modello andando su Backup/Ripristino
2) Installare il bottone secondo questa guida
3) Salvare il modello
4) Aprire un post del blog
@#
Provo subito, grazie.
EliminaQuesta 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.
RispondiEliminaIl 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@#
Ah ok, allora per me non va bene perchè io cerco quello del totale follower. Grazie!
EliminaHo 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
RispondiEliminaSe il codice lo hai inserito nella sezione
RispondiEliminab: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
@#
Risolto grazie mille :)
EliminaSi può inserire il bottone vicino ad ogni titolo dei post?
RispondiEliminaSì. Non so come sarà il risultato estetico ma è possibile. L'ultimo codice che determina il posizionamento inseriscilo secondo le istruzioni di questo post
Eliminahttp://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
@#
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!
RispondiEliminaSempre 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!
RispondiEliminaGrazie per la millesima volta. Era sparito il bottone e grazie al tuo aiuto è tornato al suo posto.
RispondiEliminaMitico Ernesto!!!
sei un genio!
RispondiEliminaFANTASTICOOOO ce l'ho fatta!!!!! grazie mille per le precisissime indicazioni!!!!!
RispondiEliminaScusa Ernesto, una domanda. Come faccio a ricevere notifiche o vedere chi ha fatto mi piace ai post? È possibile? Ti ringrazio
RispondiEliminaFacebook 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@#
Questo commento è stato eliminato dall'autore.
RispondiEliminaCiao :)
RispondiEliminaPurtoppo è la milionesima volta che provo a mettere il pulsante seguendo le istruzioni alla lettera, ma non mi esce nessun pulsante :((( come mai?
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@#
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 :)
EliminaNo...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
Eliminagrazie mille, fatto ;)
RispondiEliminaCiao, a me interesserebbe avere sotto al post i like ricevuti su fb relativi allo stesso post...per caso hai il tutorial??? grazie in anticipo
RispondiEliminaSu questo tema ho scritto moltissimi post. Leggi questo
Eliminahttp://www.ideepercomputeredinternet.com/2013/08/mi-piace-facebook-blogger-template.html
se fa al caso tuo
@#
perfetto come sempre...
EliminaOttimo ti faccio sapere ...grazie
RispondiEliminaSalve, volevo capire il motivo per il quale i "mi piace" ottenuti nei post condivisi nella pagina non vengono contati nei post del blog. Mi spiego meglio. Ho scritto un articolo sul blog, l'ho condiviso nella mia pagina fb, ha ottenuto alcuni "like" ma il contatore dell articolo sul blog rimane sempre a 0. Come mai?
RispondiElimina