› Home › Blogs › Chris Graham's blog ›

Skype be gone

Chris Graham's picture
Submitted by Chris Graham on Tue, 01/03/2011 - 00:53
in

OK, so it really started to bug me that every time I was theming up a website and have Skype installed that the toolbar would replace all of the phone numbers on my pages with their buttons.

Now, sometimes this is a good thing and I'm not giving off completely, but there are times when the buttons just mess up your design completely.

There are a few options you can use to show/hide the skype buttons:

Hiding buttons with CSS

You can add the following to your CSS to hide all of the buttons:

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

If you wanted to keep phone numbers in the main body of content on your pages Skype enabled, but say you had a differently styled phone number in your site header you could always target the header ones specifically:

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

This assumes you have an HTML element with an ID of header.

The downfall of this method is that the Skype toolbar will still be injecting your pages with random span tags, bloating your HTML.

The preferred way

The guys at Skype prefer it if you just tell the toolbar to not parse the page with a nifty little meta tag:

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

This will tell the Skype toolbar not to bother injecting the spans into any phone numbers on the page, therefore keeping all of your phone numbers in the styles you intended them to be in.

The problem now is, what if you want some of the phone numbers to appear as Skype buttons?

Well, apparently you need to wrap any phone numbers with some HTML comments like so:

<!-- sphoneid telnr="+442890877777" fileas="NICVA" -->028 9087 7777<!-- sphoneid -->

This didn't actually work for me in Google Chrome or Internet Explorer 8.  I don't know if it is a problem with my version of Skype.

Adding the tag in Drupal 7

OK, so say you want to remove all the buttons with the meta tag for all themes, how do you go about it?

Well with Drupal 7 the cleanest way to do it is with a custom module.  (If you wanted to do it on a per theme basis then you could manually paste the tag into your html.tpl.php template file.)

Create a folder within your sites/all/modules folder to hold the module.  It needs to be something unique, not used by another contributed module or theme... lets call it skype_disable.

Inside your new folder create a new file called skype_disable.info and add the following contents:

name = Skype Removal Tool
description = Adds a meta tag to disable the Skype toolbar from parsing phone numbers
core = 7.x

Notice how the name can be anything you want, this will show up as the name on the module listing page along with the description.  The core option just tells Drupal that the module is built for Drupal 7.

Next create another file called skype_disable.module and add the following:

 

<?php
function skype_disable_preprocess_page(&$vars) {
  $element = array(
    '#tag' => 'meta',
    '#attributes' => array(
      'name' => 'SKYPE_TOOLBAR',
      'content' => 'SKYPE_TOOLBAR_PARSER_COMPATIBLE',
    ),
  );
  drupal_add_html_head($element, 'skype_toolbar_disable');
}

This function implements hook_preprocess_page to allow us to execute some code before the page headers are sent.  The drupal_add_html_head function will add a tag into the <head> section of our HTML.  In this case we are telling it to add a meta tag and giving it some attributes so that it will output this:

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

There are no admin settings required, so once you enable the module it will start working.  No more Skype buttons.