How to create a Tumblr "Recent Posts" list

How to create a Tumblr “Recent Posts” list

January 7, 2011

See it in action!

When I was re-designing my portfolio site I wanted to add a “Recent Posts” section on my main page but realized that Tumblr didn’t have a widget available. I wasn’t ready to include my entire Tumblr onto my site so I was on a mission to find a way to display it. I wanted some control over what it would look like without having to have it load in an iframe or something obtrusive (which were many of the solutions that I came across).

My solution is a rather simple (note: quick and dirty) one that makes use of the Google Feed API. I couldn’t find any articles or tips on using the API with Tumblr, so I figured I’d create a how-to for those on the same mission I was on.

What we’re going to do is use the Google Feed API’s Feed Control to grab, parse, and display our Tumblr’s RSS feed.

Let’s start with the Feed API

1. You’ll want to generate a Google API key as it’s very useful to have one. Google will be able to notify you if there is something wrong with your application/website.

2. In the <head> of your document, include your API key script and replace “YOUR-KEY-HERE” with the one you’ve just generated.

<script src="http://www.google.com/jsapi?key=YOUR-KEY-HERE" type="text/javascript">
</script>

3. You can place the following at the bottom of your document right before your closing </body> or in between your <head> tags. The feed will be loading into a <DIV> with a “recentPosts” ID. Don’t forget to change “username” with your Tumblr username!

// Don't forget to wrap this between your 
// <script type="text/javascript"></script> tags if necessary!

// Grab, Parse, Display

    google.load("feeds", "1");
    
    function OnLoad() {
      var feedControl = new google.feeds.FeedControl();
    
      feedControl.addFeed("http://username.tumblr.com/rss");
    
      feedControl.draw(document.getElementById("recentPosts"));
    }
    
    google.setOnLoadCallback(OnLoad);

Controlling how many entries to display.
By default, the feed control displays four entries. To change that, add the following line directly after line 9 and change the number (2) to whatever you like.

feedControl.setNumEntries(2);

That’s all for the Feed API part. Next, we’re going to create the <DIV> container to load our feed and do some basic CSS styling.

Feed Container

Create the <DIV> and give it a “recentPosts” ID.

<h4>Tumblr Posts</h4>
<div id="recentPosts"><p>Loading...</p></div>

Styling

You can save it and you’ll see that the styling is off. Since this is a quick and dirty way of controlling it, you’ll have to work with some of the default CSS classes that get auto-generated. This is what my CSS looks like to match my site. Play around with it to get it to look how you want it to.

/* Tumblr Google Feed API */
.gfc-results
{
	font-family: Arial, Helvetica, sans-serif;
	color:#444444;	
}

.gfc-resultsHeader
{
	border: none !important;
}

.gfc-result
{
	border-bottom: 1px solid #c0c0c0;
	padding: 10px 0;
}

a.gf-title
{
	font-size:.875em;
}

.gf-relativePublishedDate
{
	font-size: .625em;
}

.gf-snippet
{
	font-size:.875em;
	line-height:1.5em;
}

That’s pretty much it! I’m sure I might have missed a few things but I’ll include them as time goes by and comments are made. There probably is a better way to do this, but I’ve found this to be the easiest by far.

Comments ♥ 20 Tumblr recent posts google feed api