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='"loading" + 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 = '//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 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 == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<b:if cond='data:blog.pageType != "static_page"'>
<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
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.
Ciao Ernesto due domande:si possono rendere visibili anche in home page? 2)si puo'inserire
RispondiEliminail like box di twitter e google plus? grazie mille
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
Elimina<td style='padding-left:10px; padding-top:0x;'>
.... Codice Bottoni ----
</td>
prima del tag </tr>
@#
Usare il button è una buona idea per diminuire lo spazio. Se Edge non so dire nulla
RispondiElimina@#
grazie mille
RispondiEliminaServe a Facebook per evitare lo spam. Dopo i primi giorni dovrebbe sparire
RispondiElimina@#
nel mio blogger non funziona e non so perchè!
RispondiEliminaHai guardato l'anteprima oppure hai salvato il modello e aperto un post? Perché nell'anteprima non si vede nulla e neppure nella homepage.
Elimina@#