Real Web 2.0: Quick and dirty Web applications with bookmarklets

Combine bookmarks and scripting to create customized apps of surprising sophistication

Web 2.0 is well known for the fact that it's not built on breathtaking new inventions, but rather on renewed emphasis on age-old Web technologies. One of those age-old technologies that is enjoying a revival in Web 2.0 is bookmarklets. A bookmarklet is essentially a Web application shoehorned into a regular browser bookmark. This article includes a fully functioning bookmarklet and installation instructions you can use to highlight text on any Web page and search IBM developerWorks for that text.

Uche Ogbuji (uche@ogbuji.net), Principal, Zepheira

Photo of Uche OgbujiUche Ogbuji is Partner at Zepheira, firm specializing in solutions for next generation Web technologies, including Semantic Web. He is also Principal at Uli, LLC. Mr. Ogbuji is lead developer of 4Suite, an open source platform for XML, RDF and knowledge-management applications and lead developer of the Versa RDF query language. He is a Computer Engineer and writer born in Nigeria, living and working in Boulder, Colorado, USA. You can find more about Mr. Ogbuji at his Weblog Copia.



07 August 2007

Also available in Chinese

In previous Real Web 2.0 columns I have presented portraits of important Web 2.0 sites, from the user and developer's point of view, focusing on features that relate to sharing data for the creation of a customized Web experience. First I covered del.icio.us and then Digg and Reddit. Every few installments, I'll pull the lens back a bit to capture some aspect in the landscape of such sites. A broad variety of these sites uses general tools and techniques that are useful to the user and developer audience. This installment introduces bookmarklets.

Bookmarks with a kick

You may have known about bookmarks as long as you've known about Web browsers, but perhaps you were not aware that a bookmark can be more than a static link to another site. You can use a special form of link supported by almost every sort of Web browser, using the special URL scheme javascript:. After this you can put one or more ECMAScript (often called JavaScript) statements. Since you can perform a wide variety of operations using ECMAScript, you can use this approach to develop and install powerful tools using nothing more complex than a bookmark. A little over a decade ago as Java™ technology was emerging, the term "applet" was invented to describe some of the rich functionality that was possible with Java code launched from the browser. Soon the term "servlet" emerged to describe such functionality provided on the server instead. The term "bookmarklet" follows this convention, suggesting the advanced functionality available within the bounds of a bookmark, or link. Bookmarklets are executed entirely on the browser, as are, say Java applets. They are executed as if they were loaded in script statements on the page itself, so they are a powerful tool for customizing your Web experience and taking some control back from the server side. Bookmarklets are suited for many tasks, including:

  • submitting the page to a Web-based tool such as a bookmarking service or a validation service
  • querying data from the page and submitting it to a Web-based tool
  • manipulating the content, presentation, or navigation of a page
  • analyzing a page to display useful facts and statistics
  • controlling dynamic Web page features, such as playing and pausing audio or video

These tasks generally cover the needs of real-world Web 2.0 services, so bookmarklets have become a popular way for such sites to offer browser features. As an example, you'll find bookmarklets for submitting pages to link sites such as del.icio.us, Digg, and Reddit. If you place such a bookmarklet as a button in your browser's bookmarks toolbar, then from any page on the Web, you can click the button to submit the page to the link site. In effect you can use a bookmarklet to add features to your browser itself with a minimum of programming, or none at all, if someone else has already written a bookmarklet to meet your need.

Basic bookmarklet example

In this simple example I present the "post to del.icio.us" button, which is a bookmarklet the del.icio.us site encourages users to add to their bookmarks toolbar. Listing 1 is a form of the bookmarklet, with whitespace added.

Listing 1. Bookmarklet for posting to del.icio.us
 javascript:location.href =
 'http://del.icio.us/post?v=4;url='
 + encodeURIComponent(location.href)
 + ';title='
 + encodeURIComponent(document.title)

