ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Fetching Tumblr blog posts from a different website

Updated on November 18, 2013

I'm writing this hub to show you how you can show your Tumblr blog posts in a different website whether it's your blogspot blog, self-hosted Wordpress or a simple website.

So the developers of Tumblr have provided us a way to fetch information from our Tumblr blogs to use them someplace else. Just like Twitter, Tumblr API outputs a JSON serial which contains all the data regarding our blog. To use the data we need to parse the JSON and separate each of the data like blog name, post id, post text, post image and post URL. I'm going to show you how you can do it with jQuery.

jQuery logo. Credit: jQuery.com
jQuery logo. Credit: jQuery.com
Credit: Tumblr
Credit: Tumblr

There are some JSON functions in jQuery which are used to fetch data from JSON objects, there are also some jQuery functions which can create JSON objects but instead of them I've used the Ajax function to parse the JSON object containing the data of my blog.

It's very easy once your parse the JSON object, manipulating the data is a pretty easy job. The code I've used is as follows:


$.ajax({ 
    type: 'GET', 
    url: 'http://api.tumblr.com/v2/blog/rofl-gifs.tumblr.com/posts?api_key=4k2NGQU1cJZ4d1ZqrvKR9mnpUUmubGPlyUEzDZfiL5loPeIOzv', 
    data: { get_param: 'value' }, 
    dataType: 'jsonp',
    success: function (data) { 
    for (i = 0; i <= 19; i++) {
     	$('#results').append('<div style="text-align: center; border-top: 1px solid #aaa; width: 300px;"><a href="' + data.response.posts[i].post_url +'"> ' + data.response.posts[i].caption + '<img align="center" src="' + data.response.posts[i].photos[0].alt_sizes[0].url + '"></a></div><br/><br/>');
				}
    }
});

Explanation:

The function I've used to parse JSON is $.ajax which accepts five parameters

  1. Type
  2. URL
  3. Data
  4. Data Type
  5. Success

Type

This parameter means what you want this function to do, if we want to get data from a JSON object we have to write GET in front of it.

URL

This is a link to the JSON object you want to parse, to get the JSON object containing your blog's data you should write the URL like this:

http://api.tumblr.com/v2/blog/Your-blog-name.tumblr.com/posts?api_key=4k2NGQU1cJZ4d1ZqrvKR9mnpUUmubGPlyUEzDZfiL5loPeIOzv

An API key is necessary to use Tumblr's API you can see my API key in the above example you can create your own API key from here. This URL also accepts parameters such as:

  1. Base Hostname - The name of your tumblr blog which should be written in the url.
  2. API Key - Necessary for gaining access to your blog info.
  3. Type - Type of posts to return like text, photos etc.
  4. ID - If you want only a specific post to be returned you can use this
  5. Tag - If you want only posts with mentioned tags to be returned you can use this.
  6. Limit - You can limit the number of posts to be returned using this parameter.
  7. Offset - This is useful for getting more than 20 posts. It can be used as a starting point of posts to be returned. (I'll explain this in the next hub)
  8. Reblog Info - Returns the information related to the posts reblogs.
  9. Notes Info - Returns the information of how many times the post was noted.
  10. Filter - Useful when you want to control the post format.

These are the parameters you can use with URL. The problem with this is that Tumblr has limited the posts that are returned you can only get 20 posts at a time or maximum 50. But you can solve that issue using the offset parameter which I'm going to explain in the next hub.

Data

This is to is to define what value should be treated is data.

Data Type

Type of data, we have to use jsonp because we are dealing with a JSON object.

Success

Success accepts codes you can run a function along with a set of codes which will be executed upon success.

As you can see I've used three infos in the code one is Post URL which in the code looks like data.response.posts[i].post_url , Post text which is data.response.posts[i].caption and the image link which looks like data.response.posts[i].photos[0].alt_sizes[0].url all of these are used inside a for loop which runs through all the posts returned and gets these information. The JSON object returned contains a lot of information you can see those infos by going to:

http://api.tumblr.com/v2/blog/your-blog-name.tumblr.com/posts?api_key=4k2NGQU1cJZ4d1ZqrvKR9mnpUUmubGPlyUEzDZfiL5loPeIOzv

or simply running a console.log() function in the success function:

console.log(data);

If you run a console.log() function as mentioned above you can see a hierarchy of data by opening the developer console of your browser.

And a simple thing you should keep in mind is that the post order Descending which means it will start from the last post.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    Click to Rate This Article