Technorati: tag creator for multiple word tags, and more

Deutsch | Español | Français | Italiano | Português | 日本語 | 한국어 | 简体中文

Tweet

(I'm amending my intro to Technorati tags to mention the following.)

The short version

There are a few ways you can easily create Technorati tags, such as by using a bookmarklet tag creator, or a Greasemonkey script for Firefox.

But they require manual tinkering after the event if you want to have tags which consist of several words (like "A Consuming Experience", which I use as a tag at the end of each of my posts). Now, there are ways to automatically output tags which consist of more than one word, by tweaks to those tag generators. Here's how.

Bookmarklet

To create multiple word Technorati tags easily, use this Technorati Magical Sheep bookmarklet on my separate bookmarklets page. [Edited 13 August 2006: now in a compressed version that works with Internet Explorer, following tweaking after I received a comment by archiver - thanks archiver for condensing the code! I have now given up trying to include any favelets on this page as Blogger messes up favelets on publishing them.]

The previous version of this bookmarklet, which is still available on my bookmarklets page, only worked in Firefox; for IE, which limits the no. of characters you can have in a working favelet, clicking the link on a Webpage direct works - but clicking the favelet in Favorites or the Links bar doesn't.

Entering this in the prompt that pops up when you click the favelet (the second link on the bookmarklets page, now):
magical sheep, Truckspy rawks, shaggy sheep, SUVs

produces this code, which you can copy and paste to the end of your post:
<span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/tags/magical+sheep" rel="tag">magical sheep</a>, <a href="http://www.technorati.com/tags/Truckspy+rawks" rel="tag">Truckspy rawks</a>, <a href="http://www.technorati.com/tags/shaggy+sheep" rel="tag">shaggy sheep</a>, <a href="http://www.technorati.com/tags/SUVs" rel="tag">SUVs</a></span>

I also explain in the long version below how you can tweak the bookmarklet further e.g. to output certain tags automatically each time.

Greasemonkey

[Updated 13 August 2006 to link to December 2005 version 1.0 beta:] Or use this Greasemonkey script for Firefox: KRS (Truckspy)'s magical sheep Technorati tag script with multiple word support (updated December 2005, see this post for further info.)

Entering this in the textbox:
magical sheep, Truckspy rawks, shaggy sheep, SUVs

produces this code which is appended to your post with the Greasemonkey version:
<div class="tag_list">Tags: <span ><a href="http://technorati.com/tag/magical+sheep" rel="tag">magical sheep,</a> <a href="http://technorati.com/tag/Truckspy+rawks" rel="tag">Truckspy rawks,</a> <a href="http://technorati.com/tag/shaggy+sheep" rel="tag">shaggy sheep,</a> <a href="http://technorati.com/tag/SUVs" rel="tag">SUVs,</a> </span></div>

Credits and background

Both bookmarklet and Greasemonkey script are courtesy of that coder extraordinaire, the one and only ...drumroll... Truckspy! (instigation, prodding, coaxing, general bribery - and this attempt at documentation, of course - by Improbulus). Henceforth to be known as the Magical Sheep team - for reasons best left unsaid...

For more background, and on how to rename the favelet, and how to customise/tweak the code further, e.g. to automatically output your blog name or your name as a tag at the end of the tag list without your having to type anything, see the long version below.

Online form

I also found an online form that handles multiple word tags: ICE's tag generators.

Again it's the only one I know of that supports tags consisting of several words. That form even outputs Flickr, Del.icio.us and Furl tags!

Entering the examples above will produce tags in the form:

<span class="technoratitag">Technorati Tags:
<a href="http://www.technorati.com/tag/magical+sheep" target="_blank" rel="tag" title="Link to Technorati Tag category for magical sheep">magical sheep</a>, <a href="http://www.technorati.com/tag/Truckspy+rawks" target="_blank" rel="tag" title="Link to Technorati Tag category for Truckspy rawks">Truckspy rawks</a>, <a href="http://www.technorati.com/tag/shaggy+sheep" target="_blank" rel="tag" title="Link to Technorati Tag category for shaggy sheep">shaggy sheep</a>, <a href="http://www.technorati.com/tag/SUVs" target="_blank" rel="tag" title="Link to Technorati Tag category for SUVs">SUVs</a></span>

The long version

The first decent Technorati tag generator was Oddiophile's bookmarklet or favelet (warning, the site seems to be offline a lot these days), in my book, as you'll know from my tutorial on Technorati tags. There are other favelet tag creators around, but they don't work at all for me, or not very well.

Now old hands will know this, but others may not: it's actually not too hard to tweak the Oddiophile bookmarklet to suit your preferences.

Why change the tag creator bookmarklet?

In my case I wanted to do three things:

1. Easily use multiple word tags. Oddiophile's original only allows you to create single word tags, whereas Technorati will accept multiple words (like "blogging tools" or "macrame creations") as tags.

2. Automatically add standard tags to every post. I tag all my posts with the name of my blog and my own nickname (so that all my posts can be found listed on one set of Technorati tag pages with one click ("meblogging"). (A great byproduct: if Googling for my blog name or for my name, the Technorati tag page for that name appears on the first page of the search results. Wicked). So I've set up the bookmarklet to automatically append the appropriate standard tags to the end of the new tags I enter for individual posts, without my having to type them in for each post.

Warning: meblogging only works if Technorati pick up and display on their tag pages all the posts which have been given that tag. But it doesn't pick up some posts (you can find them on searching Technorati, they're just not displayed on their tag pages), so for instance the Improbulus tag page is missing a few of my posts. See this post about the problems. I'm still pursuing this.

3. Tweak some aspects of the standard favelet. I wanted to change the prompt text, and automatically add a horizontal line before my tags list to clearly separate them from the post body. Formatting/presentation stuff like that.

How to edit a bookmarklet

I mention first that Oddiophile said it was OK for me to post this - I wouldn't want to mess with stuff without permission if it's copyrighted to someone else, especially as there's nothing on his site about licensing. (I mean to write about blogging and copyright sometime, but that's another post...).

