TagsLinks

TagsLinks turn each tag into links that let you find related content on tagging services like Del.icio.us, Flickr and Technorati. Move the mouse over a tag to see a list of links, each will take you to the tag's page on that service.

It looks like:

Or see it in action on the blog.

TagsLinks automatically transforms all links that use the rel='tag' attribute (see relTag). There are three ways to use TagsLinks:

• Install the JavaScript files on your Web site or blog. (See the instructions below)
• If you are using WordPress, simply download the plugin, extract it in the plugins directory and enable the plugin from the administration panel. It will enable TagsLinks for all pages on your blog.
• If you are using FireFox you can install the Greasemonkey script. Open the link and from the Tools menu select Install User Script.

To install TagsLinks on a Web page, you must include the following in the head section. TagsLinks then enables itself as an onLoad event handler.

• behaviour.js Applies the behavior to all the tags using CSS-style selectors.
• transoverlay.js A library for implementing the links box overlay.
• tagslinks.js Self explanatory.

TagsLinks comes with a default list of services. You can add more services by calling the TagsLinksAddService(name, url, icon?) function.

Tagging Services Supported

• BlogMarks
• Connotea
• Del.icio.us
• evdb
• Flickr
• MyWeb 2.0
• Odeo
• Scuttle
• Technorati
• Upcoming.org
• Wikipedia

Dependencies & Credits

To make it simple and clean, I use the Behaviour library. Credits to Ben Nolan and Simon Willison for coming up with this ingenious solution.

Inspired by quickSub which provides a similar mechanism for RSS feeds.

The code is available under the Creative Commons Attribution-ShareAlike.

Change Log

Version 0.6:

• Replaces overLIB with TransOverlay. Tested only with FF and IE 5.

Version 0.5:

• Now supports non-ASCII characters in the URL. Tested with FF and IE.
• Added link to Wikipedia.

Version 0.4:

• Link icons disabled by default.
• More styling options moved to CSS.

Version 0.3 adds the following features:

• More tagging services.
• Displays the favicon of the tagging service next to the link.
• Greasemonkey script.
• CSS styling for the links box.