Online Status Indicators with Ajax

Back in October, Tantek Çelik wrote an entry on the Microformats blog, featuring my online identity, jaredhanson.net, as an example of a beautifully styled hCard.

While I don’t claim to be particularly adept at web design, especially compared to the other two featured individuals (Tim Van Damme and Rogie King), my use of Ajax to display a status indicator was highlighted.

Since that time, I’ve had numerous people inquire as to how I added this functionality to my website. In response, I’m supplying the source code that I use. Download: web-presence.zip

Each of the instant messaging networks I have an account on (AIM, Google Talk, Windows Live, Skype, and Yahoo!) have some form of API or web-based badge which can be queried using HTTP. On my server, I am running PHP code which issues requests to the particular service and translates the response into a JSON object. When my page loads, Ajax requests are made to retrieve these JSON objects. Based on presence, the image is updated to reflect whether I am available or away.

For those interested in implementing similar functionality, this code should get you off the ground. Remember to use the required credentials or keys for your account. I’ve made notes where insertions are necessary. Good luck!

Comments

david swain
says:
January 30, 2010 at 4:56 PM

Hello

I have downloaded the files and i can get skype working but not msn, it always shows offline. Any ideas? Im on a mac (not sure it should make any difference) and have tried username@hotmail.com and the numeric id. neither work.

Help!

David

david swain
says:
January 30, 2010 at 5:38 PM

Jared

Ignoe last comment i sorted it!

Rohit Khare
says:
May 28, 2010 at 9:42 AM

I see that OpenAIM is no longer issuing presence keys for their system anymore, in favor of larger bizdev partners only. Sigh. At any rate, mad props for your card! Tantek convinced me to take my first steps in creating my own top-level web presence based on your work. Thanks, Rohit

Post a comment