Come visualizzare i bottoni Mi Piace, Twitter e +1 di Google+ nella versione mobile di Blogger.

Come visualizzare i bottoni di Facebook, Twitter e Google Plus nel footer della versione mobile in modo da condividire i post anche con cellulari e tablet.

La versione mobile di Blogger mostra di default il bottone per il +1 su Google+ e nel post precedente abbiamo visto come mostrare anche il pulsante di Facebook. In questo articolo vedremo invece come visualizzare anche sul mobile il pulsante di Twitter e come mostrarli tutti e tre insieme. 

Per i bottoni di Twitter bisogna che lo script di questo servizio sia stato inserito nel modello. Se già avete un bottone di Twitter visibile sul desktop significa che lo script è già presente nel vostro template. È sempre meglio utilizzare il javascript asincrono per diminuire il tempo di caricamento del sito. A questo scopo si va su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla questo codice

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>

Si salva il modello.

BOTTONE DI TWITTER PRIMA DEL POST

Prima di procedere bisogna attivare la versione mobile del blog andando su Modello > Cellulare, attivando tale funzionalità e scegliendo il Modello Personalizza. Per mostrare il bottone di Twitter subito sopra al contenuto del post si va su Modello > Modifica HTML e si cerca la sezione 

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

Eventualmente si clicca sulla freccetta nera posta a sinistra per visualizzare tutto il codice. Si scorre verso il basso fino a trovare il tag 

<data:post.body/>

e subito sopra a questo si incolla il codice 

<div>
<a class='twitter-share-button' data-count='horizontal' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
            </div>

dove va ovviamente sostituito il nome utente. Si salva il template e si otterrà questo risultato

 

PULSANTI MI PIACE, TWITTER E GOOGLE+ MOSTRATI NEL FOOTER

Se si desidera mostrare tutti insieme i bottoni di Twitter, Facebook e Google+ bisogna innanzitutto oltre che il javascript di Twitter inserire anche quello di Facebook. Si va su Modello > Modifica HTML e si cerca sempre la sezione per il mobile che inizia sempre con questa riga

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

Si scorre in basso fino a trovare il blocco di codice che serve per mostrare il +1 di Google+

<b:if cond='data:top.showDummy'>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
              </b:if>

Si integra incollando sopra e sotto i codici rispettivamente di Twitter e Facebook in questo modo

<div style='float: left; padding-left:5px; margin-top:0px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='parsifal32' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
</div>
            <b:if cond='data:top.showDummy'>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
              </b:if>
<div style='float: right; margin-top:-28px;'>
<div class='fb-like' data-action='like' data-colorscheme='light' data-font='trebuchet ms' data-layout='button_count' data-send='false' data-show_faces='true' data-width='40' expr:data-href='data:post.canonicalUrl'/></div>
</div>

dove il codice aggiunto è stato evidenziato di verde. Si salva il modello. Il risultato è il seguente

I valori di margin-top servono per allineare verticalmente i bottoni e possono essere variati in funzione del proprio template. Per condividere i post da mobile i lettori potranno cliccare sui pulsanti anche se sarà possibile utilizzarli solo da loggati sui singoli social.