Sviluppo mobile: come creare link attivi per i numeri di telefono

Oggi vediamo come creare e rendere attivi i link dei numeri di telefono sul nostro sito mobile. Cross-compatibile su Android/Ios e Windows Phone.

Quando si sviluppa una versione mobile “ad hoc” del proprio sito e/o progetto può risultare estremamente utile rendere i numeri di telefono “attivi” permettendo ai visitatori di recuperare e visualizzare sul proprio smartphone  il numero di telefono semplicemente cliccando sullo stesso nel sito. Questo evita i “classici” lavori copia/incolla dovuti alla mancanza di questa (secondo me molto utile) feature.

Per rendere “cliccabili” i numeri di telefono nelle versioni mobile ci basterà usare questa forma:

<a href="tel://0123456789">+39 0123456789</a>

Cliccando sul numero di telefono apparirà sul vostro smartphone il numero indicato nell’href del link. Semplice ma estremamente utile! Ovviamente possiamo usare l’anchor text a nostro vantaggio, magari con un call to action che invogli la chiamata in questo modo:

Se vuoi contattarmi, <a href="tel:0123456789">Chiama ora!</a>

Stesso procedimento nel caso volessimo usare un’immagine al posto del semplice testo:

<a href="tel://0123456789"><img src="telefono_icon.png" alt="Chiama ora!" /></a>

Disabilitare la funzionalità di linking telefonico su dispositivi mobili

Per disabilitare la funzionalità sopra-indicata in tutto il nostro progetto possiamo usare il seguente meta:

<meta name="format-detection" content="telephone=no" />

Stai cercando qualcuno a cui affidare lo sviluppo mobile del tuo sito? Richiedi un preventivo gratuito!

Questo articolo ti è stato utile? Condividilo sui tuoi social network preferiti!

  1. Ciao Riccardo,
    ho trovato il tuo articolo molto utile, però sorge un problema, mi spiego meglio: Nella versione Mobile, va benissimo che il numero di telefono sia “cliccabile” e quindi vada direttamente in composizione su iPhone, Android etc. Invece sul sito vero e proprio, rimane ugualmente cliccabile ma ovviamente punta ad una pagina che non esiste dando errore. Come risolvere il problema??
    Grazie.
    Marco

  2. Premesso che sul mio Android 4.4.4 non funziona questa guida, sulla versione desktop del sito non credo tu possa risolvere il problema.

  3. a me funziona sia da smartphone che da tablet che da computer. Semplicemente, quando lo clicci da desktop, apre skype (immagino che in alternativa, il sistema operativo, cerchi un programma che faccia questo genere di operazioni).

    Grazie mille!!!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

wordpress-migliori-temi-starter-vuoti-per-iniziare-lo-sviluppo
Up Next:

Wordpress: migliori temi starter (vuoti) per iniziare lo sviluppo

Wordpress: migliori temi starter (vuoti) per iniziare lo sviluppo