Pubblicato il 11/07/16e aggiornato il

Come mostrare sotto ai post di Blogger i pulsanti di Facebook (Mi Piace, Condividi, ecc.)

Come mostrare allineati sotto ad ogni post tutti i plugin di Facebook (Mi Piace, Condividi, Invia, Segui e Salva su Facebook) per aumentare i click e le condivisioni dei lettori.
Nel post precedente abbiamo visto come installare il pulsante Salva su Facebook in una sidebar o all'interno del modello. A seguito di una richiesta in un commento che ho ritenuta interessante per tutti i lettori passo a mostrare come allineare sotto a ogni articolo del blog su Blogger tutti o quasi i plugin di Facebook. Per l'allineamento utilizzerò il codice di una tabella con una sola riga e più colonne. Si potranno inserire tutti i pulsanti che si desiderano e eventualmente togliere quelli che non ci interessano.

Ricordo che una riga della tabella inizia con il tag <tr> e termina con </tr> mentre una singola cella inizia con <td> e termina con </td>.  Quindi per aggiungere un nuovo pulsante va inserita una nuova cella e per toglierlo ne va eliminata una già esistente. Essendo i pulsanti di diverse dimensioni si deve lavorare con i tag padding-top e padding-left per configurare le diverse altezze e lo spazio di divisione.

INSTALLAZIONE DEL JAVASCRIPT SDK DI FACEBOOK SU BLOGGER


Per far funzionare i plugin di Facebook occorre installare lo script apposito. Per una completa utilizzazione dei plugin di Facebook occorre creare una applicazione Facebook e incollare il javascript SDK nel modello di Blogger.  Si può anche decidere di installare lo script senza creare l'applicazione specifica per il sito. In questo caso, dopo aver salvato il template, si va su Modello -> Modifica HTML e si cerca

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

che è presente in tutti i modelli più recenti. Se così non fosse cercate la riga che inizia con <body   ... . Subito sotto a tale riga incollate 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 si può personalizzare la lingua dei plugin. Si salva il modello.

COME VISUALIZZARE I PLUGIN SOTTO A OGNI ARTICOLO DI BLOGGER


Si va su Modello -> Modifica HTML e si cerca la riga

<b:includable id='post' var='post'>

Dopo aver cliccato sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice, si scorre verso il basso fino a trovare <div class='post-footer'>. Subito sopra si incolla questo codice

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<table>
<tr> 
<td style='padding-left:10px; padding-top:0x;'> 
<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='55' expr:href='data:post.Url'/>
    </td>
    <td style='padding-left: 16px; padding-top: 4px;'>
<div class='fb-share-button' expr:data-href='data:post.Url' data-type='box_count'/>
</td>
<td style='padding-left: 12px; padding-top:4px;'>
  <div class='fb-follow' data-href='https://www.facebook.com/parsifal32' data-layout='box_count' data-show-faces='false'/> 
</td> 
<td style='padding-left: 12px; padding-top:-2px;'>
<div class='fb-save' expr:data-uri='data:post.Url' data-size='large'></div>   
</td>
<td style='padding-left: 12px; padding-top:-2px;'>
  <div class='fb-send' expr:data-href='data:post.Url' /> 
</td>
  </tr>
</table>
</b:if>
</b:if>

quindi si salva il template. I pulsanti inseriti sono quelli il Mi Piace, Condividi, Segui, Salva e Invia. Quando si apre un post si visualizzeranno dopo la fine dei contenuti i vari bottoni

plugin-facebook

L'allineamento ottenuto mi sembra più che buono ma può essere modificato giocando con i valori dei tag padding-left (distanza dalla sinistra) e padding-top (distanza dall'alto). Le righe evidenziate di giallo servono per mostrare i bottoni solo nei post e quelle evidenziate di verde per non mostrarli nelle pagine statiche. Nel prossimo articolo vedremo come visualizzare questi pulsanti anche nella versione mobile di Blogger.




10 commenti :

  1. Grazie mille, sono contento che il mio contento ti sia servito per pubblicare questa bella guida.
    Adesso lo provo e vediamo se ci riesco. :D

    RispondiElimina
    Risposte
    1. Ho inserito il button count al posto del box e fin qui tutto bene, ma è normale che su google chrome mi accetti la dimensione large dei bottoni, mentre se lo apro con una navigazione in incognita o con microsoft edge me li faccia vedere piccoli?

      Elimina
    2. Usare il button è una buona idea per diminuire lo spazio. Se Edge non so dire nulla
      @#

      Elimina
    3. Secondo me i browser non hanno ancora implementato questa funzione di facebook per avere i bottoni più grandi... perché ho inserito appunto data-size='large' su tutto e non me li fa vedere.
      Magari se poi provi anche tu ad inserire il large su Chrome, fammi sapere!

      Elimina
  2. Ciao Ernesto due domande:si possono rendere visibili anche in home page? 2)si puo'inserire
    il like box di twitter e google plus? grazie mille

    RispondiElimina
    Risposte
    1. Sì a entrambe le domande. Per mostrare i bottoni ovunque devi eliminare le righe evidenziate di giallo. Per aggiungere altri pulsanti devi aggiungere altre righe di questo tipo
      <td style='padding-left:10px; padding-top:0x;'>
      .... Codice Bottoni ----
      </td>
      prima del tag </tr>
      @#

      Elimina
  3. Provando i tasti mi sono reso conto che poi mi chiede la conferma del "Mi piace", come mai?
    Ho aggiunto anche quel codice dopo il <body expr

    RispondiElimina
    Risposte
    1. Serve a Facebook per evitare lo spam. Dopo i primi giorni dovrebbe sparire
      @#

      Elimina
    2. Ah siccome avevo letto la tua guida per evitare questo doppio passaggio, pensavo magari di aver sbagliato qualcosa.

      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.