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.

                
 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.

Back to top

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.

                
/* 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.

Back to top

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

• The tutorial User annotations in Ajax, by Greg Travis, includes a few handy notes on bookmarklets.
  
  
• Stay current with developerWorks technical events and webcasts.
  
  
• Expand your site development skills with articles and tutorials that specialize in Web technologies in the developerWorks Web development zone, including all installments of this column.
  
  
• Subscribe to the developerWorks Web development newsletter.
  
  

Get products and technologies

• Many of the bookmarklets featured on classic sites such as Bookmarklets home page and Jesse's Bookmarklets Site are older, but have stood the test of time and are still useful. Stephen Ostermiller has a more recent, but smaller, collection.
  
  
• Find the del.icio.us bookmarklet discussed in this article.
  
  
• Download IBM product evaluation versions.
  
  

Discuss

• Participate in the discussion forum.
  
  
• Get involved in the developerWorks community: blogs, forums, and so much more.
  
  

About the author

Uche 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.

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Bookmarks with a kick
• Basic bookmarklet example
• IBM developerWorks search bookmarklet
• Wrap up
• Resources
• About the author
• Comments

Next steps from IBM

Spring, JRuby, and Ajax development is easier with WebSphere Application Server - a smart Java 5 and J2EE Web services-based application server.

---

• Try: The no-charge WebSphere Application Server Community Edition is a pre-integrated, lightweight Java 5 application server built on Apache Tomcat and other best-of-breed open source software such as OpenEJB, Apache Axis, and Apache Derby.
• Article: The article leverage the Spring Framework and the WebSphere Application Server to improve your J2EE project productivity.
• Tutorial: See how the free WebSphere Application Server and XML can improve the efficiency of your JRuby on Rails and Ajax development.
• Buy: WebSphere Application Server - Express

My developerWorks community

Dig deeper into Web development on developerWorks

Calling all developers

Download no charge Lotus Domino Designer

Special offers