Displaying most popular post on Tumblr blog - tumblr

Question

I've been tasked with adding "Most Popular" functionality to a Tumblr blog. Essentially, when the Most Popular button is clicked, I need to display either a single post, or a list of posts, ordered by their popularity. The popularity will be calculated based on the number of "notes" that the post has.
Does anyone have a suggestion on the best way to go about this? I can't find anything baked into their theme customization at http://www.tumblr.com/docs/en/custom_themes#search. Is going the API route the only way to accomplish such?

Answer 1

Well, I'm no expert with Tumblr but I have worked a fair share with the API for a project I'm developing. From my experience it seems you would need an API to get all of the posts note count. Using a theme I know to order the posts shown on the page without an API key, but to go further back you'd have to use a javascript plugin or just use the Tumblr API (it's surprisingly easy to use)
From my short time I just spent thinking about the issue, you could put a NoteCount on each of your posts (hidden with CSS or not; up to you) and then use the API's notes_info to obtain all of those numbers and compare them. You'd then store how ever many posts you want (according to the note count) in an array and use that array on the page you want. It seems like a lot of work, but I'm not sure how else you could do it
EDIT
After investigating the issue a bit, I found that note count is far from a consistent feature on Tumblr. There is no one class that all note counts share nor is the text around it consistent. It seems that you would have to do it on an individual blog basis. Once you obtain the HTML for the posts, through a script or the API, you can run a function similar to the following which uses regex to detect where the note count
var posts = document.querySelectorAll('.post'), // Get all posts (*most* blogs have this, not all)
noteExpr = /with ([0-9]+) notes/, // Get any numbers between "with " and " notes"
noteCounts = [];
// Creates an array filled with all of the note counts
for(var i = 0; i < posts.length; i++) {
noteCounts.push(noteExpr.exec(posts[i].innerHTML)[1]);
}
// Do something with noteCounts
Demo, using posts from one of my favorite blogs MotionAddicts
Some more examples using sites I look at:
For 58 notes use />([^>]+) notes/
For <div class="notecount">Notes: 218</div> use /Notes\: ([^>]+)</
The downside is this has to be customized for each blog if they vary in the format, but it is the only way I know how to without using the API, even then I'm not sure there is a better way
Other info:
Studiomoh had a similar plugin but it only works for pictures
Example of how to include a NoteCount
How to include a note count when there are no notes