How to Make Phone Numbers Clickable for Smartphones on Your Website

If you have a website like a business directory listing, it’s very important to optimize your site for use with smarpthones. There are many options here including plugins that can provide you with an alternative WordPress theme for mobile phones. Or you can use a single responsive theme for all your needs. Either way, you can’t ignore the fact that not only are the percentage of viewers on mobile phones increasing, they are twice as engaged as regular visitors. In view of this, you need to make the smartphone experience as engaging and useful as possible. If you don’t, your competitors surely will. One of the ways you can leverage this is by allowing visitors to automatically click telephone numbers directly on your website without having to copy and paste the number into their dialer. Here’s how to make phone numbers clickable on your WordPress blog.

“Tel” HTML Tag

The Internet Engineering Task Force (IETF) has defined the resource locator used to identify telephone numbers on the web. This “URI” takes the form of “tel” as opposed to “http” which is used to identify web addresses. So just like we construct a URL with http, we can do the same with tel like this:

tel:+1234567890

This allows us to construct “linkable” telephone numbers in the same way we create linkable web addresses in this manner:

<a href=”tel:+1234567890”>This is my number!</a>

So using this HTML code on a test WordPress website, here’s what it looks like:

Pretty neat huh? Of course, we now run into the biggest problem we need to solve – how do we ensure that these numbers are clickable only on smartphones? If you try and use this link on a browser like Chrome, nothing will happen. If you make the mistake of activating it in Firefox, you get a nice fat error message like the one below:

The problem of course is that desktop browsers are not equipped to handle telephone calls without additional extensions. If you’re looking to present an error-free experience to your users, you need to find a way to display telephone numbers as links only when the visitor is on a compatible mobile device. But how do we go about this?

The Solution?

Our usual solution of displaying a different theme for smartphones won’t work here. The problem is in the content itself – not in its design. If you directly insert a hyperlink into a post, it will show up regardless of what theme you’re using. What we’re looking for is a fix that dynamically checks to see whether or not the user is on a mobile device and formats the telephone number accordingly. This can ideally be accomplished using shortcodes. If we can enclose the phone number within a short code that formats it appropriately depending on the device, our problem is solved. Fortunately, we have a plug-in that does just this.

The Telephone Number Linker allows you to use the [telnumlink] shortcode to put your telephone numbers into. You’re given the choice of using WordPress’s built-in wp_is_mobile() function to check for mobile devices, or you can maintain a list of user agents that will display the clickable links. An added advantage of this approach is that it will also play nicely with any caching plug-ins that handle different themes like W3 Total Cache for example. In fact, you don’t have to make any changes to your default configuration to enable this. Simply make sure that the list of user agents in the settings screen is the same as the one used by the Telephone Number Linker plug-in and you’re good to go.

Little tweaks like this enhance the professionalism of your site and present your users with a consistent experience as per their expectations.