Tuesday, November 29, 2005

Tagging in Google's adopted baby

After some 1 hour of fight, i finally got some solution to my problem of tagging the blogs in blogger. I don't know why in the world, blogger hasn't provided such an important feature.
I think they should learn from LiveJournal or for that matter a couple of other feature-rich blogging sites.

Mr. Google, get up and do some exercise for your adopted BLOGGER baby.

After looking through the blogs of John, ted ernst and pacetua, I came up with a slightly better (browser independent)** solution which saves far much effort of Ctrl + C, Ctrl + V and a couple of irritating clicks.

Follow these steps to start Tagging in your blog
  1. Get a del.icio.us account.
  2. Go to (Settings->Formatting) in Blogger and set the "Link Field" to YES.
  3. Edit your template by pasting the below javascript code shown in RED somewhere between your <Blogger > </Blogger > tags.

  4. <p class="post-footer">Categories:<script language="javascript">
    var agt='<$BlogItemUrl$>';
    var tr=agt.split(' ');
    var a='';
    for(var i=0;i<tr.length;i++) {
    if(i > 0) {
    document.write(', ');
    a ='<a href=' + unescape('"') + 'http://del.icio.us/rahulgupta83/' + tr[i] + unescape('"') + ' rel=' + unescape('"') + 'tag' + unescape('"') + '>' + tr[i] + '</a>';

Now whenever you create a new blog, you will find an extra link textbox in which you can write your TAGS separated by spaces.^^
(Use '+' sign as the separator and modify your javascript accordingly if you want the links to be visible to technorati's search spider. See Comments section for complete information.
Credit: Greg)

Publish your post and you are done with your blogging part. But don't forget to post your tagged page to del.icio.us using the same tags.

I didn't write the Javascript, only modified it. Thanks goes to john, ted and pacetua.

** As mentioned by John, GreaseMonkey helps you do a similar thing in firefox but currently even that is not working with Firefox 1.5.
^^ Multi-word tags not possible in del.icio.us. For other sites, you can replace this line in the code var tr=agt.split(' '); with your separator inserted between the single quotes. For eg., if the separator is a plus sign, it would look like var tr=agt.split('+');


John said...

Very cool!! Listed on Blogger Hacks!!

Greg said...

Hi guys,

I've been doing it this way for some months and offer a word of warning and some advice:

1) Writing out links in a javascript makes them invisible to the search engine spiders. Specifically, technorati won't be able to pick up the tags :-(

2) If you use + as separators in the link field (instead of the more attractive-looking space), then you can get technorati to pick up at least one grouped tag per post. Eg assume you tagged your post blogger+tech+google

Use this:

%a href="http://del.icio.us/user/<$BlogItemUrl$>"><$BlogItemUrl$>%/a>

So it would become:

%a href="http://del.icio.us/user/blogger+tech+google">blogger+tech+google%/a>

Which will work with technorati since it doesn't "read" the + whereas delicous does.

NB: "%" should be "<" - crappy blogger comments!



ps. Rahul, since you're using the link URL for tags too, you may be interested in my implementation. Check it out:



parwana said...

As far as I know, Technorati picks up the tags directly from del.icio.us so there is no issue what is listed/hidden on my website.

If del.icio.us picks it up then technorati will automaticall pick it up from delicious.

Greg said...

Hi -

Yes, technorati "scrapes" delicious (and flickr and furl) for tags to list in a sidebar when you do searches. But this isn't the same thing as being directly listed in technorati. To see what I mean, click on these searches:

(tag search) http://technorati.com/tags/footy

(One of my blogs is tagged with "footy" via the method discussed above.) Note that while it appears in the delicious listing on the side (hit refresh if you're getting furl's results) it's not in the main bit.

Yet, my blog does show up in the keyword and blog searches for footy.

(blog search)


(keyword search)


I've been in email contact with the technorati guys about this issue, and they explain that that the technorati spider will pull the atom feed (if available). Unless you have tags in them (you don't), you won't be appearing in technorati "tag" searches.

Hope this clarifies it for you.



parwana said...

What I did after your '+' suggestion-->

>> I kept the '+' sign as the separator in the link text box and therefore in my atom feed, it came as <link url="blogging+tagging+blogtech">

but in my javascript i filtered the thing to make it look better.

I am a newbie to javascript and have just mechanically done my work.

You told that "Writing out links in a javascript makes them invisible to the search engine spiders. Specifically, technorati won't be able to pick up the tags :-("

So now am i going in the right direction. becoz i have provided link feed to technorati through link url and also shown the tags in my blog beautifully.

Your turn!

Raji said...

thnx rahul
but now it seems i need to clean up the previous tags...the links r wierd in prev. posts :(

Greg said...

Hey Rahul -

I'm afraid you're still going to find it hard to get picked up by technorati.

You see, in your xml (atom) feed, the link looks like:

<link href="Poem+Forward+Hindi+Kalyug+Krishna+Mallika" rel="related" title="Hey Krishna" type="text/html"/>

And that href ain't valid. Ie it should be:


This is just what blogger does with the link field (it assumes it's a well-formed URL). The only way around this is to persuade the technorati spider not to use your atom feed, but instead go for the html one. According to my conversations with the technorati spider engineer, you can do this by ensuring that you only syndicate the first part of your blog entries (it's an option on Blogger, under feeds). This will force the spider to use the html, where the noscript tags should work. Personally, this hasn't worked for me, but you never know your luck.

OK - I've just checked your code and I see I've not been as clear as a I should.

Firstly, you need to use your delicious username, not "user". Eg mine is thetan. If you don't have an account with delicious, use "tags" instead of "user".

Secondly, when you write html/js code in blogger comments (like here), it won't let you write out tags <like this>, so instead I use a % for the <.

So, you should have "<a href=..." instead of "%a href=" in your code.

Hope this helps!



ps. I'd prefer it you didn't post questions on that Vent post - unless it's about Australia's agricultural policy! Instead, you can email them to me, or add them to the appropriate bit on Freshblog (which I read regularly):


yash gupta said...

hi rahul.sorry for asking a noob question but when u say write your tag in the link page, do u mean write the link to the tag on delicious like http://del.icio.us/yashrg/southpark ? and i will still have to go to that post and add it to delicious using the button on my links bar?

parwana said...

you need not write the entire link but hust the tags.

but yes u do need to post to del.icio.us separately after completing your post.

parwana said...

Following links also seem to be very useful for blogging esp. on blogger.

TO take a backup,
Reached via http://labnol.blogspot.com/2005/11/methods-to-backup-your-weblog.html

Add "post to del.icio.us" in blogger posts http://labnol.blogspot.com/2005/11/add-post-to-delicious-or-furl-it-links.html
Reached via http://futuregeek.blogspot.com/2006/01/another-new-function.html

For video blogging,

Amit said...

Check out what I have done with categories.

Gaby de Wilde said...

hehehe, fun to see you guys here. (amit and john)

Here is my script :)


Nobius said...

Worked great for me, thanks for the code.