Pubblicato il 11/07/16e aggiornato il

Pulsanti di Facebook (Like, Share, Send e Save) alla fine dei post nella versione mobile di Blogger.

Come visualizzare alla fine di ogni post di Blogger aperto con smartphone e tablet i pulsanti di Facebook Mi Piace, Condividi, Invia e Salva su Facebook.
Nell'articolo precedente abbiamo visto come mostrare alla fine dei post di Blogger i bottoni dei plugin di Facebook Mi Piace, Condividi, Segui, Salva e Invia. Con questo articolo terminerò il tema illustrando come visualizzare questi plugin anche alla fine dei post nella versione mobile di Blogger.

Come già scritto nell'articolo linkato bisogna innanzitutto installare il javascript SDK di Facebook nel modello di Blogger. Questa operazione va fatta una volta per tutte e servirà per installare tutti i plugin di Facebook. La soluzione ottimale sarebbe quella di creare una applicazione Facebook specifica per il sito e quindi incollare il javascript SDK con l'ID della applicazione.

Si può inserire anche tale javascript senza creare applicazioni andando su Modello -> Modifica HTML. Si cerca quindi la riga

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

e 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>

in cui settare il linguaggio dei plugin.

Per la installazione pura e semplice dei pulsanti di Facebook anche nella versione mobile si va sempre su Modello -> Modifica HTML e si cerca la riga

<b:includable id='mobile-post' var='post'>
Si clicca sulla freccetta nera di sinistra quindi si scorre il codice verso il basso fino a trovare la riga

<div class='post-footer'>

Subito sopra a questa va incollato questo codice

<!-- Pulsanti Facebook Mobile - Inizio -->
         <table>
<tr> 
<td style='padding-left:2px; padding-top:0x;'> 
<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false'  expr:href='data:post.Url'/>
    </td>
    <td style='padding-left: 4px; padding-top: 4px;'>
<div class='fb-share-button' expr:data-href='data:post.Url' data-type='box_count'/>
</td> 
<td style='padding-left: 4px; padding-top:-2px;'>
<div class='fb-save' expr:data-uri='data:post.Url' data-size='small'></div>   
</td>
<td style='padding-left: 4px; padding-top:-2px;'>
  <div class='fb-send' expr:data-href='data:post.Url' /> 
</td>
  </tr>
</table>
<!-- Pulsanti Facebook Mobile - Fine -->

con i quattro pulsanti Mi Piace, Condividi, Invia e Salva. Si salva il modello. Quando verrà aperto un post con un dispositivo mobile si visualizzeranno i quattro pulsanti

pulsanti-facebook-mobile-blogger


Per migliorare l'allineamento e modificare la distanza tra di essi si possono modificare i valori in padding-left e padding-top che determinano rispettivamente la distanza dalla sinistra e dall'alto. Per testare la visualizzazione con i vari dispositivi si può usare il tool Screenfly. Lo screenshot è stato scattato con la visualizzazione da iPhone 6 Plus con risoluzione 414x736 pixel.




1 commento :

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.