This hack has been superceeded by a newer version.
A recent post at Freshblog got me to thinking about integrating the viewing of tags directly into my blogger blog. The solution presented there loads the results from tag queries into your sidebar, and checks the referrer if no tags are specified. The idea here is that if you are on my blog and query a tag, and then click a link to his blog, his sidebar will show his posts for the tag you selected here. It’s a great system, but my only problem with it was that it reloaded the current page with no apparent change at first, until you checked the sidebar. So I have modified the code for my own hack.
This hack will present a drop-down list of tags in your sidebar, pulled from the del.icio.us account you use to tag your blog and filtered for the anchor tag you use (if you use one). Selecting a tag from the drop-down list will take you to a post page on your blogger blog, so you never leave the site, that lists the results of a tag query for the selected tag. The sidebar will also update the same was as on Freshblog to facilitate the inter-blog browsing. Selecting another tag from the drop-down in the sidebar will add that tag to your query, not replace your query.
A ‘reset’ link is placed next to the drop-down box so that you can clear the tag query and switch to another tag without adding it. My version also fixes a minor bug in the original so that when tags in a referrer URL have ‘%20’s in them they are replaced by the del.icio.us-compatible ‘+’
If no tag is found in the <head> section, the script attempts to pull one out of your posts. This can be disabled on your main page by inserting this code along with that in step 2:
<MainPage><script type=”text/javascript”>var no_autocapture = true;</script></MainPage>
Now, without further boring explanation, here’s how to implement the hack :
- Create a new post on the blog you would like to implement this hack on with the title ‘Tags’ and click the ‘Edit Html’ tab for the post body, pasting the exact code ‘<div id=”tagspostpage”></div>’ into the post body. Turn comments off for the post and set the post date to January 1, 2000. The time doesn’t matter. Post this post.
- Edit the template for your blog and insert the following code into the <head> section :
<script type=”text/javascript”>
//<![CDATA[
var del_user = “username“;
var anchor = “anchortag“;
document.write(‘<script src=”http://del.icio.us/feeds/json/tags type=”text/javascript”><\/script>’);
//]]>
</script>
<script src=”http://www.awriterz.org/etcetc/tagspostpage.js type=”text/javascript”></script>Replacing ‘username’ with the del.icio.us username where you tag your blog posts and ‘anchortag’ with the anchor tag you use (if you use one). If, like me, you don’t use an anchor tag, then replace ‘anchortag’ with nothing.
- At the bottom of your template, right before the ‘</body>’ tag insert this code :
<script type=”text/javascript”>
var thediv = document.getElementById(“tagspostpage”);
if(thediv)
thediv.innerHTML = return_tagged_posts(true);
</script> - Insert this code into your template where you want the tags drop-down box and matched posts to appear (as they do in my sidebar) :
<script type=”text/javascript”>
list_side_tags();
write_tagged_posts();
</script> - Save your template and republish your whole blog.
7 Responses
Nice; now I won’t have to play much myself to try out the looks with some Del.icio.us excerpts. 🙂
A small additional suggestion: in your template, add an id or class attribute to the body tag, passing the post id. Then you can hide the silly “Posted at …, permalink, Trackback(0)” div with some CSS (body#4711 div.post-footer { display:none; } or similar).
Good work, Stephen!
Definitely a step forwards. Please see my comment at Freshblog for further throughts.
Cheers,
-Greg.
Stephen,
Excellent!!! Neater, cleaner, and still passes the tag. Very cool.
Thanks for the tip Johan 🙂 I’ll put that in later today
Neat hack, though I personally would prefer to be able to *change* categories more easily, so that when I click a new tag, it replaces rather than appends to the current tag. Is there any easy way I could change the code to achieve this?
Yes, changing to a new tag instead of adding is a minor glitch in the way this works. I’ve been thinking about adding a link next to the drop down box that clears the current tag query. Unless someone has a better idea?
http://www.texasholdem-poker-b.info/pokmach.html