Pubblicato il 17/10/14e aggiornato il

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

bottone-whatsapp

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://lh3.googleusercontent.com/-cLRl1JlhIh8/VEDTLHLyfKI/AAAAAAAApdw/KldkTcr4h7k/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 

bottone-whatsapp-footer

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://lh3.googleusercontent.com/-cLRl1JlhIh8/VEDTLHLyfKI/AAAAAAAApdw/KldkTcr4h7k/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.

bottone-whatsapp[1]

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.




20 commenti :

  1. Scusami Ernesto, mi è capitato anche con facebook e twitter, perché quando modifico in personalizza la versione per mobile, la stessa non è più disponibile in rete? Compare l'icona di blogger spaccata, modifico l'html, ma niente. Come posso fare? Grazie

    RispondiElimina
    Risposte
    1. Se l'icona è spaccata significa che è di dimensioni diverse da quelle che hai messo nel codice. Se hai inserito nel codice
      width: 80px; height: 37px;
      e l'immagine è invece larga 120 pixel si vedrà solo in parte
      @#

      Elimina
    2. Quindi cosa e come debbo modificare? Perdonami

      Elimina
    3. Trova le dimensioni della tua icona. Se ce l'hai nel computer basta che ci passi sopra con il mouse e vedi subito l'altezza e la larghezza. Il valore della larghezza lo metti in width mentre quello dell'altezza in height
      @#

      Elimina
    4. Ho provato, ma niente. Probabilmente non è l'icona di blogger giusta. Come faccio a trovare i valori dell'icona di blogger nel codice e reimpostarli perché sia visibile anche nella versione mobile? Scusami Ernesto, ma non ci sto capendo una mazza.

      Elimina
    5. Il post è chiaro. Onestamente non so dove sbagli
      @#

      Elimina
    6. Ernesto, la B spaccata mi compare quando modifico l'opzione per mobili da predefinito a personalizza, i codici che tu suggerisci per condivisione sui social ancora li inserisco. E' la prima operazione che faccio seguendo i tuoi tutorial, dopo quel cambio non è più visibile il blog su smartphone. Probabilmente mi sono spiegato male prima.

      Elimina
    7. Prova a non mettere Personalizza e a scegliere un altro modello
      @#

      Elimina
    8. Ernesto, ho provato a mettere il bottone whatsapp con un altro profilo come dici tu, ma non compare, anche se non mi da l'errore iniziale della B spaccata. Però ho scoperto che nella versione dinamica compaiono i bottoni tweet e mi piace di facebook e non nelle altre, anche se non gli ho mai inseriti nella versione mobile. Misteri della tecnologia. Purtroppo whatsapp niente.

      Elimina
    9. Se hai un template a Visualizzazione Dinamica ovviamente non funziona. Con quei modelli non funziona nulla
      @#

      Elimina
    10. Ma il mio blog non è a visualizzazione dinamica. Ho messo dinamica solo per portatili visto che mi compaiono i due bottoni facebook e twitter per condividere.

      Elimina
  2. Ciao,
    grazie per la dritta, funziona, anche se non riesco a cambiare l'icona.
    L'ho caricata in drive e ho generato il link pubblico di condivisione, l'ho inserito al posto di quello nel codice, modificando anche le dimensioni, ma nulla.
    Pazienza anche così può andare. (con più tempo a disposizione sicuramente ci riusciro), ma volevo dirti che il link generato non è attivo quando lo invii tramite whatsapp.

    RispondiElimina
    Risposte
    1. Non è attivo se lo usi da un dispositivo in cui non ci sia l'applicazione WhatsApp. Prova a aprire un qualsiasi post di questo blog con un cellulare che abbia Whatsapp e vedrai che si può inviare il link a un contatto come del resto è visibile nell'ultimo screenshot
      @#

      Elimina
  3. ciao ho provato a fare come dici ma quando provo con il cell mi da Not found error 404
    grazie

    RispondiElimina
    Risposte
    1. Quello cheti posso dire è che con il mio cellulare Android funziona. Non ti so dire se sia lo stesso con iPhone. Puoi controllare aprendo un post di questo sito con il cellulare. Se vedi che non funziona allora il tuo cellulare ha una impostazione diversa se invece funziona ci deve essere stato un errore nel codice
      @#

      Elimina
  4. Ciao Ernesto! Sto provando ad inserire il tasto. Sono riuscita in entrambe i modi. Lo vedo. Si apre Whatsapp, scelgo il contatto...MA NON INVIA NULLA! Perchèèèè? Aiutami!!!

    RispondiElimina
    Risposte
    1. Quando so apre WhatsApp dovresti già vedere il link del post che viene condiviso. Questo è possibile però solo con un cellulare che abbia WhatsApp installata. Se hai testato con il cellulare e non ti funziona non saprei dirti. Forse è un problema del modello o della marca del telefonino
      @#

      Elimina
  5. E' un iphone 6!!!! Non credo dipenda dal cellulare. Il link non c'è!!!!!!!

    RispondiElimina
    Risposte
    1. Allora dipende da quello. Questo codice serve per cellulari Android. Purtroppo non conosco il codice per iPhone. Questa riga qui per intenderci
      href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url'
      che per iPhone dovrebbe essere diversa ammesso che si possa fare visto che iOS è un sistema operativo molto chiuso. Per rendertene conto se provi a condividere un post del tuo blog con un cellulare Android vedrai che funziona
      @#

      Elimina
    2. Ok! Ecco appunto! Grazie comunque. Allora proverò con un Samsung. Ciao e buon lavoro.

      Elimina

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.