Phone Number HTML Links for Visitors on Mobile Devices
Displaying mobile numbers as clickable links on mobile devices can be a very easy task. If your numbers are formatted in any of the following ways, the vast majority of your mobile visitors (iPhone and Android) will automatically see the phone number as a clickable link:
- (555) 555-5555
- 555 555 5555
- 555.555.5555
If your phone numbers are not formatted this way you can add the following HTML around your phone numbers:
<a href="tel://555.555.5555">555.555.5555</a>
It is important that only your mobile visitors see this link, as the majority of desktop users will be greeted with an error message when clicking the link. Make sure the linked and non-linked versions of the phone number are swapped out accordingly depending on the device the user is browsing your website with.
For more information, please check out mobile Tuts+ Mobile Web Quick Tips post.
How to swap linked and non-linked versions of your phone number?
I was having phone number issues with a couple of sites, so I’ve put together a wordpress plugin that wraps any element in a link with `href=”tel:X”` (Where X is the contents of the element) IF you add a particular css class to that element AND the screen size is under 501px wide.
This means desktop machines show no link, but phones do.
I have sent it to WordPress.org, but you can currently download it at: [http://www.gravitydesign.co.uk/wp_plugin/][1]
[1]: http://www.gravitydesign.co.uk/wp_plugin/
Now a better official version with more sophisticated detection of a mobile device at:
http://wordpress.org/extend/plugins/telephone-number-linker/
I am having hit and miss results with this. Some websites seem to let my android device, others don’t. I cnat find a rhyme or reason even on sites i’ve built and i dont like the html tag option as it messes up when in a broswer