How to get started with the Tumblr API, part 2

In the first part of this mini-series we requested an for an API key from Tumblr, then we used it to retrieve data and the avatar for a blog.

In this concluding part, we’ll retrieve some posts that are a little more complex.

Getting posts

So far our calls have been simple, because there was no json to interate through. But now, because we’re looking for a single post from multiple posts, we need to do a little more to arrive at our data.

Our first step is to determine our URL (replace your-api-key with your actual API key that we found in part 1):

http://api.tumblr.com/v2/blog/blog.tumblr.com/posts?api_key=your-api-key

This is a fairly simple URL, but there are parameters you can add if you wish. Parameters allow you to return only text posts, find a specific post, or even search within posts. You can read more about what’s available in the posts section of the Tumblr API page.

To retrieve the data we use a simple jQuery Ajax call:

$.ajax({
    url: "http://api.tumblr.com/v2/blog/blog.tumblr.com/posts?api_key=your-api-key",
    dataType: 'jsonp',
    success: function(posts){
  // Fill and UL with the posts
    }
});

(As before, it’s important that we set the dataType to jsonp because we’re loading across domains.)

If you run console.log(posts) inside the function you’ll be able to see the data that we’re retrieving in the console.

The first thing we want is the posts object that is inside the response object, which we’ll assign to a variable:

var postings = posts.response.posts;

After this we want to create an empty string variable that we can populate later:

var text = '';

Next, we need a loop to iterate through the objects inside our postings variable’s data:

for (var i in postings) {
  var p = postings[i];
}

Then, inside the loop, we retrieve the image, title and URL of the post and append it to our text variable:

text += '<li><img src=' + p.photos[0].original_size.url +'><a href='+ p.post_url +'>'+ p.source_title +'</a></li>';

After the for loop, the final thing to do is append the text to an unordered list for display purposes:

$('ul').append(text);

Conclusion

If you want to see a demo and play with the code you can check my pen.

As you can see, the Tumblr API is really simple to work with. There’s much more to it, which you can discover on the API Page, but I hope this gave you a taste for what’s possible in just a few lines of code.