Aggiungere un pulsante per inviare via email i post di Blogger.

Come aggiungere a Blogger un bottone di condivisione via email nella versione desktop e nella versione mobile.

Con questo articolo inizio a chiudere il cerchio iniziato qualche giorno fa per la condivisione via email di articoli da parte dei lettori. Nel primo post abbiamo visto come rendere predefinita Gmail per aprire i link di posta elettronica. In questo modo quando si clicca su un link del genere viene automaticamente aperto il modulo per inviare un messaggio al destinatario e con i contenuti predefiniti.

Nel secondo articolo abbiamo invece visto come creare un link di posta elettronica e eventualmente come realizzare un bottone che può essere usato dai navigatori per inviare agli amici l'indirizzo del nostro blog. In questo terzo post faremo un passo ulteriore per mostrare una icona subito sotto al contenuto del post che, se cliccata dal lettore, aprirà la sua applicazione predefinita di posta elettronica con l'indirizzo del destinatario in bianco ma con oggetto e corpo del messaggio già precompilati con titolo del post e indirizzo dello stesso. Questa icona può essere mostrata alla fine del post nella versione desktop e/o nella versione mobile. Inoltre con un po' di lavoro grafico può anche essere aggiunta a una serie di icone già eventualmente presenti nel vostro sito di Blogger.

Dopo aver salvato il template si va su Modello -> Modifica HTML e si cerca la riga

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

Si scorre il codice verso il basso fino a trovare la riga iniziale del footer

<div class='post-footer'>

e subito sopra  a questa si incolla questo codice 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi via Email'><img alt='Condividi via Email' border='0' height='48px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9D9kaO2t9O0y1b-cgQQFL_0bJNTOtZsTghAmD50d0XZTV4ApOSX000SnpUtuR99fgUUQTRhMP3OzIDFoh9Z28grueMxHQXJcMIIi4-dQHfnCml7khs_fBWvWJV9p-GkqDZrDQWlyeXhw/s720/gmail-icon.png' width='48px'/></a>
</b:if>
</b:if>

Si salva il modello. Le 4 righe dei due tag condizionali evidenziate di giallo servono per mostrare il bottone solo nei post e non nelle pagine statiche. L'icona potrà essere modificata cambiando l'URL diretto colorato di viola dopo aver caricato la nuova icona su Google Foto. Possono anche essere settate le dimensioni del pulsante proposte in 48 pixel. 

Quando il lettore cliccherà sulla icona aprirà il suo programma predefinito di posta elettronica

Il titolo del post condiviso verrà automaticamente aggiunto nell'Oggetto mentre nel corpo del messaggio verrà aggiunto l'URL del post condiviso. Il lettore che vorrà condividere il post per email dovrà solo selezionare nella rubrica dei suoi contatti il destinatario della condivisione.

COME MOSTRARE IL BOTTONE DI CONDIVISIONE NELLA VERSIONE MOBILE

Se volessimo mostrare questo stesso pulsante anche nella versione mobile, sempre in Modello -> Modifica HTML, si dovrà cercare la riga iniziale della versione mobile

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

per poi scorrere il codice verso il basso fino a trovare la riga

<div class='post-footer'>

Subito sopra a questa si incolla questo codice

<a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url' rel='nofollow' target='_blank' title='Condividi via Email'><img alt='Condividi via Email' border='0' height='24px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9D9kaO2t9O0y1b-cgQQFL_0bJNTOtZsTghAmD50d0XZTV4ApOSX000SnpUtuR99fgUUQTRhMP3OzIDFoh9Z28grueMxHQXJcMIIi4-dQHfnCml7khs_fBWvWJV9p-GkqDZrDQWlyeXhw/s720/gmail-icon.png' width='24px'/></a>

quindi si salva il modello. Il bottone sarà visibile anche nella versione mobile. Chi ci cliccherà sopra

dovrà scegliere con quale applicazione aprire il link di posta e, dopo che lo ha fatto, visualizzerà il messaggio preimpostato in cui mancherà solo l'indirizzo del destinatario. Come aggiungere questa icona a altre che già fossero presenti su Blogger lo vedremo in un prossimo articolo.