iPhone interface for Tumblr
Last week I was pointed, by Phil Howie, to the iUI framework. It’s the continuation of Joe Hewitt’s initial work to create an iPhone interface library for web apps that can be applied using CSS classes and JavaScript, and it works pretty nicely, mimicking the iPhone look and feel and replicating many common controls.
The mobile template provided by Tumblr is fairly plain, and, while you can happily browse full Tumblr themes in Mobile Safari, the experience isn’t perfect — video and audio posts don’t work for starters. So I’ve built an iPhone interface for Tumblr (see screenshot) which is released under Creative Commons so anyone here can add it to their site, or make derivative works (with some provisos).
I’m not calling it a “theme” because it’s not. It doesn’t use Tumblr’s custom theme engine at all. It’s actually a self-hosted HTML page that uses jQuery to dynamically load post data from the Tumblr API, and format it on-the-fly using iUI classes.
My first cut used Tumblr’s RSS feed as the data source, however this feed is limited to the 20 most recent posts, and the approach seemed to suffer from cross-site scripting issues, so I scrapped it in favour of the API version.
The completed interface displays all post types and uses regular expressions to extract video and audio URLs from embed code, enabling YouTube videos and MP3 files to be played using the iPhone’s built-in players. One slight downside: the interface preloads the data for each post in the list, making the animated transitions sluggish at times; I’m looking at how this might be improved.
Instructions for use
To provide an iPhone version of your Tumblr page you’ll need to use either a custom domain (so that you can add a subdomain to it, for example i.matthewbuchanan.name) or host the HTML file on a different domain entirely, and link to it from your Tumblr page.
First, grab the HTML code for the page. You’ll need to change one string: the tumblr variable on line 31 should contain your own Tumblr URL. Save the amended page as index.html under your subdomain. You’ll also need to download the latest iUI files and put them in the same place as your HTML page, in a folder called iui.
If you have any problems or feedback, let me know.
Update: I’ve created a hosted solution, and posted details here.
