Blogger Hacks, Categories, Tips & Tricks

Monday, May 08, 2006
TagOverlay: Reverse Bookmarking
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: , , , , ,
Posted at 12:59 AM by Greg.
<    >
Blogger Aditya said...
Thank you so much for using my tags Greg! :)
Its amazing! Really useful to see where someone's interests matches with yours!

Good job!

<    >
Blogger Singpolyma said...
This is so very cool! I have redone it without the annoying 'launching!' popup but otherwise it's very interesting! The del-icon link in the popup seems to link to a random user's bookmarks? Either to popular or to mine would be nice... Why can't the popup dissapear when i mouse off it? The stay-for-time-limit thing is annoying. Loading the top n popular pages on del for a tag would be interesting. Overall it is a rather interesting concept though! :D

<    >
Blogger Greg said...
Yeah, your tags are a good match on John's blog. Let us know if you come up with any good uses for this tech!

<    >
Blogger Nicolas said...
What might be very useful is to be able to "fuzzy cross" one's interest with some other's.

aka, I have tags like automobile, you have tags like cars, how can we reduce our grammars without losses, or with acceptable losses of generality ?


<    >
Blogger Greg said...
Hi Singpolyma,

The del-icon links to the delicious user account that you nominated, defaulting to jrfj44 (John's). The script has a big array of URLs with !tags! !delusr! etc in it. The variable between the ! gets replaced - check the source to add others on the fly.

I thought disappear-on-mouseout might be a bit fiddly/annoying, so instead you can click on the pop-up or re-mouseover the highlight. Either way, the "best" user interface will depend on the actual use that the thing gets put to.

Top n delicious posts (all users) would be nice, although, since they took away generic JSON feeds (grrr ... still mad about that!) it would require running it through a rss2json proxy. But, yes, doable.

Other ideas: Flickr tie in. Get pop-up images of on-page tags? Counting instances of a tag on a page (for some unknown purpose)? Jump to "next tag" (wherever/whatever that is) on click? What about "special deals" on Amazon ... oh no, there are already text2ads scripts for that :-)

Yeah, it is an interesting concept - and (under the geek code) that has value in itself. But let's try to elevate it to useful too, so more people can find out how interesting it is!

<    >
Blogger Greg said...
Hi Nicolas,

That's a toughie. Automatically discovering near-synonyms is certainly doable (statistically, "car" and "automobile" show up together a lot). But it's probably a tall-order for a JavaScript button.

I'd be surprised if there's not already a website out there that takes two delicious usernames and returns a "common" tagspace plus stats about similarities.

What specific purpose did you have in mind? Trying to decide whether or not to clone someone else's tagspace? Getting a better feel for unfamiliar tags?

<    >
Blogger John said...
Geez, can't a guy even go to sleep around here? ;-)

This is awesome!! What a great way of showing the inter-relationships between blogs / users / sets of bookmarks.

On Nicolas' request for synonyms... This is the big kink in folksonomy as a system, isn't it? Great to be able to use your own tags & mark your own stuff in a way that makes sense to you, but not so easy then for other folks to find it? Seems to me that controlled vocabulary, or a folksonomy thesaurus that took tags, grouped them into families and enabled apps like this (& like Freshtags) to grab or read related tags would reduce the dynamism / creativity in the system, but would boost the power of tag-passing between accounts a great deal.... It should be possible (by which I mean the software ought to begin to allow us) to grab "soccer" tags from North American accounts and Football tags from European accounts & display them together... We discussed this w/ the tag-passing at Freshtags.... How does my tag find and cooperate with your delicious tag?

Social Software... The Next Generation!!

<    >
Blogger Aditya said...
c'mon John! don't even get started on checking for synonyms in tags, when you yourself have been guilty of tag-bloating your posts, and you still do to a certain limit...!

<    >
Blogger Singpolyma said...
@Greg -- if you're interested see my post on feed2json

<    >
Blogger Greg said...
@Singpolyma - Great! That may yet see the FreshTags generic mode resurrected!

Thanks for the pointer (and the app).

eXTReMe Tracker