Blogger Hacks, Categories, Tips & Tricks

Wednesday, April 20, 2005
How to use del.icio.us for blogger categories
Update 8/11: See other posts in Blogger Hacks: The Series

Update 6/25: Please read my newer post first. I'm aware of three methods for categorising with del.icio.us now, & you should see which of the three would work best for you!!!
_________

How-to 4/20:

I've wanted to add categories to this blog for a while, and I was able to do it this week thanks to del.icio.us and a couple of bookmarklets. Since this is a great addition to any blogger blog, I've been inspired to write my first How-to.

This will tell you how to add categories to your blogger blog using del.icio.us, and have the tags that you choose appear in the Technorati tag search.

Ingredients:

1 blogger blog
1 desire for categories
1 del.icio.us account
1 technorati account (optional)
2 bookmarklets as follows:

the del.icio.us post bookmarklet allows you to bookmark pages to your del.icio.us account using keyword tags of your choice. It will already be configured to post to your account on a page at [http://del.icio.us/myaccount], and when you sign up for del.icio.us you'll be encouraged to drag it to your link bar!!

The tag creator bookmarklet from Ted Ernst's blog automatically builds HTML tags for given keywords that do two things at once. They point to the page for that keyword in your del.icio.us account [del.icio.us/myaccount/keyword] but they do so in a form that makes them valid technorati tags too.

Disclaimer: I didn't write the bookmarklet, and I'm not trying to take credit for it. Here's a link to the blog of the man who did.

You will need to edit this script to delete Ted's del.icio.us username and insert your own. You can also customise the text that introduces your tags. Right click the bookmarklet in your link bar after you've dragged it there, and edit the script properties.

Now the method:
Get a del.icio.us account

Activate the account by confirming your "lost password" e-mail

Install the del.icio.us post bookmarklet on your browser

Install Ted Ernst's tagmaker bookmarklet as follows: [Update added 9/12/05]

Visit Ted's tagging post. Click his bookmarklet link in the post, & you'll be taken to a second (non-blogger hosted) page that allowed the script to be posted as a link. The URL for that page is:

http://humanistcenterofcultures.org/ted/TechnoratiDeliciousBookmarklet.html

On that page is a link called

"technorati del.icio.us bookmarklet"

& that's the link you want to drag to your links bar.

So...Once the script-link from the second page is on the bar in your browser, you should see a different set of properties? Right-click the bookmarklet, select properties and scroll through the code 'til you find Ted's del.icio.us signon at the end of the del.icio.us URL. http://del.icio.us/******

You don't want your posts to appear on his del.icio.us page, so change the signon (in asterisks above) to match yours. Then exit the properties window, & you'll be able to click the bookmarklet to generate tag-code when you're writing a post.


Edit your blog's template to include a sidebar link to your del.icio.us account, http://del.icio.us/myusername, labelled "categories" or whatever...

When you write your next blog post, click on the tagmaker bookmarklet, enter keywords that refer to the post (separated by a space only), click OK when you're done. The bookmarklet will automagically select the code for you to copy, & then you can paste the resulting code into your post.

Your post is tagged. Now publish it & go to the permalinked post page for your new tagged post.

Copy the keyword tags out of the post and then select the del.icio.us post bookmarklet. Add the same tags that you put on the post to the form, removing the commas if necessary, and save your blog post on del.icio.us.

Two things just happened. First your post appeared on your del.icio.us account page with the tags you assigned to it in the right hand column. This page will list all the posts that you upload and all the tags that you use. This is, in effect, your list of categories for readers to pick from.

Second, if you click one of the keywords in your blog post, you'll go to a page in your account for that tag. Del.icio.us/myaccount/tagword. This allows your readers to jump directly to a list of all of your posts that are tagged with that term. This page also puts up a second column of "related tags" & allows readers to either combine search terms to crawl your tagged posts or jump to a related tag.

Your blogspot blog now has categories!! Excellent. Simply add tags to each new post that you create and cross-post the link to del.icio.us.

These tags can also be seen by the technorati tag search, & will be included in their tag search results if your blog is listed on their service. If it isn't, you should go over there & add your site today. Interactivity City!!!

Limitations:

I don't know if it is possible to display a list of your tags directly on your blogspot blog. I have linked to my del.icio.us account very prominently and am relying on readers to use the category feature and then come back to my blog to read more.

There doesn't seem to be any way to include older posts in this process, other than opening them up in your blog editor & adding the tags. Who has time for that?

This is a very narrow use of del.icio.us, since instead of posting and tagging any page that I think is interesting, I'm only posting & tagging my own. I'm missing out on a lot of the "stuff it in your back pocket & save it to read later" functions.

Otherwise I think this is pretty darn cool, and a great workaround since blogger doesn't include categories. This is, actually, even better than categories, because you can invent new tags on the fly all the time and use them to sort your posts in both del.icio.us and Technorati's tag search.

Cool. Let me know if this works for you or if I've missed a step in my how-to.
Thanks.

See also: What's this?, Ted Ernst, Marnie Webb.

Update 6/2/05:
I have added a comment to this post to clarify the installation and use of the tag-generating bookmarklet that I'm using. As Melly points out in the comments, I wasn't as clear as I could have been. I hope the new addition helps.
I have also discovered a spectacular add-on and side benefit of this process. Extisp.icio.us is a service that provides a graphical representation, or map, of a user's del.icio.us tags. A del.icio.us signon is all that's needed to get a page that maps your tags. Check out my extisp.icio.us page, and my recent post explaining what the map is and what it is good for.
Update 6/23/05:

Got Firefox? Get Greasemonkey and make the process much more straightforward.

Update 8/11:
See other posts in Blogger Hacks: The Series

Filed In: , , , , , ,
Posted at 6:44 PM by John.
39 Comments:
<    >
Blogger LG said...
Wow! Thanks for letting us know. I am going to try this. I'll let you know what happened.

<    >
Blogger Melly said...
First - Thank you. That's a great help.
Second - I'm sorry. I seem to be missing something. Can you please elaborate on the 'install' of Ted Ernest's tagmaker and the post about del.icio.us?

<    >
Blogger John said...
Glad to expand on it. I guess I did gloss over some steps there.....

Where to start?

OK. Ted's tagmaker is special because it doesn't only generate technorati tags, it makes tags that link to the del.icio.us bookmarking service that are also picked up by technorati on their tag pages. Some blogs post one sort of tag or the other. This tool lets you do both at once, and doubles the exposure that your tags will get. (It may do more than that, in fact, since some of my posts have been showing up on a German tag service too...)

To clarify the install of the bookmarklet first: Visit Ted's tagging post. Click his bookmarklet link, and drag the link that you see in the window that pops up to the links bar at the top of your web browser.

Once the link is on the bar in your browser, right-click it, select properties and scroll through the code 'til you find Ted's del.icio.us signon at the end of the del.icio.us URL. http://del.icio.us/******

You don't want your posts to appear on his page, so change the signon to yours. Then exit the properties window.

When you're writing a blog post, click the bookmarklet link, and a pop-up window will open. Type in your tag words separated by a space, click OK, and the bookmarklet will generate a string of code for those tag words. Copy it out of the pop-up window and into your post. (If you're using blogger, in the blogger compose window, you'll need to select the "edit HTML" tab before you paste the tags in. )

When you publish your post there'll be a string of category keywords at the bottom of the post. We're almost there!! Now what's required is to bookmark the post on del.icio.us using the same keywords that you tagged it with. There's a bookmarklet that you can use for that too, no edits required, that you can drag out of del.icio.us when you sign up for an account.

Does that help clarify the steps? Let me know.

<    >
Blogger Melly said...
Yes, indeed. Thank you for clarifying. It works now.

One last question, if you don't mind - Am I to understand that if I didn't use Ted's tagmaker, I would still get the del.icio.us categories (but not the technorati tags and the same exposure)?

<    >
Blogger John said...
Right!! That's what's so cool about this tag generator. One set of keywords which are good for two purposes.

Also. Please check out Extisp.icio.us to generate a graphical map of your tags, their relative importance, and the links between them. Cool!!

Glad the post was useful!!

<    >
Blogger Tor said...
Hi, and thanks for posting all this. I've just implemented it on my blog, and think it will add a lot to the users' ability to find stuff.
Peace,
Tor

<    >
Blogger Emdashes said...
Freaking brilliant! This just solved all my problems. It took about twenty minutes of trial and error, and now I'm happily revising several hundred posts. Thanks for the wonderfully clear explanation!

Emily

<    >
Blogger E.Z. said...
On line 26 of the GreaseMonkey script, the first instance of 'tags_arr[i]' should be escaped ( 'escape(tags_arr[i]' ) so that non-url-safe characters will work with Del.icio.us. For instance, I added a category called 'C#', which Del.icio.us translates to 'C%23' in its URLs. Escaping the category in the URL takes care of this problem.

<    >
Blogger Sprittibee said...
OK. This sounds pretty difficult to an idiot HTMList like me... but I'm going to read slowly and try and do it anyway. I have been emailing hate mail to blogger over the comments issue since I started blogging a few months ago. THANKS for posting this. I'll letcha know if I figure it out.

<    >
Blogger Sprittibee said...
By the way, do you know of a way to use more than one set of blockquotes without having the post seem to turn indent-happy on you? I wrote a book review, and tried to use numerous blockquotes, and it seemed after the second blockquote, the margin never recovered! I was looking this issue up on google when I discovered your post.

<    >
Blogger Sprittibee said...
I finally figured it out (minus the technorati stuff). I wasn't sure how to configure that other bookmarklet to my technorati account... thus I just did the delicious stuff - and finished archiving my blog by category! Walla! Thanks for your help. I gave you credit on my post today.

<    >
Blogger Sprittibee said...
Sorry for comment-hogging... but I just wanted to thank you again. I think Extisp.icio.us is the coolest thing since sliced bread. :) Gave you credit again in the comments section and pointed people to this post. Hope you get a bunch of peepers and happy, topic-sorted bloggers!