The actual bookmarklet is Listing 1 all on one line, with all spaces removed. It is a simple re-assignment of location.href, instructing the browser to load a new page. The next three lines construct the new URL according to the structure of the del.icio.us service, using the current page location and title as query parameters. Many bookmarklets for invoking Web-based services are as simple as this, as long as the desired service offers simple, URL-based APIs. In this case del.icio.us makes the service available for "GET," which is the form of Web access that happens when you click a link, or type into the browser's URL bar. Sometimes a service is only offered as a "POST," which is the form of Web access that happens when you submit a form in the browser. You can also invoke such services with a bookmarklet, but it's a good deal more difficult. Note that this case is probably not the best Web coding practice, because del.icio.us should have required a "POST." The reason, to put it simply, is that "GETs" are designed for the case where invoking the URL does not substantively change the state of the Web resource. But in this case, it is changing state by adding an entry to the del.icio.us database. Experts on the Web prefer the use of "POST" in such cases.


IBM developerWorks search bookmarklet

The next example is a more sophisticated bookmarklet I created to provide easy access to the IBM developerWorks search engine from any other page. If you happen to be searching a technical news site and come across mention of "Dojo" and you're not sure what it is, you can select the word and invoke this bookmarklet to find the wealth of Dojo information on IBM developerWorks. Listing 2 is the bookmarklet code, nicely formatted.

Listing 2. Friendly formatting of "developerWorks search" bookmarklet
/* Get the query string from selected text */
/* Made a bit complicated by cross-browser compatibility concerns */
q = '' + (
  window.getSelection ? window.getSelection() : document.getSelection
    ? document.getSelection() : document.selection.createRange().text
);
/* If there is no text selected, prompt the user */
if (!q)
  q = prompt('Enter a search phrase on IBM developerWorks:', '');
if (q!=null){
  /* Construct the basic string for IBM developerWorks searches */
  dWsearch = 'http://www.ibm.com/developerworks/search/searchResults.jsp?'
+ 'searchType=1&'
+ 'searchSite=dW&'
+ 'searchScope=dW&'
+ 'Search.x=0&Search.y=0&'
+ 'Search=Search&';
  /* Escape spaces in the query string and then go to the constructed page */
  location.href = dWsearch + 'query=' + escape(q).replace(/ /g, '+');
}
void 0

Listing 2 is a longer ECMAScript routine, not a single line, as is Listing 1. Listing 2 becomes a bookmarklet when you prefix it with javascript: and remove all the new lines and most of the other whitespace. I've seen bookmarklets twice as long as Listing 2, so you should get the idea that you can perform all sorts of complex programming tasks in this manner.

developerWorks search in action

You may find it useful to make a handful of your more commonly used bookmarklets available in a browser click. In this section I'll demonstrate how to do so in Mozilla Firefox, using a bookmarklet version of Listing 2, which I've incorporated into the following link: developerWorks search. In a Firefox browser, right click on this link and choose "Bookmark this link." Then in the resulting dialog choose "Bookmarks Toolbar" as the folder in which to create the bookmark. Now you should have a button titled "developerWorks search" right at the top of each browser window. If you don't see it, be sure there is a check next to "Bookmarks Toolbar" in your "View" menu, under "Toolbars."

After the bookmarklet is installed you can go to any arbitrary page, select some text and then click the button in the toolbar. If you click the button without selecting any text you will receive a prompt. Figure 1 is a screen shot showing this prompt. If you look to the left of the prompt dialog box, you can see the bookmarklet in the toolbar, as well as a toolbar entry I have for filing my other often-used bookmarklets.

Figure 1. developerWorks search bookmarklet in action
developerWorks search bookmarklet in action

Wrap up

Bookmarklets are an important part of the Web 2.0 landscape, and they exemplify the qualities of Web 2.0 technology I tend to focus on in this column: transparency and openness. I'll bring them up again from time to time. Meanwhile, if you have any experience with ECMAScript, you can use bookmarklets as a great way to experiment with, develop, and deploy enhancements to Web pages. If you aren't an ECMAScript developer, you can still benefit from the many bookmarklets developed by others.

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Web development on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development
ArticleID=245681
ArticleTitle=Real Web 2.0: Quick and dirty Web applications with bookmarklets
publish-date=08072007