When you install Skype on a PC, it gives the option to install a component on your web browsers to convert telephone numbers into links to initiate a chargeable Skypeout call when clicked.
This may sound like a good idea, however if you have designed a website and want your contact area to remain looking how you designed it with the fonts, text size and colours your have chosen, this can be seen as an act of vandalism.
The method outlined by Skype to prevent this defacement from happening involves adding a meta tag to the document head to tell the skype component to not touch the numbers, however this does not work reliably and in my experience is usually ignored.
My favourite solution
Rather than rely on Skype’s unreliable override, my preferred solution is to make telephone numbers look like telephone numbers to visitors, but not to Skype. To do this we can add an underscore within a span in the middle of the telephone number, and set the span to not display.
<span style="display:none;">_</span>
Stop Skype hijacking telephone numbers in WordPress
I turned this into a simple function to go into either the theme’s functions.php or a functionality plugin which adds an easy-to-remember shortcode, ie the text can be inserted within any phone number but putting a [noskype] shortcode in the middle of the number.
// ==============================================
// PREVENT SKYPE CLICK-TO-CALL HIJACK
// add [noskype] within the phone number
// cubecolour.co.uk
// ==============================================
function cc_noskype( $atts, $content = null ) {
return '<span style="display:none;">_</span>';
}
add_shortcode('noskype', 'cc_noskype');
The easiest way to prevent Skype from hijacking your site is to use this simple CSS. Using this method does not require Javascript or PHP, and it also does not require you to ‘hide’ anything with CSS. Check it out:
span.skype_pnh_container {
display:none !important;
}
span.skype_pnh_print_container {
display:inline !important;
}
Just add that to the top of your CSS, and keep working as usual, no hacks needed.
Thanks for a suggeston Anthony. 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.
I tried Anthony’s solution, but it didn’t work for me.
You can just add this Meta tag
Which is arguably better than sticking content into every phone number on the site and I HATE putting !important into my stylesheets, ick!
Bah it ate my tag meta name=”SKYPE_TOOLBAR” content=”SKYPE_TOOLBAR_PARSER_COMPATIBLE”
Thanks for the comment Brad. The metatag is mentioned but not listed in the article as in my experience it is sometimes ignored by skype.