Mostrare il pulsante di Feedly nella versione mobile di Blogger.

Come installare su Blogger il bottone di Feedly da visualizzare alla fine dei post nella versione mobile insieme al bottone di Google+ e WhatsApp.

Nel post precedente abbiamo visto come installare in un blog di Blogger o di Wordpress il bottone di Feedly per invitare i lettori a seguirci tramite questo usatissimo lettore di feed. Alla fine del post avevo informato i lettori che avrei testato la possibilità di mostrare questo pulsante anche nella versione mobile limitatamente ai blog su piattaforma Blogger. La cosa è risultata fattibile.

Per prima cosa bisogna andare sulla pagina del Feedly Button per scegliere il pulsante da visualizzare nella versione mobile del nostro sito. Dopo aver incollato l'URL dei feed del nostro blog si otterrà il codice che però va utilizzato solo parzialmente come vedremo in seguito perché incollato così com'è non viene salvato da Blogger. 

Adesso salviamo il template, andiamo su Modello > Modifica HTML e cerchiamo questa riga

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

che è l'inizio del codice per la versione mobile del nostro blog.  Naturalmente questo codice sarà attivabile solo se sarà stata attivata la versione mobile del sito andando su Modello > Cellulare. Dopo aver cliccato eventualmente sulla freccetta nera posta sulla sinistra si scorre il codice verso il basso fino a trovare questo blocco  

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

che è il codice del pulsante di Google+ mostrato nella versione mobile. Per inserire il bottone di Feedly prima di questo bottone si deve incollare, prima di questo blocco, quest'altro codice 

<div style='float: left; padding-left:5px;padding-right:30px; margin-top:0px;'>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2Fideepercomputeredinternet%2FzUQN' target='blank'><img alt='follow us in feedly' height='38' id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-big_2x.png' width='87'/></a>
</div>

Si salva il modello. Al posto dell'URL del mio indirizzo di FeedBurner colorato di viola dovete incollare la stringa di codice che avete generato con lo strumento di Feedly come illustrato all'inizio del post. Il bottone è configurato per stare sulla sinistra a una distanza di 5 pixel mentre il bottone di Google+ sarà alla sua destra a una distanza di 30 pixel. Anche le dimensioni del bottone possono essere modificate così come il suo indirizzo. Per ottimizzare le chiamate HTML del browser si può anche caricare l'immagine sul nostro account Picasa. Qualora si apra un post da mobile adesso si vedrà così per quello che riguarda la sua parte finale

Se un lettore ha nel suo smartphone o nel suo tablet l'applicazione Feedly e clicca sopra al bottone visualizzerà tramite tale applicazione gli ultimi post pubblicati dal sito con un altro pulsante per sottoscrivere i feed in modo da non perdere nessun aggiornamento.  

APPENDICE E COMPLEMENTI

Per essere sicuri che tale bottone sia visibile in modo corretto con le diverse risoluzioni è opportuno scegliere un qualsiasi post e aggiungere al suo URL la stringa ?m=1  per ottenere la sua versione mobile. Apriamo quindi lo strumento Screenfly, incolliamo tale URL e andiamo su GO

Si potrà testare come si vede la parte finale di tale pagina con i vari tablet e i vari smartphone

per controllare che sia tutto OK. Nello screenshot si vede anche il bottone tipico di WhatsApp che si può inserire sulla destra e che permette ai lettori di condividere i nostri post con tale app.