Blogger Posts Lister Web App: Dynamically Generates List Of All Posts On Blogger Blogs Using Blogger API v3.0

Last updated on 4 Jul 2025

Quick Info


This Blogger Posts Lister web app lists all post titles of any public Blogger blog using its URL or ID, and a user specified Google API Key. It is an HTML, CSS and JavaScript web app.


Above screenshot pics show the app listing contents of this blog.
[On PC desktop/laptop, to open pic in larger resolution (if available), right-click on pic followed by open link (NOT image) in new tab/window. In new tab/window you may have to click on pic to zoom in.]

**Important:** The user specified API Key may be optionally remembered by storing it in user's browser local storage for convenience. The user is responsible for the key's security and usage quotas. The key needs access only to Blogger API and the key's 'Application restrictions' settings should permit access to blogs (websites) whose posts user wants to list. The details section covers why user has to specify API key.

To list all posts of a public Blogger blog, do the following:
  1. Specify the Blogger blog by its URL or ID
  2. Specify a valid Google API key for accessing that blog
  3. Click on 'Initialize API Client' button and wait for it to give a message that Google API client is ready.
  4. Now click on 'Get All Posts' button and wait for it to retrieve the data and list all post titles.
The 'Save as HTML' button helps to create a static list of posts which can be used as an independent HTML file or whose contents can be selectively copy-pasted to a Blogger page/post: Procedure to create blog page or post from static list of posts saved html file.

A query string parameter can be provided to the app for the blog URL or ID in this manner:
If the app has been set to remember a previously provided API key then in this case, on load, the app will attempt to connect to Google API and then get all posts of the specified blog.

Author: Ravi S. Iyer with assistance from Gemini

Known Issues
  1. [Update: Seems to be fixed now but I need to check over a longer period of time whether it reappears.] At times, the app gives an error message: "Google API client script not yet loaded. Please wait." Refreshing the app/site or opening the app/site on another browser tab usually fixes the problem.

Details

Why does user have to specify a Google API key?

I did not want to expose my Google API key by specifying that in the simple HTML and Javascript app. I also did not want to complicate the app by having a backend service only to hide my Google API key. Therefore I took the path of putting the resposibility on users of this app to provide a Google API key to the app and if they want the app can store the API key in local storage on their browser to prevent them from having to provide it every time they use the app.

From a security point of view, the app uses the Google API key when using Blogger API v3.0 and if the user chooses to have the app remember the key, saves and retrieves it to/from local storage. The app  code has been generated by Gemini. I have had a quick look at it and the code does not seem to use the API key for any other purpose than mentioned above. As the source code of the app is public, the user is free to examine the code himself/herself to ensure that the app uses the user specified API key only for the above purposes. The user can also clone the GitHub repo on his/her own PC and run the app on the PC.

The user can provide a Google API key that is restricted to use only Blogger API. The user can further restrict the blogs (websites) the API key should work with. Setting up API keys gives the procedure to create a Google API key.

If the user is uncomfortable providing even such a restricted Google API key to the app then it may be best for the user to not use this app. He/she is welcome to create a modified version of this app suitable for his/her needs.

To read more about the API key protection issue for apps, please visit my post: Protecting API keys used in browser front-end apps: Chat with Gemini.

Older version

From mid 2023, I was using some Javascript code in a blog page to list all posts in the associated blog. That code did not work properly over past few days for this raviswdev.blogspot.com blog. It was omitting listing some posts after the 13 Oct. 2024 post till 21 March 2024 post. Note that this code had seemed to be working well for this blog for over a year, IFIRC. But I had not done extensive testing and so perhaps there were some omissions which I had not noted. The main issue with that code was that it was using Blogger API v2.0 which was deprecated by Google in September 2024 though it continued to support some aspects of it but with possibly changed behaviour. The following post gives info on that implementation and details of the issue faced: Added Page Having Dynamically Generated List Of All Posts On My Blogger Blogs Using Shared Javascript code, https://ravisiyermisc.blogspot.com/2023/06/added-page-having-dynamically-generated.html. 

After figuring out the issue, while there was a possibility of fixing it in that code implementation itself, I considered upgrading that code to drop the deprecated API and use the current Blogger API v3.0. Gemini provided great support in that upgrade.

Later I considered a more generic version which I could use across all my Blogger blogs without having to do any specific modifications for each blog. Note that this previous implementation used a blog page in a particular blog to provide list all posts functionality for that blog.

Gemini was of great assistance in creating the more generic version which is covered in this post.

Comments

Post a Comment