 | Level: Intermediate Uche Ogbuji (uche@ogbuji.net), Principal, Zepheira
07 Aug 2007 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.
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
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
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. |
Rate this page
| |
