43

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?

4
  • 3
    AFAIK its a plugin in your browser. Go to the extensions page and disable/uninstall it.
    – ZeissS
    Commented Jun 13, 2010 at 13:47
  • 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.
    – Ain Tohvri
    Commented Jun 13, 2010 at 13:52
  • 1
    @ZeissS I think he means through the use of JavaScript, thus having the page to disable Skype's mangling... Commented Jun 13, 2010 at 13:53
  • 3
    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....
    – pearcewg
    Commented Jul 15, 2011 at 22:41

14 Answers 14

45

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

9
  • @Yuval: didn't I just write to you? (stackoverflow.com/users/255562/ashish-gupta) Commented Jun 13, 2010 at 14:05
  • @Yuval: but you see the resemblance? Commented Jun 13, 2010 at 14:21
  • I've used this method to do a quick plugin that some might find useful. owenmelbz.github.com/noSkype
    – owenmelbz
    Commented Feb 27, 2013 at 15:02
  • That is only feasible for a limited amount of numbers.
    – c_k
    Commented Jun 2, 2015 at 12:40
  • @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? Commented Jun 2, 2015 at 14:05
39

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;} 
4
  • 1
    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 :)
    – pearcewg
    Commented Jul 15, 2011 at 22:40
  • 1
    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.
    – Ain Tohvri
    Commented Nov 9, 2011 at 1:04
  • 8
    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
    – Rodolfo
    Commented Mar 2, 2012 at 20:00
  • 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.
    – iono
    Commented Aug 13, 2013 at 7:48
14

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'

13

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

1
13

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

0
5

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 (&shy;) 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 :)

4

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

<a href="tel:+18001234567">1 800 123 4567</a>
1
  • In contrast to all the above answers, this one worked for me. Commented Mar 2, 2016 at 21:40
2

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 :)

0
1

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

Instead of (888) 222-3333 I entered ( 888 ) 222-3333

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

1

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 ***
1

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 {...}
1

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;"));
        });
    }
});
0

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';

0

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.