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











Post a Comment



















Popular posts from this blog









Remove the header image for posts in Emporio





















The new Emporio template features a large, blurred-out copy of the featured image for a post as the header image. Some like this feature, some don't - here's how to remove it if you're not a fan!   Head to Theme => Edit HTML  Search for ' data:view.isSingleItem '  The code that you see should look something like this:  <b:if cond='data:view.isSingleItem'>   <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>     <b:include            data='{                     image: data:widgets.Blog.first.posts.first.featuredImage,                     selector: &quot;.bg-photo&quot;                  }'            name='responsiveImageStyle'/>     <div class='bg-photo-container'>       <div class='bg-photo'/>     </div>   </b:if> </b:if>   Delete the XML including the <b:if> tag code.        Happy Emporio'ing!  








Read more










Rotate my Blogger images




















Image







Blogger-uploaded images can be rotated by modifying the url to include '-r90' (or 180, or 270).   Take, for example, the image below.      URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWVgBklYsvkxN7xwRlHuU8XWHdJTW7kpjJcEzMo2lD65tV4vwXuwHnPa3eiXZqUfpkdAYJMaTaPXO9RiEl1XY_tEfHWBEmBmnppNqP6_SovKyOe8gLd9-09TimKKdDZpIuMrjiPvg5hrOI/ s200 /IMG_2358.JPG   If we switch the s200  to s200-r90 , we get the following image instead.          URL: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVtM8EBB40qw43B0tA7X6wiErlfRxG3YDKqPPKluXQzFSghY5bjSw312509fa6BHCQjcUDevY4L194LL7n5lImmia7zBVfYohxezEJq1bdxRx_CCOyL06w0rQS9Rb2RkjpLVpIx3PjnGy/ s200-r90 /IMG_2358.JPG    Happy rotating!








Read more










Add snippets to the Emporio theme




















Image







A lot of people love the image-focused look of the newer Emporio template. This article explains how to tweak your template's XML to add a short snippet to the Emporio posts - unfortunately, there's no easy way to add in snippets for Emporio, without customizing the markup. But, if you're feeling brave, head to:   Theme -> Edit HTML -> Jump to Widget -> Blog 1   If you search for 'snippet-container', you'll come across:   <div class='snippet-container r-snippet-container'>   <div class='r-snippetized'>     <data:post.title />   </div>   <b:if cond='data:post.title != ""'>     <div class='snippet-fade r-snippet-fade hidden'></div>   </b:if> </div>   Notice that it's just got the title. You could change it to add something like:   <div class='snippet-container r-snippet-container'>   <div class='r-snippetized'>     <data:post.








Read more