Geekology

How to disable auto-formatting of telephone numbers by the Skype Browser Plugin

If your website displays telephone numbers, visitors who have Skype installed might see a broken layout.

This is due to the Skype Browser Plugin functionality that parses each webpage visited to find textual telephone numbers and replace them with "Call via Skype" image links:

To keep the Skype Prowser Plugin from modifying your content or breaking your layout, Skype proposes that web developers add the following metadata tag to their websites' HTML HEAD sections:

<meta name="SKYPE_TOOLBAR" CONTENT="SKYPE_TOOLBAR_PARSER_COMPATIBLE">

This metatag is supposed to instruct the Skype Browser Plugin to only reformat numbers that are "tagged" with the following HTML comment:

<!-- sphoneid telnr="+27210000000" fileas="Willem van Zyl" -->021 000 0000<!-- sphoneid -->

... but unfortunately it won't work at all if you're not using the Transitional XHTML DOCTYPE. Even if you are using Transitional XHTML, you can still expect the metadata tag to only work occasionally so long as you used the exact capitalization, attribute order, and wording above. Lastly, the tag above isn't valid XHTML (it doesn't have a closing slash), so its usage is not ideal.

The "jquery.geekSkypeRemover.js" jQuery plugin

This plugin extends jQuery with a new function that will spend a predefined period of time checking for "Skype Call" buttons dynamically created by the Skype Browser Plugin. Any such buttons it finds will be replaced with the original textual telephone number content. The predefined period of time is required since the Skype Browser Plugin might take a few seconds to add the "Skype Call" buttons to the page after it finishes loading.

Simply replacing the elements dynamically added by the Skype Browser Plugin with the original textual telephone numbers would cause the "Skype Call" buttons to be immediately recreated, so this plugin inserts the original textual telephone numbers with hidden underscores ("_") as the second characters.

/*
 * jquery.geekSkypeRemover.js - jQuery plugin to remove Skype Call buttons
 * 
 * Version 1.0
 * 
 * This plugin extends jQuery with a new function:
 * 
 *   - $.geekSkypeRemover(10000)
 *       Check for Skype Call buttons for a maximum of 20 seconds.
 * 
 * This function checks for 'Skype Call' buttons dynamically created by the
 * Skype Browser Plugin for a defined period of time and replaces any such
 * buttons it finds with the original textual telephone number content.
 * 
 * The predefined period of time is required since the Skype Browser Plugin
 * might take a few seconds to add the Skype Call buttons after loading of
 * the page completes.
 * 
 * Simply replacing the elements dynamically added by the Skype Browser Plugin
 * with the original textual telephone numbers would cause Skype to recreate
 * the Skype buttons, so this plugin inserts the original textual telephone
 * numbers with hidden underscores ("_") as the second characters.
 * 
 * The following metatag is supposed to perform the same function, but it works
 * inconsistently across browsers and DOCTYPES:
 * 
 *   <meta name="SKYPE_TOOLBAR" CONTENT="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
 *
 *   <!-- sphoneid telnr="+27210000000" fileas="Willem van Zyl" -->021 000 0000<!-- sphoneid -->
 * 
 * 
 * This code is in the public domain.
 * 
 * Willem van Zyl
 * willem@geekology.co.za
 * http://www.geekology.co.za/blog/
 */
(function($) {

  /**
   * Remove Skype Call buttons that were dynamically added, e.g.:
   * 
   *   $(document).ready(function() {
   *     $.geekSkypeRemover(10000);
   *   }
   */
  $.geekSkypeRemover = function(microsecondsLeft) {

    //check if the predefined time limit was reached:
    if (microsecondsLeft == 0) {
      return false;
    }

    microsecondsLeft = microsecondsLeft - 500;


    //seek elements added by the Skype Browser Plugin; remove them if
    //they exist or try again in microsecondsLeft microseconds if they don't:
    if ($('span.skype_pnh_container').length == 0) {
      //no Skype Call buttons exist (yet):
      setTimeout('$.geekSkypeRemover(' + microsecondsLeft + ')', 500);
    } else {
      //Skype Call buttons exist:
      var originalText = '';

      //determine and set the original textual telephone number:
      $('span.skype_pnh_print_container').each(function() {
        originalText = $(this).html();
        originalText = originalText.substring(0,1) + '<span style="display: none;">_</span>' + originalText.substring(1);
        $(this).after(originalText);
      });

      //remove the Skype Call button elements:
      $('span.skype_pnh_container').remove();
      $('span.skype_pnh_print_container').remove();
    }


    return true;

  };

})(jQuery);

Using the "jquery.geekSkypeRemover.js" jQuery plugin

To use the plugin, include it and jQuery in the website's HTML head:

<html>
<head>
  <title>Hello, world!</title>
  <script src="javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
  <script src="javascript/jquery.geekSkypeRemover-1.0.min.js"     type="text/javascript"></script>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

... then execute it from within jQuery's "$(document).ready(...)" function:

$(document.ready(function() {
  $.geekSkypeRemover(10000);
});

The jquery.geekSkypeRemover.js plugin version 1.0 can be downloaded here, or downloaded in a minified form here.

Do you like this? Share it:

Tweet