This evening I did a little PHP and JavaScript work to embed the Google Talk Badge into my blog's home page and make the visibility of the badge configurable from within Firefox. The Google Talk Badge is an embeddable chunk of HTML that allows anonymous website visitors to chat with you through your website, while you use Google Talk or any compatible chat client (I like Adium on Mac and Digsby on the PC). The configuration through Firefox is facilitated by the new (early alpha) Ubquity user interface component - more about that in a moment.
Getting Google's script is easy - just sign up for a Google Account, then go to the help page (linked above) and follow their links to the badge creation form. The badge's appearance is configurable, but I liked the chat bubble look and feel. The final component script looks something like this:
I used a little CSS and some jQuery magic to make the chat bubble hover over the standard "Contact" link and fade in at page load time.
Now in and of itself, the Google Talk Badge is pretty cool. It features three statuses: Available, Away and Offline. And it responds quickly (though not without a page refresh) to my desktop client's status changes. So throughout my day I need only change my client's status to indicate my availability. But having an eye for aesthetics, it quickly occurred to me that I wanted my extended unavailability to be represented by a total absence of the widget - something that isn't built into the widget's behavior.
An associate of mine recently introduced me to Ubiquity for Firefox. Ubiquity is to Firefox what Spotlight is to Mac users and what Launchy is to PC users: a programmable natural language interface that features fast access to a range of functionality. So, for example, with any Web page visible in Firefox, if I type ALT + SPACE (my chosen keyboard shortcut), a box opens prompting me to type a command. If I type "define ubiquity", this is what I see.
The Firefox Ubiquity user interface in action.
Once installed, you can access custom commands by typing the address chrome://ubiquity/content/editor.html into the Firefox address bar. The editor is basically a big textarea, and anything you type therein is saved automatically and in realtime. The scripting language - like most everything else in Firefox - is built on top of JavaScript. Even better still: all Ubiquity scripts have complete access to the jQuery APIs.
The Ubiquity project is well documented, so I won't go into the syntax for scripting commands. The purpose of my first Ubiquity scripts are to hide and reveal my Google Talk Badge. Ubiquity provides the client, and a PHP script living in and utilizing WordPress provides the server. The end result is a simple REST interface that allows me to toggle the visibility of the badge without changing Web pages and without logging in. My final Ubiquity scripts look like this:
CmdUtils.CreateCommand({
name: "connect-aaron",
preview: "Enables the 'Connect with Aaron' balloon on blog.collegeman.net.",
execute: function() {
jQuery.get(
'http://blog.collegeman.net/...',
{ action: 'enable', key: '' },
function() {
displayMessage( 'Chat enabled.' );
}
);
}
});
CmdUtils.CreateCommand({
name: "disconnect-aaron",
preview: "Disables the 'Connect with Aaron' balloon on blog.collegeman.net.",
execute: function() {
jQuery.get(
'http://blog.collegeman.net/...',
{ action: 'disable', key: '' },
function() {
displayMessage( 'Chat disabled.' );
}
);
}
});
With these scripts in place, I need only type ALT + SPACE followed by connect-aaron and press enter, and my Google Talk Badge magically appears on my blog. The Ubiquity command disconnect-aaron has the opposite effect.
Check back soon for more ways to use these technologies - Google Talk, JavaScript and jQuery, and Ubiquity - to build cutting-edge user interfaces that solve real-world problems.
