Come inserire il pulsante del Like (Mi Piace) di Facebook nel layout o nel modello di un blog di Blogger con o senza una applicazione specifica per il sito e come evitare il bottone Conferma.
Dopo aver mostrato come creare una applicazione di Facebook per siti web e aver illustrato come installare i metatag e lo script SDK passo a trattare i singoli plugin partendo dal bottone del Mi Piace che può essere inserito in una sidebar o anche nel modello.
Tale pulsante può essere mostrato con contatore o senza contatore e in più stili. Ci sono poi sostanzialmente due sistemi per implementarlo vale a dire senza creare una applicazione oppure creando una applicazione per il sito e utilizzando lo script SDK. Senza applicazione gli utenti dovranno svolgere due azioni per condividere il contenuto. Infatti dopo il primo click dovranno andare nuovamente su Conferma per dare il Mi Piace. Con l'applicazione invece basterà un solo click e con il secondo si potrà anche aggiungere un commento. C'è da dire comunque che anche con l'applicazione la scomparsa del bottone Conferma non sarà immediata. In questo post cercherò di prendere in considerazione tutte le opzioni possibili.
COME INSTALLARE IL MI PIACE SENZA APPLICAZIONE
Se volete fare le cose veloci si può incollare un codice per il Mi Piace senza ulteriori complicazioni.
INSTALLARE IL MI PIACE IN UNA SIDEBAR
Anche per una installazione senza applicazione Facebook specifica per il sito bisogna però andare sempre su Modello > Modifica HTML e cercare la riga seguente
<body expr:class='"loading" + data:blog.mobileClass'>
Subito sotto si incolla questo codice
<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>
dove it_IT è la scelta per la lingua italiana (en_US per quella inglese americana). Dopo aver salvato il modello si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla il codice
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="box_count" data-action="like" data-colorscheme="light" data-send="false"/></div>
Si salva e si posiziona nella sidebar o nel footer. Avrà questo aspetto
PERSONALIZZAZIONI DELLO STILE
I parametri colorati del secondo codice possono essere modificati per cambiare l'aspetto del bottone. Se al posto di data-layout="box_count" mettiamo data-layout="standard" o data-layout="button_count" o data-layout="button" visualizzeremo il bottone rispettivamente così
Nel caso dello stile standard possiamo anche aggiungere il parametro data-width="320" per configurare la larghezza del bottone del Like.
Se al posto di data-action="like" mettiamo data-action="recommend" l'aspetto muterà così
con il Consiglia al posto del Mi Piace. Se sostituiamo data-colorscheme="light" con data-colorscheme="dark" avremo uno stile del bottone più adatto a blog con layout scuro (deprecato). Infine se al posto di data-send="false" mettiamo data-send="true" il bottone avrà questo aspetto
con l'opzione di Condividi oltre che il Mi Piace.
INSTALLARE IL BOTTONE MI PIACE NEL MODELLO
Fermo restando la prima parte del codice da installare nel template invece di andare su Layout per aggiungere un widget potremo inserire il Like di Facebook direttamente nel modello. Si va su Modello > Modifica HTML e si cerca questa riga di codice
<b:includable id='post' var='post'>
Si clicca sulla freccetta nera posta alla sinistra per visualizzare tutto il codice. Si scorre il template verso il basso fino a trovare la riga <div class='post-footer'>, e subito sopra a questa si incolla
<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'></div></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'></div></b:if>
dove la riga iniziale e finale sono due tag condizionali che impongono la visibilità dei bottoni solo nei post. La parte evidenziata di giallo è il codice del bottone che può essere personalizzato come già visto. Dopo aver salvato il modello alla fine di tutti i post si visualizzerà il bottone del Like
POSIZIONAMENTO BOTTONE NEL LAYOUT
Se preferite visualizzare il bottone subito sopra ai contenuti del post vale a dire subito sotto il titolo allora il codice va incollato subito sopra alla riga <data:post.body/> e il risultato sarà il seguente
Se lo preferiamo spostato sulla destra allora il codice dovrà essere integrato in questo modo
<b:if cond='data:blog.pageType == "item"'>
<div style="float: right; margin-left:20px;">
<div class='fb-like' expr:data-href='data:post.canonicalUrl' data-layout='box_count' data-action='like' data-colorscheme='light' data-send='false'></div>
</div>
</b:if>
<div style="float: right; margin-left:20px;">
<div class='fb-like' expr:data-href='data:post.canonicalUrl' data-layout='box_count' data-action='like' data-colorscheme='light' data-send='false'></div>
</div>
</b:if>
con questo risultato
Sostituendo right con left e margin-left con margin-right il bottone si visualizzerà sulla sinistra dei contenuti del layout. Si può settare la distanza tra bottone e contenuto proposta in 20 pixel.
Per centrare il pulsante si usa invece il codice seguente
<b:if cond='data:blog.pageType == "item"'>
<div style="text-align: center; margin-bottom:5px;">
<div class='fb-like' expr:data-href='data:post.canonicalUrl' data-layout='box_count' data-action='like' data-colorscheme='light' data-send='false'></div>
</div>
</b:if>
<div style="text-align: center; margin-bottom:5px;">
<div class='fb-like' expr:data-href='data:post.canonicalUrl' data-layout='box_count' data-action='like' data-colorscheme='light' data-send='false'></div>
</div>
</b:if>
che funziona anche per spostare a sinistra o a destra sostituendo center con left o right. Oltre al margin-bottom può essere inserito anche il margin-top per distanziare in basso e/o in alto.
VISUALIZZARE IL PULSANTE ANCHE NELLA VERSIONE MOBILE
Per vedere il bottone del Mi Piace anche da dispositivo mobile dobbiamo incollare un secondo codice nella sezione del modello per il mobile. Si cerca quindi la riga
<b:includable id='mobile-post' var='post'>
e si clicca eventualmente nella freccetta nera posta a sinistra per visualizzare tutto il codice della sezione. Si scorre il codice verso il basso in cui trovare le righe <div class='post-footer'> o <data:post.body/> per poi incollarvi lo stesso codice subito sopra. Il risultato ottenuto con lo strumento Screenfly sarà simile il seguente
INSTALLARE IL LIKE DI FACEBOOK CON L'APPLICAZIONE
Con l'installazione appena vista dopo che il navigatore avrà cliccato sul bottone visualizzerà
il messaggio Conferma in cui cliccare nuovamente per condividere il post. Per evitare agli utenti questa scocciatura va creata una applicazione Facebook specifica per il sito seguendo le istruzioni dell'articolo. Dovremo quindi incollare nel modello di Blogger subito sotto la riga
<body expr:class='"loading" + data:blog.mobileClass'>
un codice come il seguente
<!-- Facebook SDK Start -->
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : '116894568356960',
xfbml : true,
version : 'v2.5'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook SDK End -->
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId : '116894568356960',
xfbml : true,
version : 'v2.5'
});
};
(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/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<!-- Facebook SDK End -->
dove il dato fondamentale è l'ID della applicazione evidenziato di giallo. Gli altri codici sia per installare il Mi Piace in una sidebar sia per installarlo nel modello rimangono gli stessi così come rimane la stessa la posizione e la modalità di installazione. Se la creazione della app è stata fatta senza errori e se il codice è stato implementato nel modello almeno non sarà necessario
cliccare due volte sul bottone. La condivisione sarà immediata e si aprirà una finestra popup in cui inserire eventualmente un commento per poi andare su Aggiungi un commento. All'inizio non sarà così perché Facebook utilizza il Confirm Button per prevenire lo spam ma dopo che tale pulsante Conferma è stato utilizzato da un certo numero di utenti non apparirà più.
Ciao Ernesto vado a provare perchè la richiesta di conferma si vede ancora
RispondiEliminaCome ho scritto alla fine del post bisogna aspettare qualche giorno e qualche Mi Piace da parte dei lettori prima che scompaia il Conferma. Se cambi il codice i giorni di attesa inizieranno a decorrere nuovamente
Elimina@#
Ernesto come faccio per installare il like button di google allineato a quello di fb come hai tu praticamente affiancati
RispondiEliminaDevi usare una tabella. Il codice di questo post prendilo come esempio
Eliminahttp://www.ideepercomputeredinternet.com/2011/06/come-allineare-i-bottoni-di-facebook.html
Poi puoi usare il codice di una tabella di una riga e 2, 3 o 4 colonne
http://www.ideepercomputeredinternet.com/2011/10/come-inserire-nel-blog-una-tabella-di.html
per allineare bottoni, immagini, ecc
@#
Ciao Ernesto, ho installato il like di facebook con l'applicazione ma non è visibile nella versione mobile. Nel mio blog non c'è la riga body expr:class='"loading" + data:blog.mobileClass' quindi quando ho installato lo script SDK l'ho inserito semplicemente sotto body. Come posso rendere visibile il tasto like anche sui cellulari e dispositivi mobile? Grazie mille per il tuo aiuto.
RispondiEliminaVa bene comunque aver inserito il codice sotto < body >. Il tuo modello probabilmente è vecchio. Non si vede nel mobile perché non hai posizionato bene il codice per il mobile inserendolo nella sezione
Elimina< b:includable id='mobile-post' var='post' >
come indicato nel post
@#
Scusami ma non leggo in quale post è indicato il corretto procedimento... Grazie.
EliminaIndicato in questo post nella sezione
EliminaVISUALIZZARE IL PULSANTE ANCHE NELLA VERSIONE MOBILE
@#
Quando dici "per poi incollarvi lo stesso codice subito sopra", a quale codice ti riferisci? Ho provato con questo:
Elimina< 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' >< /div >< /b:if > ma nella versione mobile non compare il like button.
Forse il mio modello è troppo vecchio?!
In alcuni modelli ci sono due occorrenze di < data:post.body/ > nella stessa sezione quindi il codice che hai postato nel commento precedente va postato due volte. Prova a incollarlo nella parte bassa del post cioè subito sopra a < div class='post-footer' >
Elimina@#
Utilissimo! Almeno questo sono riuscita al primo colpo xd
RispondiEliminail contatore dei Like di Facebook non funziona più. Qualcuno sa perché?
RispondiEliminaGiusto ieri ho avuto una conversazione su questo tema
Eliminahttp://www.ideepercomputeredinternet.com/2017/07/pec-indirizzi.html?showComment=1499929665070#c2588889019836495873
Sei la seconda che me ne parla. Comincio a pensare che ci sia qualcosa di reale. La persona con cui ho conversato ieri si è rivolta anche a Facebook Developer e pare siano consapevoli del bug. Qui pare tutto OK
@#
Ciao Ernesto, ma la versione dark del pulsante non esiste più? Ho provato a sostituire "dark" a "light" ma resta invariato. Non ci sono altri modi per modificarlo? Grazie.
RispondiEliminaAnche io ho avuto la stessa difficoltà. Non mi risultano comunicazioni al riguardo sta di fatto che il pulsante dark non si vede più
Elimina@#
Ti ringrazio per l'attenzione ma davvero non capisco di che si tratta. Confesso di usare blogspot solo da un mese ma no ho apportato modifiche negli ultimi giorni. ho notato che è sparito il conteggio anche di alcuni post precedenti ma non di tutti. Grazie comunque.
RispondiElimina