Retrieve posts from Blogger with JQuery and Blogger API v3

Hello everyone,

Today I’m going to do a little javascript / Jquery tutorial to read the posts of his blog and post them on your site.

In my case it proved useful to add content to my personal site, while having a pleasant writing environment. (The one provided by blogger)

First, let’s look at how to access your posts.

For this, nothing more simple. Blogger provides a very well written API that allows you to quickly achieve what you need.

Blogger requires two pieces of information:

• Your API-KEY

• the id of your blog

The first is obtained relatively easily via the google site:

https://developers.google.com/blogger/docs/3.0/using#APIKey

Once on you can get your key via the “Get a Key” button. This is 15-20 characters.

You can then find the id of your blog simply via the interface of blogger, go to your blog and then find your blogid in the url.

It looks like: https://www.blogger.com/blogger.g?tab=wj&blogID=BLOG-ID#allposts

You are now ready to attack the blogger API.

It is relatively easy to use. I use the v3 personally and it works pretty well: https://developers.google.com/blogger/docs/3.0/using

In our case we want to get all the posts of my blog, to be done I use a method GET:

GET https://www.googleapis.com/blogger/v3/blogs/BLOG-ID/posts?key=API-KEY

This returns me a page with all the posts of my blog. It’s JSON.(https://www.blogger.com/blog/post/edit/125199060319741224/8111947832684914688#)

You’ll probably say something like : It’s all very well, but we have not programmed anything yet!

Calm, calm, we get there. So we have our result via a web page, so we will now treat the info from JQuery:

You remember your url to access your posts, well, put it in a variable:

var bid = "BLOG-ID"; var apik = "API-KEY"; var url = 'https://www.googleapis.com/blogger/v3/blogs/'+bid+'/posts?key='+apik;

You will notice that I concatenated the infos rather than putting everything in my string directly. It is still relatively cleaner if I have to change my key for example or if I have to rewrite it elsewhere.

We will now treat the content of my url, JQuery offers a getJSon method that suits me perfectly for this:

$.getJSON(url, function(data) { $(data.items).each(function(index){ console.log($(this).attr("title")); }); });

Wow, all this? And yes … Let’s take it piece by piece:

The first line calls JQuery ($) and more mainly the getJSON method, it takes as parameter my url and returns a function with the data (my set of posts).

I will then simply make a loop in JQuery (thanks to each) on all items (posts) of my datas.

This iteration allows me to retrieve an index (it can be useful when you list your posts, to have a number next to your post).

I end up with a console.log that allows me to display in the logs of my console, all the titles of the different posts that I recovered.

I will then simply make a list ul li type.

to do this, I define a list through ul.

<ul id="my_list">  
</ul>  

I added an id to find it easily.

All the maneuver now is going to be filling my list with my posts titles. I’m going to add li elements via the append method of Jquery.

I have to do that on my list. I can recover my list by selecting it via this:

$("#my_list").

I select the html element with the id (#) my_list. Easy as pie!

So I will replace my console.log with the call of my append function:

$("#posts").append("<li>$(this).attr(\"title\")</li>";

Append allows to add at the end of my list a li element that I created from $ (this) which is an element of my iteration on my posts. I get the title attribute and have it inside my li tag.

And now, we have a result that allows to list the titles of my blogger posts with Jquery.

Hope this article was uselful to you! See you