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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)