Automatic List of Labels for Blogger Classic Templates / FTP

Since Blogger introduced labels, one of the pressing concerns for those publishing via FTP or those on blogspot who don't want to switch to a Layout based template was how to automatically list all the labels used on the blog in the sidebar. Blogger does not provide any template tags for this in Classic Templates (maybe they will at some point, but adding new features to Classic Templates probably isn't a high priority, if at all).

For FTP blogs, there are several different methods floating around to do it, most of which use PHP to parse the labels folder and then create the list from all the files in that folder. While this is fine (better than manually creating the list), it has a few drawbacks. One, if you are fussy, and create/delete/add labels, ones you have removed will not be deleted from the server and will thus still be listed. PHP isn't always the easiest thing for people to work with unless they know their way around it. And PHP is definitely not an option for those on blogspot who want to keep their Classic Template.

Well it just got a bit easier for most of these folks with the introduction of public Blogger metafeeds. What's a metafeed you ask? Don't ask. :-)

Ok, well Blogger does provide what they term a 'metafeed' for Blogger accounts, that lists all the blogs in that account. And in New Blogger (now known as Blogger) it also contains a list of all the labels used for that blog in that metafeed. But until now, the metafeeds have been only available if you authenticate into the feed (login) which put it out of reach of javascript. You could do it via PHP but it was a little more complicated as you have to sort through the Blogger authentication stuff (I had been doing this via PHP for the great humorlessbitch to build her ever growing list of labels for several months). Last week that changed, and now public blogs have access to a public metafeed (no authentication) that can easily be accessed via javascript.

Caveats - this only works for blogs that have their admin profile publicly available, and the blog must be publicly listed in that profile (this is as it should, if you haven't announced your blog publicly, then your metafeed shouldn't be public). It also does NOT return the number of posts in each label. Just the list of all the ones used.

Ok, you need two pieces of information for it to work. Your Blogger UserID number, and your Blogs ID number. Both of these you can get via your dashboard. For the USERID, click on the View Profile link and it's the long number at the end of that url. For the Blog ID number, again from the dashboard if you click on any links to change settings or create a post for that blog, all links will have blogID=XXXXXXX at the end where the X's will be that particular blog's ID number. Once you have that, here is code that will fetch and display the labels for your blog.

<div id="labelList"></div> <script type="text/javascript">
//<![CDATA[
function listLabels(root){
    var baseURL = '/search/label/';
    var baseHeading = "Labels";
    var isFTP = false;
    var llDiv = document.getElementById('labelList');
    var entry = root.entry;
    var h2 = document.createElement('h2');
    h2.className = 'sidebar-title';
    var h2t = document.createTextNode(baseHeading);
    h2.appendChild(h2t);
    llDiv.appendChild(h2);
    var ul = document.createElement('ul');
    ul.id = 'label-list';
    var category = entry.category;
    labelSort = new Array();
    for(p in category){
        labelSort[labelSort.length] = [category[p].term];
        }
    labelSort.sort();
    for (var r=0; r < labelSort.length; r++){
         var li = document.createElement('li');
         var a = document.createElement('a');
         if(isFTP){
             a.href = baseURL + encodeURIComponent(labelSort[r])+'.html';
             }
         else {
             a.href = baseURL + encodeURIComponent(labelSort[r]);
             }
         a.innerHTML = labelSort[r] + ' ';
         li.appendChild(a);
         ul.appendChild(li);
         abnk = document.createTextNode(' ');
         ul.appendChild(abnk);
         }
    llDiv.appendChild(ul);
}
//]]>
</script>
<script type="text/javascript" src="http://www.blogger.com/feeds/USERID/blogs/BLOGID?alt=json-in-script&callback=listLabels" ></script>

To configure it, near the bottom in the script change USERID to the user ID you found in your profile link. Then change BLOGID to the ID number you got for your blog. Then at the top, a couple of variables to set depending on whether you are publishing via FTP, or if you are on blogspot. The baseURL should be set to the path to the labels for your setup. If you are on blogspot, what is there now doesn't need to be changed. You only have to change this if you are on FTP, so just find the path to your labels folder and include it here (include the trailing slash). baseHeading is what header it will put above the labels, you can change that to anything you want. The last is the isFTP variable. If you are on blogspot, leave it to false. If you are publishing via FTP, change it to true (this just turns on the file extension in the script which blogspot labels don't use).

With that set, just put the code wherever you want it to display, and try 'er out. I should note, the meta feed doesn't return the label entries in any sort of order that I can tell, so the script above attempts to sort them alphabetically (the sorting will do labels with capitalized first letters, then ones with lowercase first letters).

If you need to style the list, here are the entries used by it for CSS.

#labelList {}
ul#label-list {text-align:justify}
ul#label-list li {display:inline;}

The sample above will give it a cloudy structure (not a true cloud as there is no weight given to the entries, but what the hell).

For a working example, see the bitch as she is now powered by the javascript version.(Update-the bitch is no longer powered by this as Zo moved to using a custom domain, so that link isn't relevant now. Visit her just the same.) And just for giggles, here's the list of labels that Improbulus has used so far in her fancy new domain (she was late to the labeling party, but she is slowly catching up).