Most Popular Posts list for blogger

Last week I was looking for a way to have a "Most Popular Posts" widget here on blogger. The first and only true "widget" I found was Affiliate Brand's Most Popular Posts Widget. The only problems: it has a default color scheme that doesn't really go with that of my blog, and the height is pretty much fixed. It seems that you can change the look-n-feel with an external CSS sheet...but, unless you have another file host, that's a luxury we cheap Blogger bloggers don't have :)

Not satisfied with AffiliateBrand's widget, I kept searching. To no avail; that was simply the only pre-packaged blogger widget out there. Then the thought occurred to me to use my Google Analytics data to roll my own pseudo-widget. Genius, no? Well, it would be, if Analytics had an API :(

Fortunately, there are geniuses out there who have done genius things. In this case, Chris Riley of Blogoscoped has mashed up a combination of Google and Yahoo! offerings in such a way that we poor Blogger users can have a Popular Posts widget!

The basics

The basics are these:
1) Have analytics setup on your blog
2) Setup a Google Group
3) Setup a GMail account
2) Setup email notifications from Analytics' top pages to a GMail account
3) Setup GMail forwarding to your Google Group
5) Setup a Yahoo! pipe to fetch and process your top content report
6) Setup a pseudo-widget script on your blog to display the pipe's results

The pipe

While Chris provides his Yahoo! Pipe for others to clone, I had issues getting it to work with fetching the page's title contents. Here's the pipe that I'm using. Of course, a different pipe means different code for parsing the results.

The javascript

Here's the javascript that I use to display my pseudo-widget:
<div id="popularposts"><noscript>Please enable javascript to view the most popular posts list.</noscript></div> <script type="text/javascript"> <!-- // Robust pipe-output-handling function // as found at http://techknack.blogspot.com/2008/01/most-popular-posts-list-for-blogger.html function topcontentCallback(obj) { try { var url,title,output; output='<ul>'; for (i=0; i< obj.count; i++) { url = obj.value.items[i].url; try { title = obj.value.items[i].name[0].content; title = title.replace('<title>', ''); title = title.replace('</title>', ''); title = title.replace('Tech Knack: ', ''); } // if we didn't get the title (bad Pipe!), give a pseudo- // title from the URL catch (e) { title = url.substring(url.lastIndexOf("/")+1, url.lastIndexOf(".html")) .replace(/\-/g, " "); } //remove the <title> tags the pipe leaves in. output+= '<li><a href="'+url+ '" title="'+title+'">'+title+'</a></li>'; } output += '</ul>'; document.getElementById("popularposts").innerHTML = output; } catch (e) { var error = "Error fetching data: "+e; if (e.toString().indexOf('i')!=-1) error += "<br />i: "+i; document.getElementById("popularposts").innerHTML=error; } } //--> </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_id=bi6F5qPK3BGfvuxf1vC6Jw&_render=json&_callback=topcontentCallback" type="text/javascript"> </script>

Yes, my JS is admittedly a bit more robust than Chris's. This is mostly because of various issues I either ran into or thought of while trying to implement the widget. For those who are interested, I'll post an explanation of the code in another post.

For this to work, you must enable "post pages" in your template's preferences. There might be a way to get this to work without post pages, but I wouldn't recommend it ;)

If you are going to copy and paste this code (probably after cloning my pipe), be sure to change things appropriately:

Change the pipe ID in the last script element to the ID of your new pipe

In the "title fixup" section:
try { title = obj.value.items[i].name[0].content; title = title.replace('<title>', ''); title = title.replace('</title>', ''); title = title.replace('Tech Knack: ', ''); } The last "title.replace" line removes the site-wide title that is used on every page. Change it according to your Blogger setup (if you leave it as-is, though, it shouldn't hurt anything).

Additional links:
No Google Analytics API? No Problem!
Yahoo! Pipes