Uncategorized

Bag Dropping Bookmarklet

Regarding our post about a new RSS feed for the web’s eye view bag of urls site, Scott Leslie commented about our submission form being an ideal candidate for a web browser bookmarklet tool.

Scott has recently championed these underused tools for one’s browser toolbar, rightfully so, because they are very handy, bordering on indispensible.

I had toyed with this a year ago, especially since I end up posting about 80% of the new items to our
bag of urls but never finished.

But now I have, and it was very easy indeed to build a bookmarklet tool that shortens the steps for dropping a url into the bag

The technology is bone simple. A bookmarklet is merely a compact series of JavaScript commands that can be called from your Bookmarks.Favorites bar. They are limited by length (more or less the limit of the character string length of a URL imposed by the browser software).

There are handy ones for metric conversion and such, but you can also write scripts that can extract information from the curent web page in view and use it in a web form.

This is essentially what the MovableTyoe Bookmarklet tool does for weblog authors- when I find a web site I wish to blog about, one click of this tool, and it pops up a small browser windiw with a mini blog editing form… and here is the kicker- it prepopulates the title of the site and builds a basic hypertext link using the information passed by the bookmarklet script. It can even grab a chunk of text that may be hilited on the browser screen.

So to grab information to write a “drop in the bag” entry for any web page, I can pass a new form the title of the site (JavaScript document.title property), the URL (JavaScript document.location.href property), and any selection of text (JavaScript document.selection property).

Being a modifier, I simply dissected the MT Bookmarklet code (as it nicely launches a small browser window for the information entry), created a new PHP version of the dropping form (which sends info via a crusty old perl script) that I could build a URL that passes the information from JavaScript.

Huh?

Let’s take a look at the bookmarklet code:

javascript:d=document;t=d.selection?d.selection.createRange().text:d.getSelection();void(window.open(‘http://www.mcli.dist.maricopa.edu/eye/bag/drop_bm.php?title=’+escape(d.title)+’&url=’+escape(d.location.href)+’&descrip=’+escape(t),’_blank’,’scrollbars=yes,width=620,height=480,status=yes,resizable=yes,scrollbars=yes’))

You access the document properties via d=document and from there you can extract strings for the title and url. The “escape” fuinctions encodes the text content to a URL friendly format

Grabbing the selected text is a bit more complicated (I do not even know the nuts and bolts of this JavaScript code, but it works).

So the bookmarklet grbas this data, opens a new window, and loads it with a URL to a PHP script that appends the data in a format PHP can read and then echo back into the form.

Very handy indeed, as well as handy to know a bit more of how bookmarklet code works. Get your bag dropping bookmarklet today and send us some new stuff!

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.