Maybe sometimes we need a widget for certain features, but the widgets are not available. Blogger already provides an APIs to overcome this, so we can create our own widget by reading the blog feed using the JSON and JavaScript.
Here is the JSON feed API:
Object | Description | Example |
---|---|---|
json.feed.id.$t | Show blog ID | tag:blogger.com,1999:blog-12345 |
json.feed.updated.$t | Last update of a blog | 2013-07-08T18:21:57.051+07:00 |
json.feed.category[] | Categories / label array of a blog | |
json.feed.category[i].term | Show the i-th category | Blogger |
json.feed.title.$t | Show blog name | Danlogs |
json.feed.subtitle.$t | Show description of a blog | Dan's Weblog |
json.feed.author[] | Array of blog authors | Danang Probo Sayekti, Matt Cutts |
json.feed.author[i].name.$t | Show the i-th blog author name | Danang Pobo Sayekti |
json.feed.author[i].uri.$t | Show the i-th profile author uri | https://profiles.google.com/123456789 |
json.feed.openSearch$totalResults.$t | Show total posts | 777 |
json.feed.entry[] | Posts array of a blog | |
json.feed.entry[i].id.$t | Show the i-th post ID | tag:blogger.com,1999:blog-8508.post-12345678 |
json.feed.entry[i].title.$t | Show the i-th post title | Blogger JSON Feed API |
json.feed.entry[i].published.$t | Show time published of the i-th post | 2013-07-07T12:56:00.000+07:00 |
json.feed.entry[i].updated.$t | Show when the i-th post is updated | 2013-07-07T12:56:47.089+07:00 |
json.feed.entry[i].category[] | Show array of post categories | |
json.feed.entry[i].category[x].term | Show the x-th category of the i-th post | Blogger API |
json.feed.entry[i].summary.$t | Show post summary | Maybe sometimes we need a widget ... |
json.feed.entry[i].content.$t | Show post content | Maybe sometimes we need a widget for certain features, but the widgets are not available ... |
json.feed.entry[i].link[] | Links array of a post | |
json.feed.entry[i].link[x].href | Show the x-th link of the i-th post | http://www.danpros.com/2013/08/blogger-api.html |
json.feed.entry[i].author[] | Array of post authors | |
json.feed.entry[i].author[x].name.$t | Name of the x-th author on the i-th post | Danang Probo Sayekti |
json.feed.entry[i].author[x].uri.$t | Show uri author profile | https://profiles.google.com/123456789 |
json.feed.entry[i].author[x].gd$image.src | Image uri of the x-th author profile on the i-th post | //lh4.googleusercontent.com/photo.jpg |
json.feed.entry[i].media$thumbnail.url | Show image on the i-th post | http://3.bp.blogspot.com/danlogs.jpg |
json.feed.entry[i].thr$total.$t | Show total threaded comments | 7 |
Here is an example implementation of the above code:
Suppose I need 5 recent posts by a certain label, the label I want to display is "Blogger". I took the title and summary of the post.
<script type="text/javascript">
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postSummary = json.feed.entry[i].summary.$t;
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://www.danpros.com/feeds/posts/summary/-/Blogger?max-results=5&alt=json-in-script&callback=mycallback"></script>
Note: we need to understand that json.feed.entry[i].summary.$t only available if we grab the feed URL using http://www.danpros.com/feeds/posts/summary instead of using http://www.danpros.com/feeds/posts/default.
Now how can we create a widget without unsorted recent post by a certain label? This widget also only displays 90 characters in the summary. The following is the example:
<script type="text/javascript">
function mycallback(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postAuthor = json.feed.entry[i].author[0].name.$t;
var postSummary = json.feed.entry[i].summary.$t;
var entryShort = postSummary.substring(0, 90);
var entryEnd = entryShort.lastIndexOf(" ");
var postContent = entryShort.substring(0, entryEnd) + '...';
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://www.danpros.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>