Come creare un Link in Html utilizzando le API WhatsApp?
Se ti sei ritrovato a Sviluppare una Pagina o un Sito Web e ti è venuto in mente di integrare un link che dia la possibilità di chattare su WhatsApp aprendo direttamente l’app ma non sai da dove iniziare ecco l’articolo che fa per te.
Come si costruisce un Link in Html per chattare su WhatsApp?
Andiamo a vedere insieme la sintassi ufficiale per integrare il pulsante WhatsApp sul tuo sito web:
Innanzitutto vediamo velocemente Come si scrive un Link
<a href="" target="" rel="">Chatta con noi su WhatsApp</a>
Nel campo href quindi inseriremo l’istruzione per aprire l’App WhatsApp nel caso siamo su un dispositivo mobile oppure WhatsApp web se siamo su desktop.
Vediamo insieme la sintassi da inserire nel campo href:
<a href="https://wa.me/39XXXXXXXXXX" target="_blank" rel="noopener">Chatta con noi su WhatsApp</a>
Avrete notato come nel campo href ho inserito https://wa.me/39XXXXXXXXXX dove 39XXXXXXXXXX va sostituito con il numero di telefono WhatsApp preceduto dal prefisso nazionale. Solitamente, per il nostro paese si inserisce +39, ma per WA non viene messo il + ma solo il 39 quindi 39XXXXXXXX.
Tutto fatto! il link è pronto e funzionante ma possiamo fare di più come inserire un messaggio precompilato da “annettere” al click, ecco come si fa:
"https://wa.me/39XXXXXXX?text=Il%20mio%20messaggio%20personalizzato"
Subito dopo aver inserito il numero di telefono comprensivo di prefisso aggiungiamo:
?text=Il%20mio%20messaggio%20personalizzato
Utilizzerai la sintassi %20 per attribuire lo spazio tra le parole quindi il link in definitiva verrebbe così:
<a href="https://wa.me/39XXXXXXXXXX?text=Il%20mio%20messaggio%20personalizzato" target="_blank" rel="noopener">Chatta con noi su WhatsApp</a>
Nel link appena creato ho aggiunto altri attributi non utili alla causa WhatsApp ma comunque essenziali ed importanti come:
target="_blank" rel="noopener"
Quando un link apre in una nuova scheda (nel mio caso ho scelto così) và inserito il rel=”noopener” per fornire maggiore sicurezza.
E se usassi WordPress? vale lo stesso per WP ma in questo caso si potrebbe implementare la funzione di condivisione dell’URL su WhatsApp quindi “condividi su whatsapp questo url”
Ecco come cambierebbe ciò che abbiamo appena scritto sopra:
<a href="whatsapp://send?text=<?php echo get_the_title() . '%0A%0A' . urlencode( get_the_permalink() ); ?>">Condividi su WhatsApp</a>
La funzione get_the_title() restituirà il titolo dell’articolo o la pagina da condividere mentre la funzione get_the_permalink restituirà l’URL.
Dove va inserito, in WordPress, il link appena creato?
Puoi inserire il link all’interno del file page.php, single.php o un eventuale file del tuo tema che include i pulsanti di condivisione.
Questo è tutto! pronto per integrare un link Personalizzato di WhatsApp sul tuo Sito web?
A presto!
