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

3 Mins read

My spouse was 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 topic for the Blogger template 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 a 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 wide 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 real blog posts) at the factor from which the feature is known as. Here’s the characteristic:

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 show recent posts code when it is known as. Here’s the JavaScript block of code to accomplish that. This block of code first units some JavaScript variables to be available while our show recent posts feature is later referred to as. You’ll observe that mum posts are 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 ought to shape our feature’s name.


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 part of this rationalization useful.

860 posts

About author
Travel maven. Twitter trailblazer. Explorer. Thinker. Certified problem solver. Tv buff. Subtly charming entrepreneur. Avid alcohol fan. Food enthusiast. Managed a small team training race cars with no outside help. Garnered an industry award while donating sheep with no outside help. Spent several years supervising the production of fatback in Orlando, FL. Gifted in deploying wool in Suffolk, NY. Spent childhood managing shaving cream in Ocean City, NJ. Won several awards for buying and selling soap scum in Libya.
    Related posts

    HTML Templates for a Professional Blogger Website

    4 Mins read
    With HTML5 and CSS3, you can create a unique style in a few minutes, and even if you don’t have technical skills,…

    Create a Free Blog With a Blogger Template

    4 Mins read
    If you want to start a blog, starting with a free blogger template is recommended. Many free blogger templates are available online,…

    Template for Design Document - What Is It and How to Create It

    7 Mins read
    Have you ever needed to create a design document that is comprehensive enough to cover your entire project? Well, you’ve come to…