If, like me, you have a blog which is hosted on the Google Blogger platform, you may have realised that there’s a lot of features missing, which you get on other platforms such as WordPress.
I specifically wanted to show a list of blog posts (no content, just the title) that have a specific label.
I wanted to have an index or list of links which a reader could click on and all the posts would be displayed that had that label/category.
Here is how I solved the problem. You can see the results on the left-hand menu:
<—– HERE ON THE LEFT HAND MENU AREA UNDER “POSTS BY LABEL”
In my blog site I have the following setup:
I have the usual main (home) page which I’ve configured to show just one blog post in the “Blog Posts Gadget”, plus I have a “Feed Gadget” for showing the latest blog posts. This gadget can only show posts ordered by date, and does not allow you to search by label.
On the left-hand side I have a “Link List” gadget which I have manually added links to a separate “Page”, which I created in the “Pages” area inside Blogger which contains just JavaScript:
The navigation works like so:
When a reader clicks on the links that I have manually setup in the Feed Gadget on the left-hand side, they are directed to the All-Blog-Posts.html page (the Page that I’ve created) which executes the JavaScript.
The JavaScript parses the query string (the text that follows the “?” in the URL) and determines the label.
The JavaScript uses the Google Blogger V3 API to retrieve the list of posts from my blog that match the label.
Apart from the need to create the “Page” (which I’ve called “All-Blog-Posts.html” and titled “All Posts”), you will also need to create an API key on the Google API platform, so that you can use the Google Blogger API to parse your blog posts.
You can try the Google Blogger API here: https://developers.google.com/blogger/docs/3.0/reference/posts/list
On the right-hand side of the API page, enter the following information:
BlogId – This is the number identifier of your blog and can be seen in your browser when you click on the “Posts” link in Blogger:
FetchBodies – False – we don’t want these.
FetchImages – False – we don’t want these.
Labels – This is a comma seperated list of the labels which are to be found in the posts (this is an ALL INCLUSIVE list and not and OR list) :
Show Standard Parameters – Click this to expand the list:
Fields – Enter “items(title,url)” to return only the URL and Title of matching blog post items:
Authentication – Select OAuth 2.0 and log in using your Google Account in order to test the API:
Click Execute:
The results will be displayed below the execute button in JSON format:
If you do not get a green “200” response, then you should check your entries again.
Before we can create a blog page that uses the API, we need to create an API Key.
Since it costs Google each time someone uses an API, they restrict the API usages with quotas which can be increased (if you want to pay). For use by the average blog site, the quotas should be sufficient.
You obtain an API key by clicking the “Get A Key” button located on the developers.google.com site here: https://developers.google.com/blogger/docs/3.0/using#auth
Create a new project and click Next:
You’ll get an API key straight away (make a note of it), but you should secure the key against your specific blog domain name, to prevent abuse by others.
To do this, click the “API Console” link just below your provided key (opr go to https://console.developers.google.com/apis/credentials and select your Key):
Select the option “HTTP referrers (websites)“, then add as many domain names as you need for your blog (where the API could potentially be called from):
Now you’re ready to create a new static page in your blog which will hold the required JavaScript to call the blogger API and display the blog posts matching the labels.
In your blogger admin site, create a new static page:
Click “New page“:
Give the page a title (e.g. All Posts by Label):
Paste in the JavaScript:
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<title>List All Posts</title>
<script src=”https://apis.google.com/js/api.js”></script>
<script type=”text/javascript”>
var myLabel = allposts_get_qs(“label”);
var myPage = allposts_get_qs(“page”);
document.write (‘<h3>For Label: ‘, myLabel, ‘</h3>’);
function escapeHtml(unsafe) {
return unsafe
.replace(/%2C/g, “,”)
.replace(/&/g, “&”)
.replace(/</g, “<“)
.replace(/>/g, “>”)
.replace(/”/g, “””)
.replace(/’/g, “‘”);
}
function allposts_get_qs(key) {
var myval=’NoValueSpecified’;
var regex = new RegExp(“[\?&]”+key+”=([^&#]*)”);
var qs = regex.exec(location.search);
if(qs != null) myval = qs[1];
return escapeHtml(myval);
}
function start() {
var apiKey=’YOUR API KEY‘;
gapi.client.init({‘apiKey’: apiKey,}).then(function() {
return gapi.client.request({‘path’: ‘https://www.googleapis.com/blogger/v3/blogs/byurl?url=’+location.origin+’&fields=id’,})
}).then(function(response) {
var theBlogID = JSON.parse(response.body).id;
gapi.client.init({‘apiKey’: apiKey,}).then(function() {
var nPage=”;
if (myPage != ‘NoValueSpecified’) { nPage=’&pageToken=’+myPage }
return gapi.client.request({
‘path’: ‘https://www.googleapis.com/blogger/v3/blogs/’+theBlogID+’/posts?labels=’+myLabel+nPage+’&fetchBodies=false&orderBy=updated&fields=nextPageToken%2Citems(title%2Curl)&prettyPrint=false&maxResults=99’,
})
}).then(function(response) {
var postJSON = JSON.parse(response.body);
var pageToken = postJSON.nextPageToken;
// Grab the container we will put the results into
var container = document.getElementById(“content”);
container.innerHTML = ”;
var html = ‘<ul>’;
var postCount=0;
if ( postJSON.items != null) {
postCount=postJSON.items.length;
for (var i = 0; i < postJSON.items.length; i++) {
var post = postJSON.items[i];
html += ‘<li><a href=”‘ + post.url + ‘” target=”_top”>’ + post.title + ‘</a></li>’;
}
}
html += ‘</ul><br/>’+postCount+’ matching posts displayed.’ ;
if (pageToken != null) {
html += ‘<br/><br/><a href=”‘ + location.origin + location.pathname + ‘?label=’+myLabel+’&page=’ + pageToken+ ‘”>Next Page >’;
}
container.innerHTML = html;
}, function(reason) { console.log(‘Error: ‘ + reason.result.error.message); });
}, function(reason) { console.log(‘Error: ‘ + reason.result.error.message); });
};
if ( allposts_get_qs() != null ) { gapi.load(‘client’, start) };
</script>
</head>
<body style=”border: 0 none; font-family: Arial;”>
<div id=”content” style=”width: 100%;”>Loading…</div>
</body>
</html>
You should replace: YOUR API KEY with your new API key you generated earlier.
Publish your new static page on your blog (you will not see it, but you can reference it):
Now it’s visible to the internet, you can test your new static page by opening it in your web browser.
From within the Blogger admin console, click “View” for the new page:
Change the URL in your browser to add the parameter for the label you want to filter by:
Example: https://yourblog.com/p/all-blog-posts.html < Adding “?label=abc”
Gives the following URL: https://yourblog.com/p/all-blog-posts.html?label=abc
You should see:
If you put a valid label (one that you have used) then you should see those blog posts listed.
NOTE: The label filter is case sensitive. This is an API feature. You will need to ensure that all your posts have the correct/same case for the filter to show them.
TIP: To add spaces in a label you need to URL Encode the label using “%20” instead of the space.
That’s it!
You can now decide how you wish to present the filter. E.g. in my case I’ve used the “Linked List” gadget and I manually add them. But you could do something else if you wish.
Enjoy.
