HOW-TO: Make an AJAXified Digg-It button (with bonus RSS subscription!)

June 19, 2006

HOW-TO: Make an AJAXified Digg-It button (with bonus RSS subscription!)

I made a little widget for my blog that supports both bookmarking (to popular bookmarking sites like Digg) and subscribing to my site (via popular RSS readers like BlogLines). The widget uses a little javascript to hide the (hideously tacky) icons of the various sites until the user clicks on it. Check out the top right corner of my blog, or the bottom of this article, for a demo.

The cool things about this widget are:
1) It is much less ugly and distracting than current solutions (which embed a gaudy list of icons into your blog).
2) It is independent on any server-side environment: because it's all in javascript, it can run in WordPress, Moveable Type, Drupal, or any other blogging engine or CMS. In fact, it can run in any web page at all.
3) It frames RSS subscription in language the user can understand (e.g. "Add this to Bloglines", rather than "XML").

(update: for those playing along at home, you can download the javascript here, css here and here, and the html here

The usability of the typical blog approach to RSS (directly linking to XML feeds) is very low, as Peter Merholtz , Jeffry Veen, James Bennett, and Keith Robinson have all noted.

The problem is that users don't know what RSS or XML is, and certainly don't want to look at XML code. The answer to the RSS usability riddle is that subscription needs to be framed in terms of the tool the user is subscribing with. "Add this to Bloglines" makes much more sense to the average reader than "XML" or "RSS".

Unfortunately, as RSS readers proliferate, this means that more and more links need to be added to your site ("Add this to MyYahoo,", "Add this to MSN", etc). My widget solves this problem by hiding the links until they are needed.

The code was easy as pie to write. Below is a brief explanation of how I did it, with relevant code snippets.

1) Hiding and revealing the widget (which is wrapped in a Span) is accomplished by simply setting el.style.display to "none" for the Span that holds the widget.

//html code
onClick="switchMenu('subscribeit_menu');"

//javascript code
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

2) Links to the various bookmarking and RSS subscribing sites are provided by assigning to "javascript:location.href", like so
href="javascript:location.href='http://del.icio.us/post?v=2&url='+_getURL()+'&title='+_getTitle()+' '"

3) The URL of the current page is extracted using window.location.href, like so :

function _getURL(){
return encodeURIComponent(window.location.href);
}

4) Future planned improvements include removing the ugly hardcoding of the site url in the javascript
function _getRootURL(){
//TODO: use window.location.hostname, host, or SOMETHING!!!
return 'http://www.jonathanboutelle.com'
} .

In general, there's no rocket science here, and it only took a couple of hours to code. These kinds of quick tactical improvements to existing sites are where JavaScript really kicks ass!

Subscribe to or Bookmark this site

Previous Comments

That's a pretty tidy bit of AJAX.

For the social bookmarking though I use socializer, which centralises all the social bookmarking sites into 1 page for you.

Go check it out at: http://ekstreme.com/socializer/

That's not to dismiss you very beautiful solution to all those ugly logos, I don't believe there is currently a version to handle RSS feeds.

Jolyon

Posted by: Jolyon at June 20, 2006 05:04 AM

Thanks for your kind words, Jolyon!

Socializer adds an extra step to the process (Go to another page, THEN select bookmarking system, instead of selecting it in page).

However, they support WAY more bookmarking systems then mine does or ever will.

They should make a little widget like mine ... that would probably be really popular!

Posted by: Jon at June 20, 2006 08:47 AM

Maybe you can offer a simple RSS link as well? It was kind of hard to add you to my feedreader.

Posted by: Vish at June 20, 2006 10:08 AM

Hey Vishnu!

I offter a straight RSS feed as well (on right column, below the fold).

What problem did you have adding me? Do you use a reader I don't support? Or did you encounter a bug or usability issue?

Posted by: jon at June 20, 2006 11:09 AM

Hello. I'm not sure how I found your page, but I'm interested in adding this code to my pages, if possible.

At first I thought I could cut and paste the .html from the source view. However, I notice that this would reference your site for images and such, and that's probably not what you want.

Do you have time to explain more fully?

Many thanks.

Posted by: m hettinger at June 25, 2006 02:01 AM

Hey M,

I have added links to a file that has the entire html needed. I also added links to the .js and .css files.

Steps your should probably do are
1)upload js and css files to your own server.
2)edit js so that it doesn't refer to my site (otherwise your readers will subscribe to me! Prolly not what U want.)
3)add links from head of your html, and add the html wherever you want it in your blog template.
4)Download images from my site, upload to your own, and change the links.

Hope that helps! If theres a lot of interest in this widget I might package it in a more user-friendly format, but no time at present!

Posted by: Jon at June 25, 2006 07:21 PM

Hello there. Nice concept. But I think the implementation could be slicker. Here are my two cents:

The onclick event handlers can be removed, and instead use Javascript DOM (using window.onload) to implement this feature. This would really clean up the markup and also separate behaviour from structure.

Also, currently those viewers who have Javascript turned off (supposedly around 8% of people) cannot access the Bookmark and Subscribe links at all. So, I think the best way is to provide a normal view for all users, and then using JavaScript to detect and change the format and apply this functionality to JS enabled browers.

Hope I make sense.

Cheers.

Posted by: Kishore at July 6, 2006 03:11 AM

Hey Kishore!

The first suggestion makes sense.

The second suggestion would lead to a flickering effect on page load, no? The links for bookmarking would appear, then disapear for javascript users.

I had this problem with my other AJAX widget, the category browser (on the right column). I had to make it invisible until the page had loaded, because otherwise I got a flicker effect like I'm describing.

Posted by: Jon at July 6, 2006 09:17 AM

Yes, I agree that the second suggestion would inevitably lead to the flickering effect. But is this solved by the javascript addevent() function?

But I guess it is a trade off really. Just another instance of accessibility clashing with usability.

Posted by: Kishore at July 7, 2006 04:41 AM