most tweeted

This year alone, Sencha blog corner hosts around 190 blog posts of assorted topics, anything from product announcements, basic learning guides, HTML5 scorecards, to web technologies highlights. The winning blog posts, in terms of how many tweets they got (at the time of this writing), are listed here:

Apparently the #1 in the above list, the relation between browser and GPU, is the article I wrote back then, which is essentially a different version of my other explanations on the use of backing store and compositing in WebKit. Thus, there is my shameless plug: even if this year does not seem too magical for me, at least what I wrote did get some interests from some of you.

Now, while this is interesting, the fun part is actually how I came up with the list. While I’m sure it’s entirely possible to use various different API to get the numbers, I was playing with PhantomJS to see if I could do that with a simple site scraping approach. Since the number of tweets, embedded via the Twitter widget, is always displayed in each blog post, that shouldn’t be too difficult, should it? Likely I need to clean up the script before I can include it as one of PhantomJS examples, if at all, so in the mean time just look the complete script at this gist: gist.github.com/1519281.

The gut of the script is very simple. First, load the URL of the blog post and then try to find the iframe containing the embedded Twitter widget. This is accomplished easily with just the following lines of code:

page.open(url, function (status) {
    if (status === 'fail') {
        callback.call(this, count, title);
    } else {
        title = page.evaluate(function () {
            return document.title;
        });
        openWidget(page.evaluate(function () {
            return document.querySelector('iframe.twitter-share-button').src;
        }));
    }
});

Once the corresponding URL of the Twitter widget, completed with all the query string, is obtained, it is now a matter of loading it and extracting the count. This is actually handled in the openWidget() function referred above. The entire function is reproduced here verbatim for your pleasure.

function openWidget(location) {
    var widget = require('webpage').create();
 
    widget.open(location, function (status) {
        if (status !== 'fail') {
            count = widget.evaluate(function () {
                return parseInt(document.querySelector('a#count').textContent, 10);
            });
        }
        callback.call(this, count, title);
    });
}

Pretty straightforward.

Now, for this to work, we also need the list of URLs of every single blog post. Again, while it is likely easy enough to get that list using FeedBurner API (through which Sencha serves the blog feeds), I decided to take a shortcut and use the feed view in my Google Reader. After ensuring that those posts in 2011 are available in the subscribed view, a quick hack with Web Inspector and its Copy as HTML feature gave me the complete list of these blog posts (including short text snippet for each, which we happily ignore). Getting the list of the blog URL is a single-line solution:

grep -Eo '(http://feedproxy.google.com/[a-zA-Z0-9~/_-]*)' reader.html

Every item in Google Reader gets its own short URL, in the form of http://feedproxy.google.com/~r/extblog/~3/leusWn2oYnc/, which will redirect to the actual blog post. Fortunately for me, the PhantomJS script illustrated here takes care of that automagically.

Looking forward to seeing more successful 2012 blog posts!