Some of our users are in environments where they can’t embed the hab.la javascript directly onto their websites. As a workaround we developed a method of showing an image that displays hab.la status on their websites.

A few days ago, I noticed that the status display was a little slow for my liking. In fact, it was running as a normal CGI ( a big no no), but since not to many people were using it, it’s performance wasn’t that big of a deal.

Today, I increased performance by 1800%, speeding up the status image response time from ~0.474 seconds to ~0.026 seconds.

ben@lyle:/var/www/online# time curl "http://dyn.hab.la/online/image2.cgi/4324-24618-10-8812/image.png"

real    0m0.474s
user    0m0.016s
sys     0m0.004s

Versus:

ben@lyle:/var/www/online# time curl "http://hab.la/status/4324-24618-10-8812/image.png"

real    0m0.026s
user    0m0.012s
sys     0m0.004s

What sped it up so much? First, I replaced the CGI script, with a very lightweight webserver. This made it so that python didn’t have to instantiate from scratch every time image.cgi was loaded. Second, I replaced the old calls to our RPC server, with newer calls to our memcacheD servers. There are still too many MySQL calls in this process, but optimizing those into pure memcache can wait for a while.

To learn more about using Hab.la without Javascript, take a look at My blog post or our tutorial for websites without Javascript.

A few months ago Roland made some really cool online/offline images for people on myspace and other sites that block javascript to use when hab.la enabling their website.

At the time we were rewriting a lot of the core JavaScript, so recently this took a back seat to core functionality.

Below you will find the HTML code necessary to add hab.la to your website (no javascript required), be sure you change the fields labeled SITE_CODE, to your site code found in the My Hab.la Page.

(Once installed on your site, clicking on the produced image will create a link to hab.la where your visitors will be able to chat with you.)

Online

Offline

<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/1.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

Online

Offline

<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/2.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

Online

Offline

<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/3.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

Online

Offline

Hidden when unavailable

<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/4.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

Online

Offline

<div>
<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://dyn.hab.la/online/image.cgi/SITE_ID_HERE/4.gif" border=0></a><br/>
<small>Powered By <a href="http://hab.la" target="_blank">Hab.la</a><small>
</div>

For information on how to use your own custom images, take a look at the below blog post.

http://hab.la/articles/2007/10/19/online-offline-image-the-simple-way

[We are still working on a clean method of performing the same tasks using just javascript – in that we just haven’t got around to it]

Ok, I’ve seen a lot of people looking for an option to show whether you are offline or online without javascript. (Ok a lot meaning, just a few) First, you’ll need to know your site-ID.

You can find this in My Hab.la, it will be in the javascript for your site. wc_init("THIS_NUMBER_IS_YOUR_ID")

Now here’s the trick:

The Code:

<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://images.async.hab.la/status/SITE_ID_HERE/image.png?online=ONLINE_IMAGE_URL
&offline=OFFLINE_IMAGE_URL" border=0></a>
<!-- be sure to remove the spaces when you paste the code -->

An Example:

<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://images.async.hab.la/status/SITE_ID_HERE/image.png?
online=http://www.griffith.k12.in.us/*Beiriger/FROGS/frog.jpg
&offline=http://www.epa.state.il.us/water/conservation-2000/lake-notes
/aquatic-plant-management/images/lilly-pad.gif" border=0></a>

This Produces:

i.e. A frog when someone at Hab.la is online, or a lily-pad when we are gone. I think you can see how this same method could be extended for offline/online status on any page that doesn’t support javascript. We’ll have longer tutorial for creating an offline/online image that work with the javascript later.

This same method can be used for placing a hab.la link on myspace. [However, they don’t let you include images with ‘?’ if I remember correctly. They might now even like .cgi URLs.. in any case for Myspace you can probably do the below:]

<a href = "http://static.hab.la/js/html/url_handler.html?siteid=SITE_ID_HERE">
<img src="http://images.async.hab.la/status/SITE_ID_HERE/image.png" border=0></a>

Which will produce: