'Label' Widget Hack for FTP-hosted Blogger Blogs

As you no doubt know if you're reading this page, the new version of Blogger includes some pretty neat 'label' functionality which allows you to assign keywords or 'labels' on your posts, and then gives you a handy little do-dad on the side nav which lists out all your labels and the number of posts that have that label. When you click on the name of the label in that side nav do-dad, you get a page with all the posts that apply to that label. (BTW..I know they're called 'Widgits', but I'm bitter on this issue and being difficult)

Anywho, the bad news is that this feature is only available if you use Blogger's news 'drag and drop' templates and as a result host your site on blogspot.com. If you have your blog publish to an FTP site (meaning your own domain), you are out of luck. Even though it's completely feasible from a technical perspective (especially for mighty Google), for some reason they have decided to be lame. Read here for their official declaration of lameness.

Now generally I don't do web development anymore. I did it professionally for a long time for companies like Yahoo! HotJobs and JobThread and I've seriously moved on. But my wife is all about her blog, she really wanted this feature, so I was compelled to come up with a hack solution for her. Since I did it and I saw other people looking for this, I figured I'd share, but let me make some BIG disclaimers:

  1. This is a HACK job. I'm stretching web technology to it's limits to pull this off, and it's not pretty. Any web developer worth their salt will cringe at the inefficency and heinousness of how this is done.

  2. It's kinda slow - there is a visible sometimes lengthy delay before the content shows up (see below for more info)

  3. You can't see how this looks via the template 'Preview' option. It's a security-related thing that can't be avoided.

  4. It requires some manual work to set up, and a little bit of ongoing work to keep it working. Basically when you add a new tag, you need to go into your Blogger template and add some simple code


  5. I'm not really supporting this. I work a very full time job, web dev isn't my bag anymore, and it was an effort for me even to do this much. You can ask. I might help. But don't expect it.

  6. Numerous aspects of this solution can screw up your blog big time, and that's all on you. Make sure to back up your existing template first.

  7. This solution is totally not 'scalable', meaning the more labels you add, and the more posts you apply a certain label to, the slower this will get. There's already a visible delay the first time a user loads a page containing this hack. The more you utilize this, the slower it will get. Why? Because for each label the code needs to go out, load an entire web page behind the scenes, scan it, extract the information it needs (specifically the number of posts for that label), and report back and update your main page. That's a lot of work for some simple stuff.

And so.. with all that said, here's how you set this jambo up:

1) Edit your template, and put this code after the <head> tag:

(note this is gigantic, because if the text in here wraps when you copy/paste, it's gonna break stuff)



2) Edit that code to work with your specific labels

At the beginning of that code, look for these lines:

label_page_data[0] = new Array('http://www.girlshandbook.com/labels/Makeup.html','Makeup');
label_page_data[1] = new Array('http://www.girlshandbook.com/labels/Dresses.html','Dresses');
label_page_data[2] = new Array('http://www.girlshandbook.com/labels/Sale.html','Sale');

You need to change those lines to include information specific to your blog:

  • First, look at your posts that have labels on them. At the bottom of the post you'll see the label name, and if you click on it, it will take you to the page with all your posts that have that label. You need to get the URL for each one of your 'labels pages'. It will look similar to the examples I've included. If you're a little more web-savy, you can go to the 'labels' directory on your FTP site and save some time.

  • Now, for each one of those URL's you gathered, you need to have a line similar to the ones I'm listing above. Notice how the numbers in the brackets go up towards the beginning of those lines? For each entry you add, those numbers need to go up in sequential order. Next you need to put in your label-specific URL in the exact fashion you see them above (in between the single quotes). Lastly, in the last set of single quotes you need to put the 'name' of your Label.

  • IMPORTANT: Each time you add a new label, you need to manually go into your template, and add a new line like this. For me to have it be automatic would take much more work than I'm willing to put in, and even then would require your web server to be set up in the right way
3) Edit your <body> tag

Hunt around in your template and find the tag called <body>. You need to modify that so it looks like this:

<body onLoad="getLabelContent()">

4) Add code in your sidenav to display the label stuff

Put this wherever you want in the sidenav section of your template:

<div id="label_content"></div>

That's just going to give you the bulleted list of your labels and the number of posts for those labels. If you want to add a header for it or change the style, you're going to have to learn some basic HTML and/or CSS and figure it out. This is not for beginners.

5) Show your appreciation! - Granted this isn't some off-the-shelf software, but if you were able to use this solution, show your thanks by doing one or both of these things:

  A) Put a link on your blog to my wife's blog: http://www.girlshandbook.com
  B) Throw us some loot using this handy button:

Have fun! soapboxgenius @ gmail.com