My last blog post talks about how you can link to hab.la from websites that don’t support JavaScript (i.e. eBay and Myspace). I’ve taken that blog post and converted it into a tutorial page, here, to make it easier to read and fill out.

In other news, site owners using Hab.la now have two options when it comes to changing the nickname displayed when they are chatting with site visitors.

Using Account Settings

1. Log into Hab.la
2. On the “my Hab.la” page select “settings”
3. Change the ‘Nickname’ value
4. click ‘update’

Using JavaScript

Replace your existing Hab.la code with the below code:

<script type="text/javascript" src="http://static.hab.la/js/wc.js"></script>
<script type="text/javascript">
config = wc_config();
config.vars["local_name_override"] = "Your display name";

wc_init("___YOUR__ID____",config );
</script>

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:

I spent today honing my Google gadget writing skills. Unfortunately Google Gadgets that work on Google Pages are wrapped in IFRAMES so I couldn't make a gadget to embed the floating Hab.la into your Google page. (Though you can still paste the HTML into Google page) We need to do a little bit more testing before we add the Gadget to the various Google Gadget directories. The below link is pretty much useless, as it will just add the Hab.la widget to your iGoogle web page.

What you really want to do is log into your google pages account (Pages.Google.com) and edit a page on your site, near the bottom of the screen is an [Add Gadget link], choose to add a gadget from a URL, and as the URL specify: http://static.hab.la/html/habla_gadget.xml
 
You'll need your Hab.la Site-ID which can be found on your account page, pull out the series of numbers passed to the wc_init() function. If you examine the code wc_init("___THIS_IS_YOUR_ID___")

That's it for now, in other news I've been revamping the JavaScript API that drives the display of hab.la on your page, and pretty soon there will be documentation explaining all the cool things you can do with your hab.la window.

One last thing, the MySpace and BlogSpot Hab.la tutorials are on their way :-)

Lots of new stuff. Maybe I should update more than once every two weeks. OK, let's see here...

• We realized that the main web page didn't really ever explain what exactly Hab.la is, so we created a tour (with a little help from a beta tester-- thanks Dad.)
• Several users were confused by seeing "me" and "you" in the chat windows, so now it uses your actual Hab.la username instead.
• Nearly all Mac users have iChat pre-installed, and most Linux users are probably already using Gaim or Pidgin, but we figured most Windows users don't already have a Jabber client. We wanted to ease the pain of installing a new IM program and figuring out how to add your Hab.la account. So I wrote a wrapper around the Pidgin installer; now you can download Pidgin with your Hab.la account already set up. (Overkill? Maybe, but the computer hasn't complained yet.)
• Ben came up with a crazy hack to allow you to add Hab.la to sites where Javascript is disabled (e.g., MySpace or Facebook). Details forthcoming.

We've also been diligently fixing bugs that have vexed our testers, and the next phase of the beta will officially begin very, very soon. Maybe as soon as tonight if I'm feeling ambitious. Or maybe not, if I'm feeling like going to the beach instead.