Build Your Own Business Website header image

How to Display a Phone Number as a Link that Mobile Devices Can Call

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, we show the typical structure of a telephone link tag that will allow you to add a clickable telephone number to your site that mobile devices can call. We follow this up with our session on How to Display a Phone Number in a Thesis Header.

Video Transcript

Rick: So you asked a question about how to display a telephone number. What do you mean by that?

Member: Well on the website at the top, I really want to put my telephone number so people could call me. But I’m not really quite sure if that has to be part of the header itself or whether there is some way that I can just add it through the dashboard. It’s basic… it’s probably a really simple question but I’m going to have to work it out.

Rick: Yeah, there isn’t any way for you to do it through the dashboard. Can you give me your website address?

Member: Actually, I haven’t even started it yet.

Rick: Okay well, so if you wanted to add it, here’s a website I use for demonstration purposes. And let say you wanted it added to the header. I’m not going to really talk about how to style it or anything like that. But you could easily add it to the header using a Thesis hook. I think it’s probably after title, I believe. Let’s just look at that real quickly. Well, it’s going to require a little bit of code. The alternative to that is to use one of my header plugins which wouldn’t require you to use code. Do you have a preference?

Member: No, I don’t. I don’t mind.

Rick: Because I can… well, I guess what I’ll do is I’ll start off by showing you how to do that here just using my plugin.

Member: Okay.

Rick: And before I do that, I actually have a little presentation about how to do telephone numbers. What country are you in?

Member: I’m in Ireland.

Rick: So do you know what your country code then your county or initial codes are?

Member: If you’re ringing from outside of the country, you mean?

Rick: Yes.

Member: Yeah, it would be 00 353.

Rick: 00 and then 353, okay.

Member: And then one for the…

Rick: Actually, I’m going to write that down here. Tell that to me again. So it’s 00 353…

Member: 1.

Rick: 1

Member: and then the number so…

Rick: Which is? Just give me the number real quick.

Member: 524 1576

Rick: Okay because what I’m going to do is I’m going to swap your number into this illustration here as I work my way through the description. So because what we have…we have the ability to have a clickable telephone number where a smartphone or a device can… where the naked eye can see the telephone number but format it as a link that a smart device can just click on and call. And I think that you definitely want to do that from now on, just because more and more people are using mobile devices of one sort or another to look at websites.

And this is the standard. It’s a standard HTML link that starts off with an a href equals. And then instead of http:, it starts with a tel: and then it gives the telephone number and then you have the closing bracket for the first part of the a tag. And then you put the link text in and then the closing link tag. And this link text can be anything, right? It could be call me today at… you wouldn’t even have to show the phone number. You could just say call us at and it would still link to this telephone number.

Now the way this telephone number works is it’s got 4 parts. The first part is what’s called the global designation. It’s theoretically possible for you to just put a local telephone number in there. But… and if you were just going to put a local telephone number in, one that wasn’t globally unique and one that if somebody was in the US, they might click on it, it would not actually take them to your phone number. It’s possible to do that but it’s not considered good practice. The way you distinguish a global telephone number from a local telephone number is with this + symbol. So it starts off with a + symbol to tell the browser that it’s a global number.

Then it has the country code. Now in the US, the country code is 1. I should say in the US and Canada, the country code is 1 and then it has the national code which in the US is 20…oh, I’m sorry. In the US, it’s called the area code. So US and Canada call it area code but the sort of global designation for it is national code. And I think in the UK, they call that the county code, I think, and then the local telephone number. And so properly formatted telephone link has each of those parts to it, the global designator, the country code, the national code and the local phone number.

So in your case, this would instead be 00… I guess I have to change it over here on the actual thing. This would instead be 00 353 and then the rest of the number.

Member: 1…

Rick: Oh let’s see, I just screwed that up. Bear with me for just a moment as I fix this. Okay and so then I can say start presentation again. I lost it. But so your link would look like this, right? Your link would look like that instead. But what that gives you is the ability to make your link clickable and so people can, from their mobile device, simply call your phone number.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment