Update 2/1/06: There is a new version of this service, Freshtags 0.5. See the Freshblog Intro, and check out the Freshtags site to get up-to-date code and information. Read on here if you're interested in the development of Freshtags and the initial roll-out, but be aware that the code posted here has been superceded.
_____
Pushing the envelope on the "tags for categories" method once again, Freshblog is pleased to announce a new sidebar menu for categories, using .js, that creates a list of recent posts in a category when you select that category from the list. The menu, developed by Greg from Vent, provides plenty of room for discussion and development, & makes strides towards the interactivity that is possible in the blogsphere. Here's the usual Freshblog what? why? how?, along with an invite for testing, feedback and discussion.

What: A sidebar menu of categories that generates a scroll-box menu of post titles below it when you choose a category. The >> symbol below the drop-down takes you to the anchor_tag + selected_tag page on del.icio.us. The scroll-box menu loads when you pick a category, shows post titles that are in that category, & lets you jump straight to the post page from the
sidebar. In-blog category navigation is born!!

NB: "anchor tag" is optional, and is the tag that is common to all posts in your blog. Handy if you have multiple blogs, or don't want all your tags listed on your blog.

Why: I've had some negative feedback re: taking people off-site to your post-list in del.icio.us. (even though, as I said a whole bunch in the beginning, all they can click on there are your posts, and they'll be right back!!) We want this to look integrated & slick, & we want the integration to keep people on your site, in your template, knee-deep in your ideas.

How: If you already bookmark your posts on del.icio.us for categories, you're home free. Just add one .js code chunk for the head of your template, edited to reflect your del.icio.us username and most frequently used _anchor_ tag, and one customiseable code chunk for your sidebar. Change the widths of the menu to suit, and you're all set.

Benefits: Readers see your post titles in your categories on your site, instead of going offsite.
When they select a post from the dropdown, they're taken direct to the post page, and the drop-down box stays open so that they can navigate direct to other posts in the same category if they choose to. Excellent.

Development:

The most exciting feature of this system grows out of the page reload. You'll notice that when you choose a category from the drop-down, the page reloads & the URL now ends in the selected tag. In addition to passing tags between archive & post pages on your blog, readers can pass tags between blogs. As an example, if you select "culture" as a category from the drop down box in my sidebar, a text box will appear containing the titles of posts that I have tagged "culture." This box will stay open on post, archive and main pages on Freshblog.... but hey, let's pass the tag!! Greg's Vent! blog runs this script too, and we share a category called "culture." If you've selected "culture" in the Freshblog sidebar and you visit Vent!, you'll find the "culture" category there pre-selected and the drop-down pre-expanded. If a number of blogs all operated using this script, you could navigate between them and be repeatedly presented with pre-expanded menus of relevant content in your area of interest.

The benefits of picking up on your readers' interests as they land on your page are obvious - you can show them relevant content in the navigation. But what if they arrive by search engine? Not to worry: this code will scan their search query for your tags. If any are found, it will quietly expand that category in your sidebar, showing your readers titles of related posts. Works with most search engines, include Google, Yahoo and MSN. To see it in action, visit Greg's Speccy Blog via Google, where a search for the phrase "exposed the writhing worms of drugs" returns only one result. You'll note that when you choose that link, the "drugs" category in the sidebar at Speccy will pre-expand for your navigating pleasure. Alternatively, do a Google search for "Freshblog" & visit this site from the results page. You'll notice that the category menu for posts in the category "Freshblog" is pre-expanded.

As a consequence of upgrading your archive menu code to pass tags, you'll also have the chance to add an archive count to your archive list, so that readers can see the relative activity of your blog from month-to-month at a glance. Using a bookmarklet to tag your archive pages, and a revised code for the archive drop-down menu, you can illustrate your posting volume in your archive menu. I have yet to implement the archive count at Freshblog, but you can see it in action at Speccy.

Code Snippets:

For your template head (add username and anchortag to replace the red text):

<script type="text/javascript">
// set parameters
del_user = "username";
anchor = "anchortag";

// Fetch tag set from delicious

