Come installare il bottone di WhatsApp nella versione mobile di Blogger.

Come visualizzare il bottone di WhatsApp nei post di Blogger per condividere gli articoli nei dispositivi mobili tramite questa applicazione di messaggistica.

Aggiornamento 17/03/2015: Questo sistema funziona solo su cellulari e tablet Android mentre sembra non andare bene per iPhone e iOS in genere. 

Le installazioni della applicazione WhatsApp hanno raggiunto cifre iperboliche dell'ordine di centinaia di milioni e hanno praticamente quasi azzerato i vecchi SMS che ora sono offerti a prezzi stracciati da tutti i player della telefonia mobile. L'acquisizione di WhatsApp da parte di Facebook non ha provocato quella disaffezione degli utenti che in molti temevano.  

Sono sicuro che se avete uno smartphone tale applicazione è una di quelle che usate più spesso perché non serve solo per la messaggistica ma anche per condividere foto, video e anche link. Vi sarà certamente capitato di incollare l'URL di una pagina web su WhatsApp per condividerla con un vostro contatto. La cosa non è certo immediata perché bisogna selezionare e copiare l'URL della pagina da condividere nel browser del cellulare quindi aprire WhatsApp e incollare l'indirizzo a beneficio di un nostro contatto. Come accade anche con gli altri social network usando i tag di Blogger si può creare un pulsante per far condividere ai lettori un articolo del nostro blog con un tap. Tale bottone è inutile mostrarlo nella versione desktop perché WhatsApp è una applicazione eminentemente mobile. Con degli emulatori di cellulari possiamo installarla anche nel computer ma coloro che la usano con questa configurazione credo siano una esigua minoranza. 

Bisogna quindi attivare la versione mobile del sito andando su Modello > Cellulare e scegliere il Modello Personalizza dopo avere attivato tale versione. Con questa scelta il codice per la versione desktop e per la versione mobile saranno modificabili singolarmente.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca la sezione del codice per il mobile che inizia con questa riga

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

Si clicca sulla freccetta nera posta sulla sinistra e si scorre il codice in basso.

BOTTONE DI WHATSAPP CENTRATO SOPRA IL POST

Per visualizzare il bottone di condivisione di WhatsApp sotto il titolo in questo modo

si scorre il codice fino a trovare la riga <data:post.body/> e, subito sopra, si incolla il codice 

<style> #whatsapp_button1 a {display: block; width: 100px; height: 46px; margin: 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDSYOYTyxRmjp5wPdgzRn53RSQ5PTrMt1IOFM1Ee2H0vRFIxHrlyjowFvthyWbGE7fU83juMCtTWIO0VZGoZHwg6h0xi4f0MRUT5aQ3DLmPmZRdO2NXRpYdX9HSvEDi-EUhhoKU3eDaZE/s100/whatsapp-share.png);} </style>
<div id='whatsapp_button1'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Condividi su WhatsApp' alt='WhatsApp-Button'></a></div>

Il pulsante scelto ha dimensioni di 100x46 pixel ed è centrato nel layout mediante il tag colorato di viola. Si salva il modello. Il bottone sarà visibile solo quando si aprirà un post mediante un dispositivo mobile o anche dal computer aggiungendo come è noto ?m=1 all'URL dell'articolo.

BOTTONE DI WHATSAPP ALLA FINE DELL'ARTICOLO

Seguendo la falsariga del post sull'installazione del bottone di Facebook nella versione mobile vediamo come visualizzare il bottone di WhatsApp  accanto a quello di Google+ in questo modo 

Si va sempre su Modello > Modifica HTML e si cerca la riga

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

Si clicca sulla freccetta nera e si  scorre il codice 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 rappresenta il bottone con contatore di Google+. Subito sotto si incolla questo nuovo codice 

<style> #whatsapp_button2 a {float: right; margin-top:-36px; width: 80px; height: 37px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDSYOYTyxRmjp5wPdgzRn53RSQ5PTrMt1IOFM1Ee2H0vRFIxHrlyjowFvthyWbGE7fU83juMCtTWIO0VZGoZHwg6h0xi4f0MRUT5aQ3DLmPmZRdO2NXRpYdX9HSvEDi-EUhhoKU3eDaZE/s80/whatsapp-share.png);} </style>
<div id='whatsapp_button2'><a alt='WhatsApp-Button' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Condividi su WhatsApp'/></div>

e si salva il modello. L'icona di WhatsApp è di 80x37 pixel e il tag margin-top:-36px; serve per allineare in altezza il bottone di WhatsApp con quello di Google+ e può essere calibrato a seconda del modello. Ovviamente si può scegliere anche un'altra icona sostituendone l'URL colorato di rosso.

Quando un lettore che apra il post con il cellulare e che abbia installato WhatsApp farà tap sulla icona appena inserita gli si aprirà appunto la pagina dei contatti di WhatsApp in cui potrà scegliere quello con cui condividere il link. L'URL del post verrà automaticamente incollato nel campo per i messaggi sia nel caso del bottone all'inizio sia per quello posizionato alla fine del post. Avendo scelto due ID diversi si possono inserire anche entrambi i bottoni per facilitare le condivisioni.