Many will know that bookmarklets just use Javascript. To see what's behind a bookmarklet, rightclick it in your toolbar and choose Properties. It's the bit in the Location line in Firefox (or URL line in IE) which does the clever stuff. (And the Name line is where you change the bookmarklet's name, if you don't want "Technorati Magical Sheep" on your toolbar! Just don't forget to hit OK after you edit it.)

The script is too long to view in the box but you can just copy it from the Location or URL line and paste it into a text editor e.g. Notepad, to see it in full. You can then edit it there, and paste it back into the Location or URL line of the bookmarklet's Properties and hit OK. (But before you paste in your edited version, first make sure you save a backup of the original, e.g. in a text file, in case your tweaks don't work - though you can always get the original again from Oddiophile. Certainly once you've got it the way you like it, you should save a backup of your own version).

So here's what's behind the original Oddiophile version:

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);})()

Now this is the (original) Truckspy version with multiple word support:

javascript:(function(){var a='';var t=prompt('Enter Tags:','');var theSplit=/\W?,\W?/g;var tr=t.split(theSplit);a+='<span class='+unescape('%22')+'technoratitag'+unescape('%22')+'>Technorati Tags: ';for(var i=0;i<tr.length;i++){var checkplus=tr[i].indexOf(' ');if(i > 0){a+=', ';}if (checkplus=='-1'){a+='<a href='+unescape('%22')+'http://www.technorati.com/tags/'+tr[i]+unescape('%22')+' rel='+unescape('%22')+'tag'+unescape('%22')+'>'+tr[i]+'</a>';}else {var chat='';var plus=tr[i].split(' ');for(var q=0;q<plus.length;q++){chat+=plus[q];if (q<plus.length-1){chat+='+';}}a+='<a href='+unescape('%22')+'http://www.technorati.com/tags/'+chat+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);})()

And finally, below is the version where I added my own formatting/meblogging tweaks (I've put my additions in bold):

javascript:(function(){var a='';var t=prompt('Enter Tags Separated by Comma and Space, Multiple Word Tags are A-OK!:','');var theSplit=/\W?,\W?/g;var tr=t.split(theSplit);a+='<hr /><span class='+unescape('%22')+'technoratitag'+unescape('%22')+'>Technorati Tags: ';for(var i=0;i<tr.length;i++){var checkplus=tr[i].indexOf(' ');if(i > 0){a+=', ';}if (checkplus=='-1'){a+='<a href='+unescape('%22')+'http://www.technorati.com/tags/'+tr[i]+unescape('%22')+' rel='+unescape('%22')+'tag'+unescape('%22')+'>'+tr[i]+'</a>';}else {var chat='';var plus=tr[i].split(' ');for(var q=0;q<plus.length;q++){chat+=plus[q];if (q<plus.length-1){chat+='+';}}a+='<a href='+unescape('%22')+'http://www.technorati.com/tags/'+chat+unescape('%22')+' rel='+unescape('%22')+'tag'+unescape('%22')+'>'+tr[i]+'</a>';}}a+=', <a href=%22http://technorati.com/tag/Improbulus%22 rel=%22tag%22>Improbulus</a>, <a href=%22http://technorati.com/tag/A+Consuming+Experience%22 rel=%22tag%22>A Consuming Experience</a>, <a href=%22http://technorati.com/tag/Consuming+Experience%22 rel=%22tag%22>Consuming Experience</a></span>';prompt('Copy this code, press OK, then paste to your blog entry:',a);})()

And when I enter:
magical sheep, Truckspy rawks, shaggy sheep, SUVs

it outputs this code, without my having to type my name or the blog name:
<hr /><span class="technoratitag">Technorati Tags: <a href="http://www.technorati.com/tags/magical+sheep" rel="tag">magical sheep</a>, <a href="http://www.technorati.com/tags/Truckspy+rawks" rel="tag">Truckspy rawks</a>, <a href="http://www.technorati.com/tags/shaggy+sheep" rel="tag">shaggy sheep</a>, <a href="http://www.technorati.com/tags/SUVs" rel="tag">SUVs</a>, <a href="http://technorati.com/tag/Improbulus" rel="tag">Improbulus</a>, <a href="http://technorati.com/tag/A+Consuming+Experience" rel="tag">A Consuming Experience</a>, <a href="http://technorati.com/tag/Consuming+Experience" rel="tag">Consuming Experience</a></span>

As you can see from bold bits of the code, I added the <hr /> and the Improbulus/Consuming Experience stuff, which means that when I use the bookmarklet it automatically includes a horizontal line before my tags list, plus the last 3 tags you see at the end of each of my posts, without my having to do any extra typing.

For your own blog, if you want meblogging tags too just change the "Improbulus" bits (twice, in the "rel" bit and in the link text) to your own name, and the "A Consuming Experience" bits to your blog's title, always making sure you use "+" instead of a space in the "http" sections if your name or blog title has spaces in it, and use %22 for the double quotes.

Or you can of course delete any extra bits like "<hr />" or "<a href="http://technorati.com/tag/Consuming+Experience" rel="tag">Consuming Experience</a>" if you don't want them, or add even more tags if you like - but just make sure you insert them between the correct single quotes in the script.

You can of course also change the label preceding the tags list from "Technorati Tags"" to just "Tags:" etc if you wish (but make sure you don't delete the single quotes or the > symbol or semicolon).

To make it easier for you to customise, a bookmarklet set up in advance, so you just have to save it and then change YOURNAME and YOURBLOGNAME, is here.

The Greasemonkey user script can be tweaked similarly - so you see, like me you don't have to know much about Javascript just to figure out which bits do what, and change just the bits you need. In fact now with version 1.0 of the script you don't have to do anything behind the scenes to tweak it - see this post.

As for styling the look of the tags, if you don't know CSS and are happy with something that looks like mine (i.e. a small size font for the tags), just add something like this to your blog template between the <head> and </head> tags:

.technoratitag {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
line-height: 1.5em;
color: #777;
}

---

Technorati Tags: Technorati, Technoratitags, Technorati tags, tag, tags, tagging, categories, tag tools, tagging tools, blogging tools, tools, blogging, blog, blogs, blogging, weblog, weblogs, introduction, guide, tutorial, Blogger, Blogger.com, addons, blog addons, blogging addons, blog add-ons, blogging add-ons, Firefox, Greasemonkey, Flickr, Del.icio.us, Delicious, Furl, Improbulus, A Consuming Experience, Consuming Experience, Magical Sheep