The Web Design Journal

Better Skype embedding

Posted on 29. Jun, 2006 by Daniel Aleksandersen in Web Development

Embedding a Skype button on Websites and blogs have grown quite popular.

But it can most certainly be done better, and give readers a wider spectrum of contact options. Here is a good way of doing it, with code examples:

The example below provides readers with several contact options, a live status indicator and information on what software that is required to use the tools.

Daniel Aleksandersen

Chat | Leave voicemail | Profile | Add

Requires Skype.

Over at Aleksandersen’s blog this code has been implemented and styled to fit neatly into the sidebar. And a nice toolbar at the top of Birger’s blog.

The actions can be customized in accordance to the Skype link URI.

Remember! The status indicator must be switched on to be operational.

Code example

<h4>Full Name</h4>
<p class="skypetools">
<a href="skype:username?chat" title="Send instant message" type="application/x-skype"><img src="http://mystatus.skype.com/smallicon/username" alt="Skype connection status" title="Skype status" style="border:none;width:16px;height:16px;" /></a>
<a href="skype:username?chat" title="Send instant message" type="application/x-skype"><strong>Chat</strong></a> |
<a href="skype:username?voicemail" title="Leave a voicemail" type="application/x-skype">Leave voicemail</a> |
<a href="skype:username?userinfo" title="View Skype profile" type="application/x-skype">Profile</a> |
<a href="skype:username?add" title="Add to Skype's contact list" type="application/x-skype">Add</a>
</p>
<p><small>
Contact actions requires <a href="http://share.skype.com/in/102/268643" title="More information and free download.">Skype</a>.
</small></p>

Note: Voicemail is a payed service and must be enabled to work. Change it with call to get calls directly instead.

Detecting Skype

In HTML (but not in XHTML) pages, users without Skype can be informed that Skype is required and provided with a download link.

To do so: add the JavaScript below right above </body> and add onclick="return skypeCheck();" to all Skype links.

<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>