A friend of mine suggested that Tumblr was lacking a decent way to visualize the posts which you’ve ‘liked’. Tumblr provides a great way to view your own posts via the archive page, and so I thought I would try using their existing layout style to visualize liked posts. The Tumblr Likes Grid is my attempt.
Now, I’m not Tumblr, and so I don’t have access to users’ information directly. The information about posts a user likes is available via a call Tumblr’s API. Tumblr is among a growing list of sites using OAuth to authenticate a user and allow querying for data.
Unfortunately, there aren’t many decent javascript OAuth libraries, and I finally settled on using PHP for the three-legged OAuth handling. Even then, it was difficult to get right, and I relied heavily on examples in lieu of better documentation about the process.
The rest of the page is pure javascript. I’m using jQuery for all of my AJAX and DOM manipulation, and mustache for template rendering. I have to say, mustache is really enjoyable! Tumblr has several different types of posts, including text, photos, audio, video, quotes, and more. Each post type corresponds to a matching partial template that mustache can retrieve dynamically when rendering a post object. The templates are cached after the first use for faster rendering.jQuery is used to insert the post objects into columns and month sections dynamically as they are received.
Repeated calls retrieve successively more posts. I tried to emulate the style of the archive page as best as I could, and most of the css and imagery is taken from Tumblr verbatim. I made some alterations, including abandoning the absolute positions of all the photos. I’d like to investigate other interesting ways of visualizing the data in the future, maybe with charts and graphs (yay math!).
Here’s what’s inside the box:
- mustache.js
- jQuery
- PHP
- OAuth, with a little help from Arvin Castro's example
The following sources were helpful, especially in setting up the OAuth authentication process:
- Authenticating With Tumblr Using OAuth in PHP
- http://pastebin.com/g1ULp4bT
- http://pastebin.com/g1ULp4bT
- Brian Carstensen's js-util mini project
- and of course...Tumblr! <3
Unfortunately, you’ll need a tumblr (and some liked posts) to view the page. Here’s a screen-shot for the uninitiated:
a screenshot of the grid
So that’s the Tumblr Likes Grid. Check it out! Feel free to leave comments and questions here or on my tumblr.
Enjoy!