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









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










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










Get nicer thumbnails for my Post snippets





















I recently received some feedback that my thumbnails are a bit nicer than the standard thumbnails offered by Blogger. This is because I use a custom snippet in my Blog widget, to produce bigger thumbnails, using the new resizeImage operator .   Note: This post leverages the techniques described in the article about  Responsive images for Google photos .      A note:   The resizing behaviour provided on Blogger requires that the image is hosted on a Google platform to work - provided that you add your images by uploading them in the editor, this technique should work.   Creating a responsive, resized Thumbnail   The resize operator takes 3 parameters - the URL of the image, the width to resize it to, and an optional ratio for a cropped version of the image.   <img expr:src=’resizeImage(data:post.firstImageUrl, 300)’ />   In my Blog widget, I've customized the HTML so that on feed views (homepage, search, etc), I display post snippets instead of the full post. As a part of thes...








Read more