Screencasts

Improving the Delicious Bookmark Button with jQuery

Download Files ↓

Show Notes

The default Delicious Bookmark Button is obtrusive and broken when you switch off JavaScript. We show you how to improve and build an unobtrusive one with jQuery.

Links

What you'll learn

  • How to build an unobtrusive JavaScript Delicious Bookmark Button with jQuery
  • How to url encode your links and titles for Delicious in Ruby on Rails and PHP

Script

Welcome to the Improving the Delicious Bookmark Button with jQuery screencast. We’re going to assume you have a basic understanding of jQuery. If you’re new to jQuery we recommend watching our free introduction screencast on jQuery. While we’ll be specifically talking about Delicious here, the techniques can be used in other scenarios.

Sometimes we want to offer users the ability to bookmark pages or articles on Delicious.

Improving Delicious’ Code

Delicious provides “Bookmark this on Delicious” buttons on their website.

<img src="http://l.yimg.com/hr/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>

However their code is in-line and obtrusive. When JavaScript is switched off you can’t bookmark the page easily. Let’s fix that!

Download the zip file under this video on Screencasts.org to follow along.

Here we have two “articles”, titled Introduction to jQuery, and Using AJAX with jQuery, and some lorem ipsum text. This is what you’d expect on a typical blog-like site when visiting their homepage. Our code has to work in this type of environment as well as on the article pages.

Included in the code are two of the “Bookmark this on Delicious” links, but they’re both the same. Also, if you were to click these links now, they would bookmark the same page, as it uses JavaScript to determine the path from the location.

First, let’s make this code unobtrusive.

So in our script tag, after jQuery is included, let’s select the anchors that have the class .delicious. Let’s move the code from the onclick attribute to the click event handler.

 $("a.delicious").click(function(){
    window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550');
    return false;
});

Let’s add class="delicious" to our Delicious links, as they don’t have a class at the moment.

...
<a href="http://www.delicious.com/save" class="delicious"> Bookmark this on Delicious</a><a href="http://www.delicious.com/save" class="delicious"> Bookmark this on Delicious</a>
...

Great.

Now let’s figure out what’s going on in this window.open. The code provided by Delicious uses the encodeURIComponent method to encode the URL and title of the article. We’d need to do this on the server.

In Ruby on Rails when outputting the link you’d do something like this:

link_to "Bookmark on Delicious", "http://www.delicious.com/save?v=5&noui&jump=close&url=#{URI.escape(article_url(@article))}&title=#{URI.escape(@article.title)}", :class => "delicious"

Or in PHP:

<?php
echo "<a href=\"http://www.delicious.com/save?v=5&noui&jump=close&url=" . urlencode($article_path) . "&title=" . urlencode($article_title) . "\" class=\"delicious\"> Bookmark this on Delicious</a>";
?>

You’ll notice we’ve included a commented-out static URL before each of the Delicious links, which includes the URL-encoded parameters. Let’s now replace the current Delicous URLs with these new URLs, which will function correctly if JavaScript is turned off.

Now, let’s alter our jQuery code to drop the JavaScript- generated URL, and replace it with this.href.

 $("a.delicious").click(function(){
    window.open(this.href,  'delicious','toolbar=no,width=550,height=550');
    return false;
});

And that’s it!

When we open up our browser and click on these two links, we see that the correct URLs are being bookmarked, and as a bonus, when JavaScript is switched off, we can still bookmark the pages in an easy way.

We’re going to be covering more APIs for various web services and social networks in upcoming episodes, including an episode extending what we’ve done here by adding a Delicious bookmark count for each article.

Thanks for watching! Subscribe to our RSS feed, follow us on Twitter, and please leave any questions, comments or suggestions for new screencasts in the comments below. If you like our videos, and think your friends, followers or colleagues would benefit from seeing them, please feel free share via any of the links below the video. We really appreciate your support.

See you next time!

← Latest Episodes

blog comments powered by Disqus