Sunday, April 02, 2006

Tagging posts - the beginning

I've decided to use Johan Sundström's Blogger publish ping and categorizer tool, a Greasemokey script (download) that runs in Firefox, to add del.icio.us tags to all of my posts.

As I mentioned previously, Blogger lacks the ability to tag or categorize posts. So, this means that if a reader wanted to find all my posts on a given topic, they'd have to either read through my entire archive chronologically, or do searches on my blog. Neither of those is terribly user friendly; what would be easier is if while writing a post I could tag the post as belonging to a specific category (e.g., politics, Linux), and then provide links to pages that listed all posts tagged with that term.

Lots of people have created hacks (big list here) that attempt to add this functionality to Blogger. The two primary methods used are including keywords in posts that searches can locate, or using social-bookmarking sites (like del.icio.us) to add tags to posts. I've decided on the latter, primarily because it seems like the social-bookmarking sites have more flexibility for organizing posts once they're tagged (and, at the very least I'll have a nicely organized list of my posts in del.icio.us when I'm done).

In the past I've manually created a few category pages (cooking, Linux, community college jobs, etc.), but manually updating them is a pain. I've also tried manually adding tags to posts, but it has proven to be time consuming and difficult to keep up. The script I'm using (instructions on using the script can be found here and here) automates the entire process of tagging posts and creating category pages; it does the following:
  • Adds a "tag" field to the Blogger post editor that allows me to enter custom tags for each post.
  • Automatically formats the tags into appropriate HTML code that is CSS-style-sheet compatible.
  • Creates a "ping Del.icio.us" link that allows me to register my posts with Del.icio.us without having to fill in any forms.
This is all possible thanks to greasemonkey. Greasemonkey is an extension for Firefox that allows users to run custom scripts (see userscripts.org) in their browser. So, when I say that the script adds a "tag" line to the post editor, what's actually happening is that the script detects that I'm loading up the Blogger post editor, and then re-writes the HTML of the post-editor page to show a "tag" field. Snazzy.

The primary downside of this method is that it relies on a script that runs on my computer; if I post from another machine that doesn't have the greasemonkey script installed, the post editor will be back to its default, tag-less state. Considering that I post from only a few machines, this shouldn't be too much of an issue for me.

The script automatically adds the tags to the post page in an HTML division, so the tag line can be formatted by editing the style portion of the post template. The script author has a walkthrough here, but he's using a different template than I am, so his edits didn't work for me. Here are the relevant portions of my revised template (this page on CSS styles of unordered lists was very useful):
.PostFooter{line-height:10px;margin-bottom:10px;margin-left:0px;color:gray;font-size:10px}
div.tags { margin: 0; padding: 0 0 0 0px; color:gray;font-size:10px; margin-top: 10px}
div.tags ul { list-style-type: none; padding-left: 0; margin-left: 0; display:inline; padding-bottom: 0; margin-bottom: 0}
div.tags li { padding-left:14px; margin-left:0px; background: url('http://del.icio.us/static/img/delicious.small.gif') no-repeat 0 3px; display:inline; text-transform:capitalize;}
I also had to remove a break from the end of my template's body section, as otherwise there was a lot of space between the tag list and post footer. (note: I'm a CSS novice, so use the code above at your own risk)

All of my new posts should now have tags that appear as links at the bottom of the post; clicking on the tags will take you to a del.icio.us page that lists all my posts that have the same tag. I hope to go back and tag all of my older posts, though that will take a while.

The other change I plan to make is to add constantly-updated category pages right here on Rhosgobel (so you don't have to go to del.icio.us to see all the posts in a category). To do this I plan to use either this technique or this technique, but it'll be a while before I get to working on those.

[For those curious about how this works, I've created an account for Rhosgobel on del.icio.us, and all posts I make will be bookmarked by that account. In addition to the standard tags, each post will also be tagged with "Rhosgobel" (my anchor tag). Thus, to find posts from this blog that are tagged with a given tag (let's say "cooking"), the link actually searches for all posts tagged with "Rhosgobel" and the given tag ("cooking") in the Rhosgobel account.]

No comments: