After experimenting with bookmarking buttons and seeing 3-spot's impressive array, it occurred to me that there's a helluva lot more ways of getting tags in to your social bookmarker than getting them out again. Hence, TagOverlay was born.

It's a pretty straightforward idea: you click a magic button on your browser (bookmarklet) that will suck down an arbitrary user's tags, trawl through the current page's text looking for matches, and throws some highlights around them. For additional fun, you can also toggle a pop-up box full of links via a mouseover.

OK, let's see this working. How might Freshblog look through the eyes of Aditya (of The Last Word)? Maybe something a little like this ...

TagOverlay (Aditya)

(Click the link. Should take about 10 seconds. If it threw an error, try right-clicking and copy/paste the URL into your address bar. Mouseover the orange highlights - a cyan box should pop up with links to delicious, technorati and wikipedia. These popups will close themselves in 15 seconds, or you can click on them or re-mouseover the orange tags. Click the link again and it will restore the page.)

You should be able to drag this link onto your browser's toolbar to make it a bookmarklet that works on any page. If you're not Adi (and let's face it; chances are, you aren't), you may wish to edit the delusr and anch fields to reflect the target username and anchor (ie common) tag. Alternatively, you can use this version which will prompt you for that info each time:

TagOverlay (prompt)

Right about now, you're probably asking yourself ... okay, what's this for? The answer is: I don't know. It's a "pure hack" ie entirely driven by curiosity and enthrall to the geekiness. There is no intended beneficial use ... yet. That's where the Freshblog readership comes in. What should this thing do?

Here's a couple of ideas to get the ball rolling:

• With your own tagspace, use button to quickly scan pages for likely reading material


• With your own purpose-built (sub-)tagspace, use button to highlight content or task-specific words. Eg navigation words (next, previous, search, comments), headings (abstract, methodology, bibliography), ego-related terms (Greg, Gregory, Hill), profanity (well, you get the idea).


• With someone else's tagspace, pick up on their tags for a particularly rich "reference" (ie dictionary, translation, encyclopedia) service.


• With your own tagspace, use it on someone else's social bookmark page, to see which tags overlap

And what should happen in the pop-up?

• Fetch a list of related tags


• Links to various tag-oriented places


• Bookmark the page yourself (with this tag)


• Fetch a list of bookmarks with this tag


• Use the tag for some sort of Yahoo! web service (mapping, search, music etc) mash-up

For ego-searching, ecmanaut has done some very interesting work. I was thinking about fiddling with the tabindex so you can tab between highlighted tags - Johan has taken it to another level with keyboard shortcuts and other hacky goodness. Something to chase up later.

I think the really interesting use for this could be around using another person's tags; for social bookmarking to develop, there's got to be a way to reward (ie give attention to) people who are gifted and diligent about generating a well-crafted set of tags on a particular topic. Perhaps this button could provide some encouragement. For example, Koranteng's "crush" on Meryn's tagspace could be acted on by using Meryn's tags for Tagoverlay purposes?

A couple of technical points:

• Will match within words, but only at the start. Hence, tag "sun" will match text "Sunday" but not "bosun".


• Case matters. Will match try to match your tags with and without the first-letter capitalised. This is to stop tags "IT" and "SUN" matching all "it's" and "Sunday" on the page.


• Uses a gnarly regular expression to find matches outside of HTML tags. This is likely to be buggy (in particular, bad interactions with inline scripts), and is very slow. It can take up to 20 seconds to crunch a heavy tag-rich page like Slashdot with John's 100 top tags.


• Doesn't seem to work in IE. This is not a result of my very limited scripting knowledge, nor a reflection of the hassle of cross-browser coding. It it is, in fact, a cunning scheme to ensure that only real bloghackers and Web2.0 types get to play with this. Consumer version may support non-standards-compliant browsers.


• I was hoping to use the transparency (ie alpha) of the highlighting to indicate how frequent a tag is. More solidity equals more frequency (like the pink highlight on delicious). Unfortunately, controlling colour with hsla doesn't seem to work as advertised on my browser. Tried playing around with tweaking the saturation and lightness levels too, but it looked naff. Might be okay with some decent range-limiting code.


• Lastly, here's a link to the source code. Suggestions and improvements welcome.

Okay, time to open up the floor and see what other ideas for TagOverlay are out there. Next time you're browsing the web or posting an article and you think "Hmmm, it'd be handy to ..." make a mental note and tell us about it below!

Filed in: tags, webtech, blogger-hacks, del.icio.us, bookmarking, bookmarklets