<    >
Blogger Pip said...
Thanks for the clear explanations. I joined technorati and delicious today. I tried this a few hours ago and was delighted when the tags "microsoft" "fonts" and "papyrus" from this page showed up on technorati (see http://www.technorati.com/tag/papyrus). I'm pretty sure I edited the bookmarklet with my username correctly, but there's nothing showing on delicious (see http://del.icio.us/tag/papyrus). Any ideas why? I've allwed several hours. (I don't think I'll bother with having delicious links in a sidebar.)

<    >
Blogger Pip said...
John, thanks for such a quick email reply to my problem just mentioned. I'm extremely happy with it. Thanks to you I have got it all fixed now, afaik, and I'll tell my readers about your great blog and service.

<    >
Blogger The Green Skeptic said...
Followed these excellent instructions up to part about bookmarking on delicious. Can't seem to figure that out...am I dense?

<    >
Blogger the naked animal said...
This is really great - I thought it was going to take me all weekend to figure this stuff out, but I did it in an hour to three different blogs. THANKS - I will cite your blog on my next posts - HERE's MY ONLY QUESTION - since you have to enter tags separated only by a space, that means you can't enter multiword tags, am I right? Or can you put multiword tags in quotations (for instance, I want to use "health and wellness" as a tag (it's in the technorati top 250) - can you clarify this for me or let me know I'm a dunce if I'm missing something simple? Other than that, it was a cinch - BRILLIANT directions!

<    >
Blogger the naked animal said...
One more question - I have three blogs and I want their categories to show up separately on del.icio.us (so that readers of my cat's blog won't get categories from my sex life's blog as well...) - SO - as I see it I should set up three different accounts on del.icio.us...? But how would that work - do you have suggestions?

Thanks for any help you're able to give! This blog is a priceless contribution to the burgeoning blogosphere.
-Rob

<    >
Blogger danchong said...
I have a simple way to do categories. Please see http://netcf2.blogspot.com/2005/11/blogging-enable-categories-in-your.html for more info. I welcome comments.

<    >
Blogger danchong said...
I wrote a script generator to generate code to enable categories. Anyone can use it, and copy-and-paste the code in his/her template in Blogger. See http://netcf2.blogspot.com/2005/11/blogging-generate-categories-for-your.html for more info.

<    >
Blogger The Light-House. said...
I am kindof confused everything worked ouy to the point where i copeid the ted turner marklet to my sudebar could go no further.Seeking help.....:-(

<    >
Blogger Karla said...
I've got the del.icio.us account and have added tags manually to my blog, but cannot figure out how to edit the Ted Ernst bookmarklet once it's on my links. When I go to Properties, I don't see any of the javascript code, just the URL. I tried dragging the code itself to the link bar, but it wouldn't drag. Guess Tarun and I need further precise steps on this part.

<    >
Blogger John said...
Tarun & Karla... Sorry for the dodgy instructions. To clarify the install of the bookmarklet: Visit Ted's tagging post. Click his bookmarklet link in the post, & you'll be taken to a second (non-blogger hosted) page that allowed the script to be posted as a link. The URL for that page is:

http://humanistcenterofcultures.org/ted/TechnoratiDeliciousBookmarklet.html

On that page is a link called

"technorati del.icio.us bookmarklet"

& that's the link you want to drag to your links bar. As it is now, you're looking at the first link, I think?

So...Once the script-link from the second page is on the bar in your browser, you should see a different set of properties? Right-click the bookmarklet, select properties and scroll through the code 'til you find Ted's del.icio.us signon at the end of the del.icio.us URL. http://del.icio.us/******

You don't want your posts to appear on his del.icio.us page, so change the signon to yours. Then exit the properties window, & you'll be able to click the bookmarklet to generate tag-code when you're writing a post.

-> Go back to "when you write your next blog post" above.

<    >
Blogger bev trayner said...
Thanks a BIG bunch.

<    >
Blogger yash gupta said...
boy 23 comments is a lot isnt it? man u gotta help me out with this too. I read it all out and still have some questions.. when i`m creating my post and i press the add to delicious button on my links bar, that link is added to delicious account with the tag and when i click on the tag title on my blog,(i used ayub`s script to display the categories on my blog instead of a link to my delicious page.) it takes me to the correct category which has a link to the "CREATE post page"or the edit post page. when do i have to press the post to delicious button so that it links to my post and not the edit/create post page...and i really didnt cre about technoratti i just want to categorize my posts.

<    >
Blogger Mary Whisner said...
This is great. I've been tagging my old posts and am pleased with how it's working. THANKS.

Of course, once something works for a while, one is tempted to hack it a little.

I'd like to get Ted Ernst's tag maker to insert [angle-bracket]font face="Arial" size=1 [angle-bracket] before "Categories" and [angle-bracket]/font[angle-bracket] after the last tag. Every place I tried inserting this(when I clicked on the bookmarklet's Properties) made the bookmarklet stop popping up. (I was trying before and after the "span..." mostly.) So I changed it back to where I started and I'm asking for help.

Do you know where I should insert it?
THANKS.

PS I did the odd thing with "[angle-bracket]" instead of "<" because the comment box wouldn't allow the HTML.

<    >
Anonymous Anonymous said...
When you advise to add a sidebar link to the delicious account and call it "categories," what exactly will the html script look like? Sorry, I'm just getting into this html stuff and am prone to asking the most basic questions.
Thanks for your time.
jayson

<    >
Blogger John said...
Jayson,

It would look like [a href="http://del.icio.us/jrfj44/blogger"]blogger[/a], [a href="http://del.icio.us/jrfj44/architecture"]architecture[/a], for whatever your topic is.

The username will be yours, of course.
If you use an anchor tag in del.icio.us, there would be an anchor tag in the URL....

http://del.icio.us/jrfj44/architecture%2Badvertising

I used square brackets here, but you'll use angle brackets < > in the code.

Hope this helps. You can also use the built-in del.icio.us tagroll. Easier & looks pretty cool....

<    >
Anonymous Anonymous said...
Thanks so much for your help/response, John.
I think I have the categories linked to del.icio.us now. But I don't seem to be getting the pasting of the del. html code into my blog post in html mode. Where does that code need to go and what would it look like? I can't figure out what I'm doing wrong. But whenever I click on "categories" it takes me to del.icio.us and to my category, which I click on to find it doesn't work. Again, greatly appreciated and I will post a public thank you on the blog.
Jayson

<    >
Blogger John said...
Alright... now I'm not sure where you're stuck. (Template mod, tagroll, individual tags on posts?) Please e-mail me @ the address above k& I'll be happy to help.

<    >
Anonymous vf said...
Thanks so much for this writeup. It's exactly what I was looking for and it helps me with my tags too! Love that it accomplishes categories and tags all in one. Thanks again!

<    >
Blogger CaliforniaStyle said...
Oh boy...this is great if I can follow your directions correctly. I'll attempt....=)

<    >
Hi, tried your method of creating categories... but somehow when users click on the link it goes to my del.icio.us page. is that normal? can we tweak it to auto redirect it such that it will immediately link to the blog post?

www.nivlac9.blogspot.com

CHeers

<    >
Blogger John said...
Nivlac,

The basic version of this method does link to the del.icio.us page, and that has been one of the principal objections that users have. Thankfully, there are now a few ways that you can display the content in your blog sidebar. These include:

FreshTags: A context-sensitive sidebar display of your tagged content.

In-Blog Categories using .js - See Marc Morales, and later posts that describe the evolution of the system. In fact, hit up his October Archives and read back as far as the 23rd. All good stuff.

In-Blog Categories using .js, with integrated in-post search results. From Pappmaskin Diare Techblog, explored and explained further by Gretchen at YLCF

In-Blog Categories using .js. Take the feed for each del.icio.us tag, turn it into a script, & publish the script in a pre-dated post on your blog. From Naked Sex Monkey

In-Blog Categories using .js. In-post search results in a single dynamic post - from Phydeaux3. Comprehensive 3-part how-to. Part 1, Part 2, Part 3. See also the how-to for the Tag Cloud

These are all linked from my Blogger Hacks, The Series. Since I have had a (minor) hand in the development and promotion of Freshtags, that's the system that I would recommend.

Hope this helps.

<    >
Blogger Zulhairy said...
I've been looking for a way to put my postings into categories.

Done it using the method you described and its working.

Thanks. Keep up the good work.

<    >
Hey there: all working really well (thanks) but for some reason when I click on the actual tags in the blog post itself they do not take me to my del.icio.us but to a yahoo error page?

Haven't got any more time today to look at it (like a dog staring at the TV with head to one side) but would love some help.

BTW - I like to document my required word verification. It is: wpwdd

Cool. Word verification - the very face of impermanance :)

<    >
oops. got it. need a / after your del.icio.us user name. sorry to bother you.

Word Verification: axmaj

<    >
Blogger 失踪 said...
hi john. i added the http://del.icio.us/help/tagrolls to my sidebar and use the tags as my categories in blogger.

my question is: by doing so are these tags listed on technorati? or: what can i do to get them listed on technorati?

thank you
christian

<    >
Blogger tamdoll said...
I am trying.... and trying... and my tags just do not appear in my sidebar - Please could someone help me?? www.tamdoll.blogspot.com
Thank you.

<    >
Blogger Tony said...
Hello! I used the following approach to make it work as categories:
I append at the end of each post a string like [Category: Lifestyle]
or
[Category: General]

And I added a LINKS sidebar and add the links with the querystring of search of the categories strings that I append at each post.

Here you can see it working:

http://blogdotonyhenrique.blogspot.com/

Links to this post:

Create a Link


eXTReMe Tracker