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:

<script type=”text/javascript”>
<br>function showrecentposts(json) []).Push();
</script></div><p>for (var i = 0; i < numposts; i++) </p><p>var entry = json.Feed.Entry[i];</p><p>var posttitle = access.Identify.$t;</p><p>var posturl;</p><p>if (i == json.Feed.Access.Duration) damage;</p><p>for (var k = 0; ok < entry.Hyperlink.Period; okay++) </p><p>if (access.Link[k].Rel == ‘exchange’) </p><p>posturl = access.Link[k].Href;</p><p>damage;</p><p></p><p></p><p>posttitle = posttitle.Link(posturl);</p><p>var readmorelink = “(extra)”;</p><p>readmorelink = readmorelink.Hyperlink(posturl);</p><p>var postdate = access.Published.$t;</p><p>var cdyear = postdate.Substring(zero,4);</p><p>var cdmonth = postdate.Substring(five,7);</p><p>var cdday = postdate.Substring(8,10);</p><p>var monthnames = new Array();</p><p>monthnames[1] = “Jan”;</p><p>monthnames[2] = “Feb”;</p><p>monthnames[3] = “Mar”;</p><p>monthnames[4] = “Apr”;</p><p>monthnames[5] = “May”;</p><p>monthnames[6] = “Jun”;</p><p>monthnames[7] = “Jul”;</p><p>monthnames[8] = “Aug”;</p><p>monthnames[9] = “Sep”;</p><p>monthnames[10] = “Oct”;</p><p>monthnames[11] = “Nov”;</p><p>monthnames[12] = “Dec”;</p><p>if (“content” in access) </p><p>var postcontent = entry.Content.$t;</p><p>else</p><p>if (“precis” in access) </p><p>var postcontent = access.Precis.$t;</p><p>else var postcontent = “”;</p><p>var re = /<S[^>]*>/g;</p><p>postcontent = postcontent.Replace(re, “”);</p><p>if (!Standardstyling) report.Write(‘<div class=”bbrecpost”>’);</p><p>if (standardstyling) record.Write(‘<br/>’);</p><p>report.Write(posttitle);</p><p>if (showpostdate == actual) record.Write(‘ – ‘ + monthnames[parseInt(cdmonth,10)] + ‘ ‘ + cdday);</p><p>if (!Standardstyling) file.Write(‘<div class=”bbrecpostsum””>’);</p><p>if (showpostsummary == authentic) </p><p>if (standardstyling) report.Write(‘<br/>’);</p><p>if (postcontent.Length < numchars) </p><p>if (standardstyling) file.Write(‘<i>’);</p><p>file.Write(postcontent);</p><p>if (standardstyling) file.Write(”);</p><p>else </p><p>if (standardstyling) file.Write(‘<i>’);</p><p>postcontent = postcontent.Substring(zero, numchars);</p><p>var quoteEnd = postcontent.LastIndexOf(” “);</p><p>postcontent = postcontent.Substring(0,quoteEnd);</p><p>report.Write(postcontent + ‘…’ + readmorelink);</p><p>if (standardstyling) document.Write(”);
<br></p><p>if (!Standardstyling) file.Write(”);</p><p>if (standardstyling) document.Write(”);
<br>if (!Standardstyling) report.Write(”);
<br>if (standardstyling) file.Write(”);
<br>if (!Standardstyling) file.Write(”);</p><p>

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;&lt;/script”>
<script src=’/feeds/posts/default?Orderby=published&alt=json-in-script&callback=showrecentposts’/>

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.

Jeffery D. Silvers
Love and share my articles, I will be happy to react on it ! Spent 2002-2009 promoting weed whackers in Edison, NJ. Earned praise for importing junk food for fun and profit. Spent 2001-2006 exporting teddy bears in Atlantic City, NJ. Had some great experience investing in tattoos in Fort Walton Beach, FL. Spent 2002-2007 selling action figures in the aftermarket. Enthusiastic about working on basketballs on the black market.