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">
<!--
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:

[/js]
            try {
                title = obj.value.items[i].name[0].content;
                title = title.replace('<title>', '');
                title = title.replace('</title>', '');
                title = title.replace('Tech Knack: ', '');
            }
[js]

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

8 Comments:

  1. Hi,

    Thanks for putting this up. I did this 2 days ago but it just doesnt seem to be showing up. My most popular posts arent showing up. All I get is the title.

    my blog is http://oldschoolvalue.blogspot.com and my pipe is http://pipes.yahoo.com/oldschoolvaluepipe/oldschoolvalue_pipe

    Can you provide some tips?

  2. Hey Jae,

    Some general tips for troubleshooting:
    Step through your pipe. If you click on individual elements, it’ll show you the results at that point in the pipe. Great for finding exactly where something went wrong.
    Open the script’s src in your browser; it should spit out some javascript code with lots of curly braces ( { and } ).
    Check the files that the Pipe is pulling.

    In your case, it seems that your pipe is pulling the groups attachment fine, but the attachment (an XML file) doesn’t have the right content. The file that I checked from your pipe had no <Row> element (which the Pipe looks for). It also had a section which indicates that the data was not properly sent: <RowCount>0</RowCountgt;. You might try checking your email settings in analytics, and send a few reports manually to see if a fresh report solves the problem.

    I also noticed that your script calls http://pipes.yahoo.com/oldschoolvaluepipe/{id}&_render=json&_callback=topcontentCallback . I pasted this in my browser, and was met with an error page. The proper filename should be http://pipes.yahoo.com/pipe.run?_id={id}&_render=json&_callback=topcontentCallback

    Hope this solves your problems!

  3. thanks for the quick response. I’ll look into it and hopefully it will work.

  4. woo hoo it works!

    thanks a lot. I was searching for something just like this!

  5. Recently the most popular post has stopped working. I checked yahoo pipes and its unable to get results. I noticed that you are having the same issue as well. Could it be analytics changed the XML and the parameters have to be changed?

  6. jjun, thanks for the heads up. The problem is that Google Groups has changed the URLs with which they report attachments. I’ll work on it in my free time, and post an update if I can manage to fix it.

  7. I have done a popular posts widget with postrank feed.

    welcome to try and comment !

    http://itblood.blogspot.com/2008/11/popular-posts-widget-with-postrank-feed.html

  8. Time to upgrade !

    PostRank has relaunched their popular posts / top posts widget . It is a must use feature.

    If you have used my popular posts widget with postrank feed before, you might want to upgrade to it !

    http://itblood.blogspot.com/2008/12/postrank-top-posts-widget-relaunch.html

    http://itblood.blogspot.com

No Pingbacks