Blogger Trick - Using JSON APIs With Blogger to Include a Recent Posts Widget With Your Template

My spouse became designing a blogger template, and he or she wanted to consist of a segment for current posts. There are plenty of Google widget code sections available for download on the Internet that allow a Blogger person to add a Recent Posts phase to a blog. However, the Blogger template’s topic required the function to be protected as an indispensable part of the template in preference to being optional. I’ll show you how we executed the task.

Blogger automatically generates an XML information feed for your weblog. The feed allows people to enroll in your weblog so they’ll receive notices while you post new posts. This automatically generated information feed is placed at myblogname.Blogspot.Com/feeds/posts/default. For your precise weblog, replacement your real Blogger sub-area in the location of my blog name. If you enter your BlogSpot URL observed using/feeds/posts/default right into a browser, you’ll see the feed in your weblog on your browser window.

Accessing the feed

Accessing your blog’s feed is achieved by using a generation known as JSON (JavaScript Object Notation) through a callback. I’ll explain what I mean through that. You need to do two matters: 1) create a JavaScript function to system the feed data; 2)Access the feed facts and initiate the callback process using a few question parameters. Here is the technical info.

Inside the blogger template, I placed a bit of JavaScript code (which I borrowed from one of the widely to be had widgets I mentioned earlier) within the segment of my spouse’s template the usage of the Blogger template editor, that is accessed from a Blogger account with the aid of going to Layout -> Edit HTML. The script essentially accesses the feed through the json parameter, parses out the blog titles for the closing numposts (this variable is special inside the callback mechanism explained later) weblog entries, and writes them out to the internet record (as hyperlinks to to real blog posts) at the factor from which the feature is known as. Here’s the characteristic:

In order to have the above code done, we need to insert some JavaScript code on the factor in the blog template wherein we want to have the Recent Posts inserted. The code will want to inform the Blogger device to run our JavaScript showrecentposts code when it is known as. Here’s the JavaScript block of code to accomplish that.
<script numposts=”5;var” showpostdate=”false;var” showpostsummary=”false;var” numchars=”30;var” standardstyling=”false;</script”>
<script src=’/feeds/posts/default?Orderby=published&alt=json-in-script&callback=showrecentposts’/>
</script>

This block of code first units some JavaScript variables so that they may be available while our showrecentposts feature is later referred to as. You’ll observe that numposts is amongst those variables indexed. Numposts determines what number of recent posts will be displayed.
The script block following the variables tells Blogger to get right of entry to the information feed for the current blog (/feeds/posts/default), order the feed entries via the date they had been posted (order by-published), set up a JSON callback (alt=json-in-script), and make contact with our feature to system the feeds (callback=showrecentposts). The crucial question parameters to word inside the procedure of using a JSON callback are 1) alt=json-in-script, which tells Blogger we want to get entry to the feed with a JavaScript feature; and a pair of) callback=showrecentposts, which tells Blogger to name our show recent posts function. It’s important to word that the call we use within the query parameter should shape the name of our feature.

To summarize, we had been capable of integrating a Recent Posts widget as part of a Blogger template by using the mechanically generated Blogger feed and the JSON callback capability to run a JavaScript feature. I wish you located at the least some a part of this rationalization useful.