How To Prevent Skype from Highlighting Phone Numbers

In this tutorial I will show you 3 solutions, from a developer´s point of view, how to prevent Skype from automatically highlighting phone numbers displayed in your Website. Also I will show you, from a user´s point of view, how to disable Skype phone highlighting in Internet Explorer.

The Problem

If you have Skype installed on your computer and you use Internet Explorer as your Web browser, then there is a good chance that Skype highlights phone numbers on Web pages as shown in the image below. I find this Skype “feature” intrusive. This Skype modification is not aesthetically appealing, is obtrusive, does not flow nicely with the page design, and sometimes breaks the layout on the page.

Phone number highlighted by Skype as shown in Internet Explorer.

The XHTML markup associated with the image above is the following:

<h2>Get in touch</h2>
<!-- code removed for brevity -->
<span class="phone">(570) 585-1026</span>

My Observations:
The Skype phone number highlighting seems to affect only IE browser. The other browsers are not affected. However; I will not be surprised if other browsers are (or will be) affected depending if skype add-ons exist (or will exist) for them.

The Solutions: From a Developer´s Point of View

For a Web developer, I am going to list 3 solutions. Choose the method that best fits your needs. All 3 solutions passed XHTML 1.0 Transitional and Strict validation. After you implement any of the 3 solutions, you should expect that Skype is prevented from highlighting phone numbers, as shown in the image below:

Prevent Skype from highlighting phone numbers, by using one of the 3 solutions mentioned, as shown in Internet Explorer.

Solution1: Use HTML Soft Hyphen

Put the soft hyphenation somewhere inside the phone number in order to prevent Skype from recognizing it as a phone number. Make sure that the phone number does not split across two lines. This is an easy solution that passes validation.

<h2>Get in touch</h2>
<!-- code removed for brevity -->
<!-- In HTML, soft hyphen is represented by the character entity 
reference &shy; (&#173; or &#xAD;)-->
<span class="phone">(570)&shy; 585-1026</span>

<!-- OR you could do the following-->
<span class="phone">(570) 585&shy;-1026</span>

Reference:

  1. HTML 4.01 Specification – Hyphenation

Solution2: Use CSS Trick

This is another method to prevent Skype from highlighting phone numbers of Web pages by injecting code that splits the phone number and thus preventing skype from recognizing it as a phone number. Also, from an SEO perspective, this method is harmless since between the <span> tag (with the display: none property), there are no hidden links, no hidden images, no stuffed keywords to improve search ranking, no stuffed text, and no hidden malicious code.

<h2>Get in touch</h2>
<!-- code removed for brevity -->
<!-- Insert invisible <span> with "-" inside phone number. The hyphen will not show, 
but that's fine. You could keep space between the set of numbers. -->
<span class="phone">(570) 585<span style="display:none;">-</span> 1026</span>

Solution3: Use Meta Tag

This solution is discussed in the Skype community Forum referenced below. Add a vendor-specific meta tag. This solution is especially useful for Web pages that display a lot of data (phone numbers or otherwise) that are highlighted (mistakenly or not) by Skype. In this case it will be much easier to add one meta tag at the head of the HTML document instead of modifying every single number on the page. This method, like the previous two, validates for XHTML 1.0 Transitional and Strict.

At the head section of your HTML document, insert the following Meta tag.

<head>
<title>Blue Olive Online</title>
<!-- code removed for brevity. -->
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<!-- code removed for brevity. -->
</head>

Reference:

  1. Prevent Skype Toolbar from recognizing phone Numbers

The Solution: From a User´s Point of View

If you are an Internet Explorer Web user, and you are annoyed by this Skype feature, then follow the steps below. This solution is tested for IE8. I am not sure about other versions of Internet Explorer.

  1. From your IE browser, go to: Tools -> Skype add-on for Internet Explorer
  2. From the dialog box, you have 2 choices:
    • Either uncheck the box that says "Turn number highlighting on"
    • Or click "Uninstall" to completely remove this Skype add-on.
  3. Click "Ok" and Skype will no longer automatically highlights phone numbers in Web pages.

Reference:

Note: If the Video below does not run in your browser, either use a different browser or save it on your computer.

Did you know!
By following any of the 2 choices above, you also prevent Skype from automatically highlighting your phone number in your Email´s signature.

Conclusion

This tutorial lists 3 solutions for Web developers that prevent Skype from intrusively highlighting phone numbers in your Website. Also it shows Web users how to disable automatic Skype phone highlighting in Internet Explorer. This issue had been reported to Skype almost four years ago. It seems that Skype views this as a feature and not an issue.

Do you have anything to say? If so, please share it in the comments section.

If you enjoyed this post, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader, or feel free to donate. Thanks!

About the Author |
Boutros is a professional freelance Web designer, Web developer, Software Engineer, and Blogger. He is the Chief developer at Blue Olive Online. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on StumbleUpon, Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

53 Responses to “How To Prevent Skype from Highlighting Phone Numbers”

  1. TaaDaaGina says:

    This was great thank you!!!

  2. otariki says:

    Thanks, helpful.

  3. Manes Peter says:

    This one helped me to solve design issues. Thanks for it!

  4. Raul says:

    Thanks for the tips!!

  5. Eileen says:

    When I go to Tools, I don’t have the “Skype add-on for Internet Explorer” Please help!
    Thank you.

  6. Renji says:

    Thanks.

  7. John Ellis says:

    Very thorough and useful work! Thanks!!

  8. Dibakar Jana says:

    Thanks a lot. Really helpful. Works perfectly.

  9. Will says:

    Seems in the latest version of Skype you need to use the meta hack mentioned above, and

    <meta name="format-detection" content="telephone=no">
    

    The CSS trick no longer seems to work in Chrome.