Saturday, 18 June 2005

Technorati: tagging on Blogger with Firefox and Greasemonkey

[Added 12 December 2005:]
NB The script mentioned in this post has been updated and enhanced, please see this post instead now.

For anyone who hasn't come across it, if you use the free Firefox browser, the terrific Greasemonkey extension lets you do all sorts of clever or fun things to Webpages you view (personally I think it's revolutionary, and I don't use that word lightly - it enables people to effectively rewrite Webpages displayed on their own computers to get the features they'd like, such as turning all unlinked links and email addresses mentioned on a Webpage into clickable links. Greasemonkey is the best incentive I can think of to really learn Javascript properly! Better get to it then...).

Anyway, to use Greasemonkey you have to first install that extension from the Greasemonkey site (Firefox users should be familiar with how - click the Greasemonkey extension link, if nothing happens and you see just below your tabs a message in horizontal bar that "To protect your computer, Firefox prevented this site ( from installing software on your computer", you should click "Edit Options" at the end, then "Allow" and "OK" to allow that site to install software, then try clicking the Greasemonkey extension link again, give it a few seconds then click "Install now". Close and re-launch Firefox.)

Then you install the appropriate user script (Greasemonkey won't do anything without a script). To install a script you click on the link to the script. When you're on that page (which looks like just a bunch of text), in your Firefox Tools menu choose Install User Script. Alternatively you can just rightclick on the link to the script and choose Install User Script. (Beware though, not all scripts will be innocent, some could wreak havoc if malicious!).

The definitive list of Greasemonkey scripts seems to be at GreaseMonkeyUserScripts (though not all scripts are listed there [added 12 December 2005:] - now see, so even if you can't write scripts you can easily make use of the large and growing library of useful scripts.

For the addon to help you create Technorati tags if you're using as your blogging platform, the script that's of interest is by Fabricio Zuardi - I use the version amended by Bryan Price and they're conveniently listed on this post on False Positives who also modified the script to produce a version that outputs tags (note that using that version doesn't add your post to Delicious's tag pages, it just provides clickable links to those pages whose tags you list - you still have to bookmark your post separately - to help speed up that process, see this post).

[Edited 9 July 2005:] Now Truckspy has modified the script so it can handle multiple word tags, see this post. [Added 12 December 2005:] The script mentioned in this post has been updated and enhanced, please see this post instead now.

What this script does is to change your "Create post" page on Blogger to add an extra line after the box where you write the post, which looks like this:
Image Hosted by

To add Technorati tags to your post you just type in the tags you want, separated by spaces, and click "Append Tags" and it will add to the end of your post something which looks like the following, with the correct Technorati format behind the scenes (where the tags you've entered are "test" and "test2") (I've not included the tag stuff for this as I don't want this post to get tagged with "test", this is just to show you what it would look like!):
Tags: test test2
For those interested, the code it adds is in fact the following, so you can create a "tag_list" class and style it, and you also could edit what it adds by editing the script:
<div class="tag_list">Tags: <span><a href="" rel="tag">test</a> <a href="" rel="tag">test2</a> </span></div>
To use multiple word tags I run the words together when I enter them, then edit the post to insert a space in the link text and a "+" in the "rel" bit in the appropriate places (see my intro to Technorati tags, which I've edited to add a note about this tool, for a fuller explanation). [Edited 9 July 2005:] Now Truckspy has modified the script so it can handle multiple word tags, see this post.

Note though that the tool only works when you're in the "Edit HTML" view, not the "Compose" view of Blogger. You need to change to the Edit HTML tab if you find yourself repeatedly clicking "Append" to no avail!

(I first saw mention of this tool on Oui-Blog - not that I could read that post, but I got the picture, literally!)

[Added 12 December 2005:] The script mentioned in this post has been updated and enhanced, please see this post instead now.

Technorati Tags: , , , , , , , , , , , , , , , , , , , , ,


bytehead said...

Glad to be of service!

SatishTalim said...

Not directly connected to this post - Based on one of your previous post, I have many hidden Technorati tags as well as the visible ones. I rarely use Blogger's 'Edit HTML' view or 'Compose' view. I have a post template html file on my disk, that I edit; get it validated at and then copy/paste into Blogger's add post screen. Blogger's generated html for my posts, does not comply with W3C standards.

RedRyder said...

I had heard of Greasemonkey before but never got around to checking it out. Looks like I should.

Improbulus said...

Bytehead - yes, thank you!

SatishTalim - I agree, I rarely use Blogger direct too, not because of non-compliance (I'd be calling the kettle black on that front!) but mainly because I've lost too many posts. What do you use to write your posts?

redryder - yes you should when you have a chance, I mean to get to grips with it properly one day, I think it's amazingly powerful.

John said...

I make no promises (let's call it beta!!) but I believe I have modified the script in question to generate both technorati & tags. My post on Freshblog links to the script, which will work (I hope) because technorati tags don't have to link there. They can link to a user's account and still be seen by the technorati tag search.

Let's watch technorati & see....

Improbulus said...

Hi John, sounds good. Will check it out, hope it works!

Tim W. said...

Fantastic tutorial: this is exactly what I've been looking for. Thanks a lot! Regards, Tim

Brooks said...

I've modified the script slightly to add line breaks between the post content and the tags content. I also lopped off the trailing comma and extra spaces between items. See my blog for a link to the new version.

RedRyder said...


I had fixed the trailing commas but uploaded the prev version I had and didn't notice.
Thanks to Brooks for pointing it out. I just updated the script that's linked in Imp's article since I don't suppose anyone would like them ;-)

Props to Fabricio Zuardi and Bryan Price for doing the hard work and giving us something we can work with to fit our needs.

Brooks said...

No problem, truckspy. I'm just glad I could help!