How to prevent phone numbers to be converted into Skype links?

Question

On those Windows machines with Skype installed, it tends to convert all phone-formatted numbers to Skype links so you can click it in order to make a call on Skype.

The question is how do you prevent that to happen for a certain number on page?

Maritsa

AFAIK its a plugin in your browser. Go to the extensions page and disable/uninstall it. – Amati

Modifying a setup or the browser configuration is not an option. I'm looking for a way to interrupt or bypass the Skype conversion script. – Maritsa

@Amati I think he means through the use of JavaScript, thus having the page to disable Skype's mangling... – Gettysburg

Great question. The skype processed links are a little weighty, and can cause formatting problems in tight spaces. Is it a good thing to disable phone numbers though? I wonder.... – Toady

Answer 1

Try not outputting the numbers as a single piece of text. Instead of

<span>888-555-1212</span>

try

<span>888-</span><span>555-1212</span>

and it will disable skype

Mumford

@Yuval: didn't I just write to you? (stackoverflow.com/users/255562/ashish-gupta) – Mumford

@Yuval: but you see the resemblance? – Mumford

I've used this method to do a quick plugin that some might find useful. owenmelbz.github.com/noSkype – Link

That is only feasible for a limited amount of numbers. – Tice

@c_k: I'm not sure what you mean. I see no limitation here - why couldn't you put each digit in a separate span, for instance? – Mumford

@JohnSaunders As long as you can actually change the content you are right. If you are working with a large amount of data, or (e.g. in a CMS setting) you don't have access to the data I think a more scalable solution as proposed by Richddr is better. Content should be isolated from its presentation in general imho. – Tice

@c_k: I never suggested changing the data! – Mumford

@JohnSaunders Somehow <span>888-555-1212</span> needs to be converted to <span>888-</span><span>555-1212</span>, right? So either you partition the numbers in input data or the <span>s are generated by some scripts. Both of these options are cumbersome when using a CMS. Or do I miss a point? – Tice

@Tice If you're formatting data BEFORE you store it, you're in for a world of pain when you need to change the format of the data later on. You should keep data as close as possible to what the user inputted after validating and sanitising it. So yes, just before displaying the data, write a one-liner that wraps them in spans - nothing "cumbersome" about it. – Main

Answer 2

Update

This answer is no longer accurate - see Daniel Byrne's answer for more information.

---

Using CSS only, it can be removed by overriding the styles used by Skype. Try adding these two lines to your stylesheet:

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;} 

Connive

Your solution worked really well for me, and feels like the correct solution (as opposed to breaking the phone number up into multiple span tags). Hooked on phonics worked for me! And, excellent name and avatar :) – Toady

Thanks for a suggeston. Nice solution, but a downside would be the dependencies on Skype's exact generated CSS element/class names. If they change it, the site breaks again. The span solution must be the most foolproof although not the prettiest. – Maritsa

the problem with breaking the phone # in pieces is that search engines won't read them as a phone number, but as 3 separate small numbers, so if people search for your business phone #, your page might not show in the results – Aura

Similarly, we shouldn't be obfuscating the very information you want the client to read and use - the tel: protocol should allow phone browsers to initiate a call prompt straight from the browser, rather than laboriously copy-pasting in the Phone app. – Anybody

Answer 3

Skype has taken to adding a randomly generated string of numbers to the end of their span tag, so the above response from Groo is not entirely accurate anymore. To correctly select all Skype tags on a page, use CSS3 wildcard selectors like such :

span[class^='skype_pnh_container'] {display:none !important;}
span[class^='skype_pnh_print_container'] {display:inline !important;}

the ^= operator causes an attribute selector to mach elements that have an class containing a value that STARTS WITH 'skype_pnh_container' and 'skype_pnh_print_container'

Helms

Answer 4

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Betray

It'd be a good solution, but if you look at the length of the troubleshooting on Skype Community board, it's probably not a very bulletproof way forum.skype.com/index.php?showtopic=78380 – Maritsa

Answer 5

