Skip to content

Instantly share code, notes, and snippets.

@ravisiyer

ravisiyer/BlogInfoByUrl.html

Created April 1, 2024 14:16
Show Gist options
  • Save ravisiyer/9bc5279898f124acf061dbbc4a974bcd to your computer and use it in GitHub Desktop.
Save ravisiyer/9bc5279898f124acf061dbbc4a974bcd to your computer and use it in GitHub Desktop.
Download ZIP
Simple Samples/Tests for Blogger API Version 3 (v3.0) used from HTML & JavaScript
Raw
BloggerDocSample.html
<html>
<head>
<title>Blogger API Example</title>
</head>
<body>
<div id="content"></div>
<script>
function handleResponse(response) {
document.getElementById("content").innerHTML +=
"<h1>" + response.title + "</h1>" + response.content;
}
</script>
<!-- Below example works but reload/refresh has to be done twice for it to work again -->
<script src="https://www.googleapis.com/blogger/v3/blogs/3213900/posts/8398240586497962757?callback=handleResponse&key=YOUR-API-KEY"></script>
https://blogger-developers.googleblog.com/
</body>
</html>
Raw
BlogInfoByUrl.html
<html>
<head>
<title>Blogger API Example: Get blog info. by URL</title>
</head>
<body>
<div id="content"></div>
<script>
function handleResponse(response) {
console.log(response);
if (!response.kind || response.kind != "blogger#blog") {
console.log(
"Unexpected response. response.kind is not 'blogger#blog'"
);
return;
}
document.getElementById("content").innerHTML +=
"Test<br />" +
"Blog Id: " +
response.id +
"<br />" +
"Blog url: " +
response.url +
"<br />" +
"Blog selfLink: " +
response.selfLink +
"<br />" +
"Blog name: " +
response.name +
"<br />" +
"Blog posts.totalItems: " +
response.posts.totalItems +
"<br />" +
"Blog pages.totalItems: " +
response.pages.totalItems;
}
</script>
<!-- For below request https://developers.google.com/blogger/docs/3.0/reference/blogs/getByUrl -->
<script src="https://www.googleapis.com/blogger/v3/blogs/byurl?url=https://raviswdev.blogspot.com/&callback=handleResponse&key=YOUR-API-KEY"></script>
</body>
</html>
Raw
GetPostsList.html
<html>
<head>
<title>Blogger API Example: Get list of posts</title>
</head>
<body>
<div id="content"></div>
<script>
function handleResponse(response) {
console.log(response);
if (!response.kind || response.kind != "blogger#postList") {
console.log(
"Unexpected response. response.kind is not 'blogger#postList'"
);
return;
}
console.log(`response.items.length = ${response.items.length}`);
let contentHTML =
"Test ... " + `Number of posts returned = ${response.items.length}`;
for (i in response.items) {
contentHTML +=
"<h1>" +
response.items[i].title +
"</h1>" +
response.items[i].content +
"<hr />" +
"<hr />";
}
document.getElementById("content").innerHTML += contentHTML;
}
</script>
<!-- Strangely for below request, refresh of the page sometimes does not invoke callback!
If I am inspecting and viewing console log, this issue does not arise (callback is invoked every time).
I don't have the time now to investigate the issue -->
<!-- For below request: https://developers.google.com/blogger/docs/3.0/reference/posts/list -->
<!-- Blog id below is of raviswdev.blogspot.com retrieved by loading BlogInfoByUrl.html
Don't have time to programmatically test out doing both blogid retrieval and then list of posts
of that blog. But I am sure that will be quite straightforward to do. -->
<script src="https://www.googleapis.com/blogger/v3/blogs/5765625164803845699/posts?key=YOUR-API-KEY&callback=handleResponse"></script>
</body>
</html>
Raw
GetPostsList1post.html
<html>
<head>
<title>Blogger API Example: Get list of posts (1 post)</title>
</head>
<body>
<div id="content"></div>
<script>
function handleResponse(response) {
console.log(response);
if (!response.kind || response.kind != "blogger#postList") {
console.log(
"Unexpected response. response.kind is not 'blogger#postList'"
);
return;
}
if (response.items.length != 1) {
console.log("Unexpected response. response.items.length is not 1");
return;
}
document.getElementById("content").innerHTML +=
"Test" +
"<h1>" +
response.items[0].title +
"</h1>" +
response.items[0].content;
}
</script>
<!-- Strangely for below request, refresh of the page sometimes does not invoke callback!
If I am inspecting and viewing console log, this issue does not arise (callback is invoked every time).
I don't have the time now to investigate the issue -->
<!-- For below request: https://developers.google.com/blogger/docs/3.0/reference/posts/list -->
<script src="https://www.googleapis.com/blogger/v3/blogs/3213900/posts?maxResults=1&callback=handleResponse&key=YOUR-API-KEY"></script>
https://blogger-developers.googleblog.com/
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Samples/Tests for Blogger API Version 3 (v3.0)</title>
<style>
li {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<h1>Simple Samples/Tests for Blogger API Version 3 (v3.0)</h1>
<ol>
<li>
<a href="BloggerDocSample.html">Blogger API documentation sample</a>
Works but requires two reloads/refreshes to work again! Don't know why.
</li>
<li>
<a href="GetPostsList1post.html">Get list of posts (max-results=1)</a>
Works but requires two reloads/refreshes to work again! Don't know why.
</li>
<li>
<a href="BlogInfoByUrl.html">Get blog info. by URL</a>
</li>
<li>
<a href="GetPostsList.html"
>Get list of posts of raviswdev.blogspot.com using its blog Id
returned by above page</a
>
Works but requires two reloads/refreshes to work again! Don't know why.
</li>
</ol>
</body>
</html>
@ravisiyer
Copy link
Author

In above source code files, YOUR-API-KEY has to be replaced by your API key. Ref: [Blogger] Acquiring and using an API key

Other references for above source code:
Using Blogger RESTful API from HTML/JS file
Blogger REST API formats and examples

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment