« Optimizing images for the Web | Home | JavaScript and XHTML »

Better Skype embedding

Words by Daniel Aleksandersen on 2006-06-29

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

Skype connection status 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>

2006

Copyright © Daniel Aleksandersen – Licensed under GNU FDL

Words: Daniel Aleksandersen on 2006-06-29 at @748.
Meta: Comments | PermaLink | TrackBack
Social: Add to del.icio.us | Sphere it
Tags:

Related entries

4 comments

[...] Update: Go over to TheWDJ, and look how it is done. [...]

birger’s personal blog » Blog Archive » Skype Toolbar at 2006-06-29 @934.

The next version of skypeChekc.js will work with XHTML pages. It will be around in a week or two.

Daniel at 2006-07-01 @976.

thanks!!! I will use this on my own website soon!

Nami E. at 2006-09-03 @377.

I knew about the callto:// thing. I had no idea Skype had it's own URI scheme.

Uhma T. at 2007-08-14 @268.

Leave your comment




Find entries


Recent entries
News feed icon Get a free subscription to new entries in the The Web Design Journal!
Reader participation
Share your thoughs, and knowledge with other readers by submitting your own comments!
License

Creative Commons License
The blog entry Better Skype embedding is licensed under a Creative Commons Attribution-ShareAlike 2.5 License. More legal notes.
This blog is compatible with mobile browsers.
Home | Senior Cell Phone | California Amusement Park | Professional SEO Consultant | Legal Buds | San Diego Casino |
© 2006 - 2008