Fetch Posts using the v3 API

Blogger's templates aren't necessarily straightforward to tweak, and a common use case is embedding your posts from blogger.com in an existing website. To do this, you can call the Blogger v3 API from your webpage using an ajax request - these instructions are based on a webpage which has jquery.

Note: The v3 API is not openly available yet, so if you haven't yet, you'll need to apply for access.

Fetching Public Posts

Getting posts for a public blog is just an http request to the Blogger API. Click this link below to play around with the request in the Google API Explorer.

GET https://www.googleapis.com/blogger/v3/blogs/2399953/posts?key={YOUR_API_KEY}


To get the posts for a blog in your web page, run an ajax request to the api.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var blogId = '2399953';
var apiKey = '(Your API Key)';
$.ajax({
  url: 'https://www.googleapis.com/blogger/v3/blogs/$BLOG_ID$/posts?key=$API_KEY$'
    .replace('$BLOG_ID$', blogId)
    .replace('$API_KEY$', apiKey),
  success: function(data) {
    console.log(data);
  },
  dataType: 'JSON'
});
This example code will log the posts list object to the console.

The response object, if successful, is a blogger#postsList, so the actual posts will be in the items field.

Fetching Private Posts

I haven't written up OAuth instructions yet, so I'll update this post with instructions on private blog requests soon!

Fetching more results

By default, the page size is 10, so if you have more posts than that, you'll need to either increase the page size using the maxResults parameter, or iterate the next page with another request.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var blogId = '2399953';
var apiKey = '(Your API key)';
var params = '&maxResults=50'
$.ajax({
  url: ('https://www.googleapis.com/blogger/v3/blogs/$BLOG_ID$/posts?key=$API_KEY$' + params)
    .replace('$BLOG_ID$', blogId)
    .replace('$API_KEY$', apiKey),
  success: function(data) {
    console.log(data);
  },
  dataType: 'JSON'
});
Increase the maxResults parameter for more posts - the max is 500

Fetching the next page

To fetch the next page, just append the token from the previous results object as the pageToken parameter.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
window.bloggerApiExample = {};
var blogId = '2399953';
var apiKey = '(Your API key)';
var params = '&maxResults=20';
if (window.bloggerApiExample.nextPage) {
  params += '&pageToken=' + window.bloggerApiExample.nextPage;
}
$.ajax({
  url: ('https://www.googleapis.com/blogger/v3/blogs/$BLOG_ID$/posts?key=$API_KEY$' + params)
    .replace('$BLOG_ID$', blogId)
    .replace('$API_KEY$', apiKey),
  success: function(data) {
    console.log(data);
    window.bloggerApiExample.nextPage = data.nextPageToken;
  },
  dataType: 'JSON'
});


Store the key somewhere for the next request.


Happy API developing!

Comments

Popular posts from this blog

Filter out certain labels from my Blog Homepage

Change the landing page of my blog

Get Facebook to show feature image for your Blog's Homepage