Retrieving Blogger's Recent Post Using JavaScript On Non-Blogger Site


Hey folks, Welcoming you all after a long time. Was unable to write blog for long time. Anyways, I'm back with a great content to read. Today, I'll be writing on getting posts for a non blogger site from a Blogger's Blog using Blogger's V3 API.

What we need?

  • A blog to retrieve posts from
  • A website to show the blogs on
  • API KEY from the Google's Developer's Console
  • Blogger's Blog ID.
  • JS and CSS Skill.
I believe my reader have got some skill on JS and CSS. Also, Most of them may have created a blog and a website prior to think about integrating both of this technology. And You can get API KEY from Google's Developer's Console. You need to create a project and a credentials to get one. Also, Open your blogger's dashboard where you can find your BlogID from the Query-'BlogID' of the URL in your address bar. Now, We are ready to go.

We will be using Google's Blogger's API V3 in-order to complete this task.I'll be focusing on getting the list of the posts of a blog.

The end point that I'm using here to retrieve the posts in JSON format is:

Retrieving the JSON from the Blog using API

We will be using AJAX to complete the task. The code to retrieve the JSON is shown below.
var xhttp = new XMLHttpRequest();"GET", "", false);

The returned JSON consist of three kyes, 'kind', 'nextPageToken', 'items'. Items is an array that contains many posts. The keys in this details are 'kind', 'id', 'blog', 'title', 'content' and others.

Parsing the JSON

let json = JSON.parse(xhttp.responseText);

let list = json['items'];
for(let x in list)

Here, It converts the response into JSON Object. And, we traverse each items (post) in the item key to get the values of post. For, now we are logging it in the console. Also, we can access title, content, kind, id, published(date), updated(date), url, author, replies, comments, and labels.

You can access different keys using the following codes with respective index.

It retrieves 10 post at a time. So, In order to get more than 10 records we have to use pagination. The url endpoint with additional query  pageToken=nextPageToken will retrieves the next page values. If there are no posts left it won't return the nextPageToken. 

In, this way we can retrieve the post list from the blogger using blogger's API.

Here, Is a JS function that does the task for you. It retrieves the post parses it and generate HTML from it.
// document.body.innerHTML = f();
rec = document.getElementsByClassName('blog-container').item(0);
rec.innerHTML = f() + rec.innerHTML;
function f(from = 50, tot = 3, randomize = true) {
// This method may result duplicate content upon randomization, have no time to solve it
let url = '';
let ls = [];
let a = 1;
let token = '';
let html = '';
if(!randomize) from = tot; // If randomize is off we just need to extract the top only..
// while (true)
while (a < from)
let p = f2(token);
let list = p['items'];
for(let x in list){
token = p['nextPageToken'];
break; // Break if total post is less than we want here to select from
let len = ls.length;
if(len < tot) tot = len; // Prevent array index out of bound(if it was Array), Prevents Not Found Exception
for(let i = 0; i < tot; i++ )
html += f1(ls[(randomize) ? parseInt(getRandomArbitrary(0, len)) : i]); // Randomize if its true else return i
return html;
function f2(token = '') {
let xhttp = new XMLHttpRequest();"GET", url + (token !== '' ? '&pageToken=' + token : '') , false);
return JSON.parse(xhttp.responseText);
function f1(item) {
if(item.hasOwnProperty('kind') && item['kind'] !== "blogger#post") return '';
let h = '<div class = "post-item">';
let doc = new DOMParser().parseFromString(item['content'], 'text/html');
let src = doc.body.getElementsByTagName('img').item(0);
// console.log(item);
h += '<a href = "' + item['url'] + '"> <div class="bg-img" style=\'background-image: url("' + src.getAttribute('src')+ '");\'></div>';
h += '<h6>' + item["title"] + '</h6>';
h += '<span >' + doc.body.innerText.substr(1, 100) + '</span>';
// h.getAttribute('a');
// console.log(doc);
return h + '</a></div>';
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;

Here, This function accepts three paramaters, from, top and randomize.
from: Sample no. of post to take from
to: Actual no. of post to retreive
randomize: do we need random data or not

If you have any question please write down in the comment section below.

Note: This function may return duplicate post upon randomization. Also, we have at least one image on each post so it retrieves the image link as thumbnail. Please make sure you have at least one image on each post. And, you can customize the HTML layout it returns.
Likewise you can use it to retrieve, post, comments, labels for any blog hosted using Googles's Blogger's Platform.


  1. Guys now its great news that notepad++ mac support almostly all languages

  2. Thank you for helping me through this article. it's amazing and very helpful. Also read some interesting facts about valentines day. you will love it.

  3. Very interesting and it caught my attention. I do want a website that is easy to manage. Bookmarking your article which will probably be my guide. Thank you very much.
    by Cloudi5
    Web Design Company in Coimbatore

  4. I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. social media marketing

  5. this is really nice to read..informative post is very good to read..thanks a lot! Xham

  6. Beaver says I also have such interest, you can read my profile here: email extractor 1.7

  7. Welcome to the party of my life here you will learn everything about me. email extractor 1.4 lite

  8. Thirdly, you can add increase cameras in the relatively near future. Security Cameras