Blogger Categories with Del.icio.us Part One

Update April 11, 2007 - This methods/scripts etc described in this post are obsolete. Do Not Use Them! They relate to a category method for Blogger BEFORE Blogger introduced their labels. Use New Blogger, Use Labels. This is just up for historical reasons, or if someone using the code already needs it. Comments are now Closed. Thanx.

Part Two
Part Three

May 4-2006 UPDATE: These scripts have been outdated, and an updated and improved can be found at the post delicious2Blogger - Categories for Blogger. I highly recommend looking at the new setup/scripts and using them if you are interested in this method of categories for blogger. Previous users of the older scripts, please see the note at that post about converting over. I will leave these setups/scripts up and available for those already using them. ---

This is the first post in a series on using del.icio.us to create categories for Blogger. This is by no means the only method to 'fake' categories with Blogger, nor am I claiming it to be better than any other. It's just the means I'm using and if anyone else wants to use the same thing then feel free to. The method is just a collection of script ideas from del.icio.us modified a bit and template tweaks to get what I wanted out of Blogger. I've broken everything into 3 posts to try and (hopefully) make it easier to use all or if needed only parts of what I'm doing to suit your needs.

This came about because I didn't see any methods that gave me all of the features that I wanted, but knew it was doable with del.icio.us. Some of the features are specifying the category a post is in (rather than using some method of search), keeping it self contained inside the blog (no links go out to another site, they all stay in house), it uses the creation of only one "category" post, and the scripts take care of directing them appropiately (you don't have to make multiple pages when adding a new category, the scripts do it all) and the ability to modify all the information with CSS. If you think this might be appropiate for your needs I should say before starting that although nothing here is super-complicated (I don't think) you should at least have a feel for modifying your Blogger template and know where all the bits and pieces go. If you're a complete newbie, then I'm not sure how easy this would be to setup and possibly another method would be better suited. If you have at least a basic knowledge of Blogger and how it works, then it shouldn't be too hard.

Step #1 - Back Up Your Template. You should make a backup before doing any modifications in case a mistake is made or you just want to revert back to what you had originally.

Step #2 - Get an account with del.icio.us . I'm not going to cover using del.icio.us as their help files and other spots cover that well enough. You just need an account and to note your USERNAME as we'll need it shortly.

Step #3 - Login to Blogger and create a "Category" post. This will be the post that displays the selected "category" and as such it has some special needs. First you should probably give it a title of Categories: . Next, click on the 'Post and Comment Options' link to open up the options field. You'll probably want to set "Allow New Comments" on this post and "Allow New Backlinks" to NO, since this is a special post and those features probably aren't wanted. Next backdate the post to way before you started blogging. This gets the post a bit out of the way and into it's own archive. I would recommend putting a date of Jan 1 2001 as the date. If you're thinking you don't want a post showing from that time period don't worry, that part is covered in a bit. Now just copy and paste the code below into the posting window without any alterations. I know it looks very messy but it has to be formatted that way for users that have convert line breaks on, and as such everything is entered without any carriage returns. Don't muck with it, as any added spaces or anything could screw the pooch. Just copy and paste as is. NOTHING in this code needs to be modified. After you've pasted the code go ahead and "Publish" and you'll receive an error message saying "Tag is not Allowed". No worries. Just check the box next to "Stop showing errors for this post" then publish again and it will go through.

<div id="del-container"></div>
<script type="text/javascript">selURL = decodeURIComponent(document.location);selected = selURL.split('?');if (selected[1])if (selected[1] == 'delAllPosts'){selected[1] = '';}{enTag = encodeURIComponent(selected[1]);document.write('<scr'+'ipt type="text/javascript" src="http://del.icio.us/feeds/json/'+delUserName+'/'+enTag+'?count=100;"><\/scr'+'ipt>');var strip = selected[1].replace(/_/g,' ');if(strip ==''){strip = 'All Posts';}if(document.getElementById('delpost-title')){document.getElementById('delpost-title').innerHTML = 'Category: '+strip;document.getElementById('delpost-date').style.display = 'none';}}</script>
<script type="text/javascript">var ul = document.createElement('ul'); ul.className='delicious-posts';for (var i=0, post; post = Delicious.posts[i];i++){ var li = document.createElement('li');li.className='delTitle';var a = document.createElement('a');a.setAttribute('href',post.u); a.appendChild(document.createTextNode(post.d));li.appendChild(a); ul.appendChild(li);if(delShowNotes){if(post.n){var liNote = document.createElement('li');liNote.className = 'delNote'; liNote.innerHTML = post.n;liNote.innerHTML += delNoteAppend; ul.appendChild(liNote);}}if(delShowTags){var li2=document.createElement('li'); li2.className='small-del-tags';for (p in post.t){var tags = post.t[p]; strip = tags.split(',');if( p > 0){li2.innerHTML += delSep;}for(r in strip){ stripper=strip[r].replace(/_/g,' ');var a2 = document.createElement('a'); a2.className = 'small-del-link';a2.setAttribute('href', delTagPost+'?'+strip[r]); a2.appendChild(document.createTextNode(stripper)); li2.appendChild(a2);}}ul.appendChild(li2);}}document.getElementById('del-container').appendChild(ul);</script>

Step #4 - Now you need to get the URL of the Category post you just created and the URL of the Archive it is in (it should be in an archive by itself if you followed my advice on the dating). Easies thing to do is go to your blog and in your archive list you should have the new one for Jan 2001(or whatever format your archives are in). Go to that page and either copy the url or keep the window open and open another window with the category post you made, copying the URL or keeping the window open. Now go to your template and there are two bits that need to be added there for now. The first bit of code below needs to be copied and pasted into the head of the template (between the <head></head> tags).

<script type="text/javascript">
// Delicious tag variables
var delTagPost = 'YourCategoryPostURL';
var delArchivePost = 'YourCategoryArchiveURL';
var delUserName ='YourDeliciousUSERNAME';
var delShowTags = true;
var delShowNotes = true;
var delNoteAppend = '';
var delSep = ', ';
</script>

Three things need to be modified for your use. For delTagPost you need to copy/paste the URL of the category post you made. Be sure to keep it inside the single quote marks. Same thing with delArchivePost, grab the archive URL that only the category post is in (for Jan 2001 if you followed my advice) and copy/paste it here.  Last  in delUserName you should enter in your del.icio.us username, again keeping it inside the single quote marks. The other variables can be changed but not now. I'll cover their uses in one of the other parts of the series.

Next, in your sidebar section (or wherever you want the listing of 'categories' to appear) copy and paste the code below.

Update : Code for using a "Category Cloud" in place of or in addition to the following code now available at the post Tag Cloud 9

Code for using a Drop Down Menu in place of the following code now available at the post Drop Down Menu For Categories

<h2 class="sidebar-title">Categories</h2>
<div id="delicious"><noscript>Javascript must be enabled for Categories</noscript> </div>
<script type="text/javascript" src="http://del.icio.us/feeds/json/tags/XXXXXXX"></script>
<script type="text/javascript">
var ul = document.createElement('ul');
for (p in Delicious.tags){
tagURL =encodeURIComponent(p);
var strip = p.replace(/_/g,' ');
var li = document.createElement('li');
var a= document.createElement('a');
a.href=delTagPost+'?'+tagURL;
a.title='View all posts filed in '+strip;
a.appendChild(document.createTextNode(strip+' ('+Delicious.tags[p]+')'));
li.appendChild(a);
ul.appendChild(li);
}
document.getElementById('delicious').appendChild(ul);
</script>

The only thing that needs to be modified here is the line 

<script type="text/javascript" src="http://del.icio.us/feeds/json/tags/XXXXXXX"></script>

Where XXXXXXXX you again put in your del.icio.us username (don't knock out the trailing " mark here).

Now save the template changes and "Republish the entire Blog". If you go to your blog now it should look the same except for a category heading where you placed it. It won't show anything now (unless you have previously tagged posts) since you haven't tagged anything yet. That's the next step. Go ahead and take a couple of posts to test and tag them on del.icio.us . Do a few for testing then come back and take a look at your blog. You may have to reload the blog out of cache, but you should start seeing a listing of any tags you've added if we've done everything right. If you click on a category listing, it should take you to the 'category post' page and it should display a link with title to the post tagged, the tags used on it and if any notes were added they will show up too. 

Don't worry if the information isn't quite formatted the way you want, that can be tweaked with some of the variable settings and with CSS. I'll cover that and a few other things in the next post. If nothing is working, make sure you republished the entire blog, make sure you filled in all the bits I told you with the correct information, make sure you're not pulling an old page out of cache. If you followed all the steps it should be working. If everything is GO then you can move on to the next post, if not you're gonna have to figure out where things went wrong before trying anything else, if this doesn't work nothing else I will talk about won't be helpful.

Technorati : Blogger | Del.icio.us | Blog | Blogging | Blogger Categories | phydeaux3