Blogger Hacks, Categories, Tips & Tricks

Wednesday, August 16, 2006
Under The Hood: Blogger's New Labels
Being unable to help myself, I thought I'd have a quick peek at the label system.

The logical structure of the page (including "widgets" like archives, feeds etc) seem to be encoded in a strange markup and dumped in a giant string in the header. This string is the sole parameter of a function called "_WidgetManager._Init". This function is invoked on page load and is defined in this external script. At this point, my brain boggled and I needed a lie down.

The actual taglabel names and counts are not in the header object literals - they make an appearance via a plain old unordered list in the sidebar. In my view, this is not a good place to keep such crucial information. It should be out in the wider world, making itself useful and mingling with others of its ilk. (Perhaps this will be supported in Blogger's Atom API - but I don't see it.)

To that end, I knocked together a little fragment of (ugly, unsafe) code to extract the labels and counts into a JavaScript object and read it back to you:

javascript: var rexp=/search\?label=(\S+)/i; var cexp=/.*(\d).*/i; var labels={}; var links=document.links; for(var i=0; i<links.length;i++) if (l=rexp.exec(links[i].href)) if (!links[i].rel) labels[l[1]]=cexp.exec(links[i].nextSibling.nodeValue)[1]; for (var j in labels) alert(j+' ['+ labels[j]+']')

(load up a beta blog and copy/paste this code into your browser address bar to watch the magic unfold.)

Here's another code snippet to transform Google's labels into a form a little more familiar to delicious JSON feed users:

javascript: var rexp=/search\?label=(\S+)/i; var cexp=/.*(\d).*/i; var labels={}; var links=document.links; for(var i=0; i<links.length;i++) if (l=rexp.exec(links[i].href)) if (!links[i].rel) labels[l[1]]=cexp.exec(links[i].nextSibling.nodeValue)[1]; var str="if(typeof(Delicious) == 'undefined') Delicious = {}; Delicious.tags = {"; for (var j in labels) str+='"'+j+'":'+labels[j]+','; str+="};"; document.write(str);

Does that get your creative juices flowing?

Filed in: , , , ,

See also:
Posted at 1:05 AM by Greg.
<    >
Blogger Fin said...

<    >
Blogger Greg said...
Yes, good find!

There's some reading on how Atom deals with categories (or labels), and how to suck them out of Google.

At least there's hope for delicious/Blogger integrating to the point that it should be possible to batch load tags/labels out of delicious and into Blogger ...

... or should that be the other way around?

At the moment, delicious has superior tag management facilities - which speaks poorly of Blogger given my difficulties last week.

Where is the natural home for your blog's tags? With your blogging platform or your tagging platform?

<    >
Blogger Greg said...
Just read Pete's earlier comment ... probably not a stroke of luck that he found those links given that he works at Google!

So, Pete, any chance of JSON(P) feeds? It sure makes life easier for Blogger extension-enthusiasts.

<    >
Blogger Unknown said...
Greg, you seem to have played with labels already! But, where is the equivalent of the good old Blogger tags for Item title, Item body, permalink URL etc? I browsed through the gdata API which seems to be only for client apps. We need hooks for the template hacks! Anyway, its too early to ask given that html editing is not opened up for layouts yet :)

<    >
Blogger Gaby de Wilde said...
It's a shocking heap of code isn't it? Even my script blog is light compared to this.

From a UI point of view the sidebar should display interestingly lookin links. This expandable archive stuff takes extra clicks and it doesn't show those attractive topics peeps wana read.

It's such exotic code I have no idea what it does jet. lol Maybe it can be disabled. We shal probably end up making it even more complex. ha-ha

Never the less, it's big fun. :-)

Good luck beta.blogger hackin.

<    >
Blogger RPM said...
@john: I looked at labels and now I am in a fix. Should I stick with blogger labels or continue to use the delicious/greasemonkey hack? One thing the delicious hack gives me is a little more traffic.

Maybe do both? But it would get crazy very quickly.

<    >
Blogger Greg said...
For my money, I'd stick with what you're doing until a clear reason to use Blogger labels comes along.

One reason might be that you could do a practical "show all posts with these labels" switcheroo.

Well, if you're fully tagged up in delicious, go and get FreshTags and put this link under the posts section:

<a href="javascript: window.location.href = 'http://' + + '/search?label=' + curr_tags">See these posts!</a>

That way, readers can use FreshTags to browse your tags and look at post titles. If they want to see the actual posts (not just titles) they click this button. Those posts are displayed in their entirety on the page. Best of both worlds!

Of course, until the Atom label and post feeds are JSON-friendly, this supposes that Blogger labels are kept synced with the delicious/technorati ones ... time for a Greasemonkey update?

<    >
Blogger Singpolyma said...
I know we've been talking about this, but as soon as I get some BETA exp of my own down and start fixing hacks, I'll start work on a script upgrade (or a second script for BETA, or w/e), unless Johan beats me to it :)

<    >
Anonymous Anonymous said...
Just installed Labels on my Blogger FTP blog and am really digging the new functionality. For FTP users follow my Guide to Blogger Labels to install.

eXTReMe Tracker