8 A new tagging bookmarklet for Bloggers August 08, 2007 /

Tags are useful to feature in your blog posts as they help your blog be spidered and categorised by social bookmarking sites like Technorati, Del.icio.us and BlogMarks. Tag links usually look something like this:

<a href="http://www.technorati.com/posts/tag/bookmarklet?from=http://www.bloggerbuster.com" target="_blank" rel="tag">bookmarklet</a>

. The most important feature of the tag link is the 'rel="tag"' part, which informs bookmarking services that the link is a "tag" and not just a regular link. Blogger labels are defined in a similar way. As you can imagine, it is a rather time consuming process to write out each tag individually, so instead I use a "bookmarklet" to do most of the coding for me.

As I discussed in this previous post, I have been a faithful user of Oddiophile's technorati bookmarklet: this acts like a bookmark in my browser, yet when I click on the link it brings up a javascript window, into which I type the words I want to make into tag links. You can read all about Oddiophile's bookmarklet here.

This creates tags which link to Technorati and displays lists of posts which have also been tagged with the same word or phrase. However, I wanted to know how to create tag links which would only display results from my own blog, so that readers can find the information they need here at Blogger Buster. So I've modified the javascript of Oddiophile's original bookmarklet to ensure the results page from Technorati only displays posts from my site.

Perhaps the best way to explain the difference is by example. Here are some original Technorati tags, as you may have seen at the end of previous posts (these will open in a new window, which you can easily close to get back to this page):

Technorati Tags: technorati | tags | blogger | bookmarklet

Now here are the same tags, revised so that they only return results from Blogger Buster:

Technorati Tags: technorati | tags | blogger | bookmarklet

The first set of tags returned results from all websites, whereas the second set returned results only from this site.

The original Javascript of Oddiophile's bookmarklet looks something like this:

javascript:(function(){var a='';var t=prompt('Enter Tags:','');var tr=t.split(' ');a+='<span class='+unescape('%22')+'technoratitag'+unescape('%22')+'>Technorati Tags: ';for(var i=0;i<tr.length;i++){if(i > 0){a+=' | ';}a+='<a href='+unescape('%22')+'http://www.technorati.com/tags/'+tr[i]+unescape('%22')+' rel='+unescape('%22')+'tag'+unescape('%22')+'>'+tr[i]+'</a>';}a+='</span>';prompt('Copy this code, press OK, then paste to your blog entry:',a);})()

I've modified the code highlighted in blue to that highlighted in red as follows:

javascript:(function(){var a='';var t=prompt('Enter Tags:','');var tr=t.split(' ');a+='<span class='+unescape('%22')+'technoratitag'+unescape('%22')+'>Technorati Tags: ';for(var i=0;i<tr.length;i++){if(i > 0){a+=' | ';}a+='<a href='+unescape('%22')+'http://www.technorati.com/posts/tag/'+tr[i]+'?from=http://www.bloggerbuster.com'+unescape('%22')+' rel='+unescape('%22')+'tag'+unescape('%22')+'>'+tr[i]+'</a>';}a+='</span>';prompt('Copy this code, press OK, then paste to your blog entry:',a);})()

This instead provides a link to Technorati which only shows posts from my blog which are tagged with the words/phrases I used.

If you like, you can test my bookmarklet my clicking on the following link. A window will pop up into which you can type "tags"; then click "OK" to be presented with the code you can copy and paste into your blog post. Preview this to see the tag links appear in your blog.

Amanda's Technorati Bookmarklet for Blogger

If you like how this bookmarklet works, you can right click the link to save it as a bookmark, or drag the link to your favorite's section in your browser. Unfortunately it's not ready for you to use as it is: you will need to edit the URL it contains to match that of your blog. To do this, first save the bookmarklet to your browser favorites, then right click on the link to view the properties. You will then be able to see the javascript content of the bookmarklet. Copy and paste this script into a simple text editor, like Notepad. Now, find my url within the script, and replace this with the URL of your own blog (eg: http://yourblog.blogspot.com). Once you've done this, highlight the code and copy it, then replace the original script in the properties of your bookmarklet with this modified script. Then test out your bookmarklet by clicking the link and inserting your tags. The code you receive should create links to all of your blog posts which have been tagged at Technorati!

Please note that your blog should already be indexed by Technorati for this to work. If you haven't already claimed your blog, do go ahead and do so at Technorati, as being indexed by this hugely popular site has great benefits for your blog!

I would like to point out that there are also other bookmarklets for tagging your posts, such as the excellent GreaseMonkey plugin for Firefox, and of course Oddiophile's classic bookmarklet. However, none of the other methods I have tried worked the way I wanted them to within my Blogger posts: the GreaseMonkey script came the closest, as it offered a way to search within Technorati tags assigned to your username. For me, this wasn't a viable option, as I have many blogs and I only wanted the tags to refer to this particular blog. Also, I find my method much simpler, and compatible across all browsers.

Your feedback is always appreciated, so please leave your comments and opinions below.