Tumblr: Display a list of entries in the sidebar

Thursday, September 2. 2010
Comments

Update 2010-09-06: I turned my JavaScript code into a handy plugin for jQuery — let me introduce: jquery-simplerss.

So for whatever reason, on a lot of blogs (but not mine ;-)), the sidebar also contains the list of latest entries on said blog.

I recently edited a template for a client and he requested the same feature — which put me through three hours of nightmare.

Tumblr

Tumblr is a hosted blog service. It doesn't have as many (confusing) features as for example Wordpress or Serendipity, but it's doing really well at people usually do with blogs: posting stuff. Stuff includes text, excerpts from chats, photos, quotes, music, videos and maybe more.

The advantages of Tumblr versus any local blog install are:

  • it's (completely ad-)free (a local blog requires a webhost or server of some kind)
  • no installation
  • no security updates

Tumblr also comes with a domain and custom theme feature where you can basically CNAME a domain name to their server and it looks like it's part of your domain — take my activity stream for an example.

While I realize that Tumblr is not free for forever, all of the above are plenty of good reasons why I'd rather recommend my clients to get a Tumblr account instead of installing Wordpress on their server, and getting hacked a week or so later.

Customized themes

For those of us with slightly less design skills, there are commercial themes available, for the rest, they may use customize any theme available.

Customized themes are simple and to be kept simple for the most part. So for example a sidebar with the latest posts is not something the theme allows you to do and while I value that my suggestion was taken to the development team (like others before), I couldn't really wait until someone gets around to making it happen.

JavaScriptjQuery to the rescue!

So I decided to use jQuery to parse the blogs RSS feed and display the three latest items. While I realize that there are plugins available, I thought I'd do it myself — quick and dirty — because jQuery offers with $.ajax() and .find() pretty much all you need to download the RSS feed and parse the bits from it. Since my blog runs on http://blog.example.org/ and the RSS feed is at http://blog.example.org/rss not even the cross-domain obstacles apply!

Here's how I did it!

Let's walk through the code, shall we?

  • $.ajax() is used to GET the feed
  • for Tumblr: dataType: 'xml'
  • .find() is used to select the items (rss > channel > item)
  • inside the loop:
    • find title, description and guid
    • create html (which is basically my template)
    • exit from the loop after we ran through the 3 latest items
  • after the loop: append to a selector

For the above to work you'll need (to include jQuery and the following HTML):

<ul id="blogposts"></ul>

Gotchas

So even though Tumblr's feed is a valid RSS feed per feed-validator.org, there were a few things that didn't work right away.

At first I used dataType: feed in $.ajax() — which made sense at the time. But the problem is that Tumblr sends Content-Type: text/xml for their RSS feed. I haven't checked the internals of the dataType but apparently Google Chrome applies stricter rules to what it thinks are feeds.

This issues implies that for example the entities in <title> make Google Chrome drop the <title> all together when the XML feed is imported. There is an interesting thread on Stackoverflow about the issue. The quickfix is to use dataType: xml instead.

The second problem is that <link> is dropped/ignored because the link is wrapped in doublequotes. So I used <guid> instead.

Fin

I certainly hope that this example is complete and saves someone else some time.