Pubblicato il 05/03/16e aggiornato il

Come installare e personalizzare il Mi Piace di Facebook nei blog su Blogger.

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='&quot;loading&quot; + 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 = &#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>

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

mi-piace-facebook

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"data-layout="button_count" o data-layout="button" visualizzeremo il bottone rispettivamente così

like-facebook

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ì

bottone-consiglia

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

pulsante-condividi-facebook

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 == &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'></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 

bottone-mi-piace-modello

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

posizionamento-alto-layout

Se lo preferiamo spostato sulla destra allora il codice dovrà essere integrato in questo modo

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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

bottone-mi-piace-destra

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 == &quot;item&quot;'>
<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


bottone-like-facebook


INSTALLARE IL LIKE DI FACEBOOK CON L'APPLICAZIONE


Con l'installazione appena vista dopo che il navigatore avrà cliccato sul bottone visualizzerà

conferma-facebook

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='&quot;loading&quot; + 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 -->

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

condividere-post-facebook

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ù.




11 commenti :

  1. Ciao Ernesto vado a provare perchè la richiesta di conferma si vede ancora

    RispondiElimina
    Risposte
    1. Come 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
  2. Ernesto come faccio per installare il like button di google allineato a quello di fb come hai tu praticamente affiancati

    RispondiElimina
    Risposte
    1. Devi usare una tabella. Il codice di questo post prendilo come esempio
      http://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
      @#

      Elimina
  3. 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.

    RispondiElimina
    Risposte
    1. Va 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
      < b:includable id='mobile-post' var='post' >
      come indicato nel post
      @#

      Elimina
    2. Scusami ma non leggo in quale post è indicato il corretto procedimento... Grazie.

      Elimina
    3. Indicato in questo post nella sezione
      VISUALIZZARE IL PULSANTE ANCHE NELLA VERSIONE MOBILE
      @#

      Elimina
    4. Quando dici "per poi incollarvi lo stesso codice subito sopra", a quale codice ti riferisci? Ho provato con questo:
      < 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?!

      Elimina
    5. 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
  4. Utilissimo! Almeno questo sono riuscita al primo colpo xd

    RispondiElimina

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.