The official solution is to add the following meta tag to the head section of your webpage. This will prevent skype from doing any reformatting on phone numbers.

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" /> 

This is a vendor-specific tag. See Skype Toolbar meta tag

Heraclitean

Answer 6

EDIT: Sorry, I just discovered that IE9 has issues with this solution as it does not support soft hyphens.

There is an alternative solution to this problem:

You can use a soft-hyphen character (­) inside the phone number to address the issue. For example, given the number

<span>0664 111 222 3</span>

change to

<span>0664&shy; 111 222 3</span>

and be happy :)

Kutzer

Answer 7

I just found that if you use the new HTML5 tel protocol it blocks the Skype junk from appearing:

<a href="tel:[phone]">1 800 123 4567</a>

Gleason

In contrast to all the above answers, this one worked for me. – Lesbos

Answer 8

I saw over the interweb a lot of possible solutions javascript solutions, meta tags, css and maybe I found an hack actually working for my websites, I tested on some computers and it work and I think it will work until skype don't change something in their code.

I was looking what is the skype exactly doing on our pages, and it creates some span around the phone numbers, as you already said, but it even add an tag at the end of the document, just after the body closed tag.

And here I saw the trick! Just before that object there is a configuration tag:

<span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span>

This is added dynamically by the plugin! but here the solution become obvious, to finalle stop skype messing with your design and avoid changing phone number the solution is to insert very early in the document the following tag:

<span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span>

notice the autoextractnumbers="0", here is the trick. The document will not validate anyway with that tag because there is no attribute "autoextractnumbers" but i noticed that it works even if commented:

<!-- <span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span> -->

And that's it! Enjoy your webpages free from messy plugins! And your web page will still validate correctly. Hope it works for you too! I have tested on a couple of computer 3 different browsers and 2 different skype versions, for now it works for me, let me know if it works for you too and if it works share it :)

Parboil

Answer 9

Try this. It substitutes spaces in the phone number with an invisible span + the original space char. So skype cannot understand it is a number and our beloved phone number stays the same :) I had to use this approach since I usually let the content administrator change phone numbers at his will therefore I could not use a hard coded number inside javascript. Of course your markup should look like <span class="phone_number">your number with some spaces inside it<span>.

$(document).ready(function() {
    if ($(".phone_number").length>0) {
        $(".phone_number").each(function() {
            $(this).html($(this).html().replace(/\s/g,"<span style=\"display:none\">_</span>&nbsp;"));
        });
    }
});

Victorinavictorine

Answer 10

I added a space in the first term of the number.

Instead of [phone] I entered ( 888 ) 222-3333

Granted: may look weird, but it works and it is simple.

Muscular

Answer 11

I added a hyphen in a span before the number and then set display:none on the span style, which worked.

    <span class="anti-skype-hyphen">-<span>01273 200 ***

Rosauraroscius

Answer 12

All you need to do is insure your CSS selector is more specific than the selector Skype uses. In the current skype style sheet they use:

span.skype_pnh_container span.skype_pnh_highlighting_inactive_common span.skype_pnh_text_span {...}

You will need to add an extra class — your own website context — to this selector, i.e.

.myclass span.skype_pnh_container span.skype_pnh_highlighting_inactive_common span.skype_pnh_text_span {...}

Wrennie

Answer 13

You can also leave the number alone and remove it with JS.

jQuery(document).ready(function(){jQuery('.skype_pnh_container').parent().html('(555) 222 - 3333');
jQuery('.skype_pnh_container').remove()}

It is harder to do in normal HTML, but Skype doesn't remove the parent container, so put the number in something with an ID, you can do a "getElementById" on it, set the innerHTML to the phone number.

document.getElementById('phoneNumberContainer').innerHTML='(555) 222 - 4444';

Waldrup

Answer 14

If you are using PhoneGap on iOS this can be a UIWebView issue (separate from Skype).

The following line fixes the problem if you don't want automatic links generated in UIWebView:

self.viewController.webView.dataDetectorTypes = UIDataDetectorTypeNone;

inside AppDelegate.m in -(BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions

Effete