document.write('<script type="text/javascript"
src="http://del.icio.us/feeds/json/tags/'+del_user+'/'+anchor+'?sort=freq&count=100">');
document.write('<\/script>');

// Fetch archive posts from delicious

document.write('<script type="text/javascript"
src="http://del.icio.us/feeds/json/'+del_user+'/'+anchor+'_archive?sort=freq&count=100">');
document.write('<\/script>');
</script>

<script type="text/javascript"
src="http://ghill.customer.netspace.net.au/tags/flex-tag_list.js">
</script>

For your category drop-down menu:

<script type="text/javascript">
list_side_tags(1); // drop-list
write_tagged_posts(10, 22); // 10 high, 22 wide
</script>

This menu will accept arguments for customisation as follows:

list_side_tags(x) where x is the number of rows in your scroll box.
write_tagged_posts(y, z) where y is the number of rows and z is the width in characters.

For your archive drop-down menu:

<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value;"
size="1">
<option selected="selected">- Select Month -</option>');
<BloggerArchives>
<script type="text/javascript">
u = "<$BlogArchiveURL$>"; n = "<$BlogArchiveName$>";
document.write('<option value="'+u+document.location.search+'">'+n);
c=archive_count(u);
show_count(c);
</script>
</option>
</BloggerArchives>
</select>

Bookmarklet to "tag" your archive pages:

javascript:anchor="anchortag";count=prompt('enter post
count');document.location.href='http://del.icio.us/api/posts/add?url='+document.location.href+'&description='+anchor+':'+tidy(document.title)+'&tags='+anchor+'_archive&extended='+count;
function tidy(descr){pos = descr.indexOf(':');return
descr.substr(pos+1);}

Insert your chosen anchortag at the appropriate place in the script.

Alternative:

See Greg's Speccy blog for a set-up that will work for blogs with less posts / less tags. If you'd like the code for that set-up, please leave a request & your contact info in the comments.

Discussion / Request for Feedback & Testing:

This doesn't change the input of the tags for categories system, but Greg's script does some significant and welcome things with the output. For discussion, please leave comments & trackbacks on this post, & help us take the del.icio.us tags as categories system to the next level.

This is oh-so beta at the moment, and all feedback is appreciated. The possibilities for extension and development include supporting multiple tags, a delicious-style cloud presentation and an integration with other blog category systems / sites that order content with tags... Greg is looking for more ideas and feedback, & you're the audience for the job!

What about SEO? Does the "URL?tag" format create multiple URL's for the same page and therefore weaken a page in an engine?

Apparently not so you'd notice. Sure, having multiple URLs pointing to the same physical page does "water down" your rank. So you wouldn't want your homepage split 150 different ways. But if it's targetted and useful, then given the way that Google heavily weights the URL for search rankings, it could be a help if used sparingly (eg foo-blog.com/ vs foo-blog.com?tags=lightning_strikes).

Secondly, the only way that Google would see the "tagged" version (in light of the earlier discussion about spiders not seeing javascript and the hand-coded "noscript" alternative menu) would be if someone hard-coded a URL in that way to bring a visitor to your blog in pre-expanded mode. I guess this would be done (if at all) consciously/deliberately so would bring focus. Also, the doubling up of anchor text and URL would be a powerful association from google's view - almost like a rel=tag link!

So, as long as your linkers agreed with you about which are your "power tags" and used them judiciously, it would help. The way that js is hidden from spiders will protect you from having a mass diffusion across hundreds of URLs.

And hey, what do we call it? There's some new tag functions at work here, that Greg's defined as follows:

• tag-fixing: the act of "hard-coding" a tag into a URL.
• tag-passing: the act of a reader carrying forwards their selected tag.
• tag-grabbing: the act of extracting a tag out of something that's not actually a tag e.g. search query, prior page etc.

Chime in with your feedback, responses, and requests to test. We're very interested in the possibilities of passing tags between blogs as a way of generating dynamic spheres of similar content that can customise the blogosphere, and allow readers to surf between sites while staying within categories. Exciting!!