--> Retrieve Content Excerpt From Blogger JSON Feed API | Experience Lab - Online business creation and development guide for bloggers and startups

Retrieve Content Excerpt From Blogger JSON Feed API

We have received some great feedback from all of you since the day we started this step-by-step tutorial series on extracting data from Blog...

Extract excerpt via jsonWe have received some great feedback from all of you since the day we started this step-by-step tutorial series on extracting data from Blogger JSON Data API. So far we have discussed the basics of extracting data from a JSON file and we succeeded in developing a recent Posts widget sorted by Label. Today we will learn how to extract excerpt of your Posts. You will be able to extract the first few characters from the starting paragraph of your blog posts that are located above the "Jump break" or you can also extract all the post content and print it. We normally retrieve Content summary and display first few lines inside the recent posts widget to give an idea of what the post is all about. It is sort of a brief description of the article itself. You might have seen the description snippet appearing below recent posts in Wordpress blogs and today you will learn how to code your blogspot widget to display Post summary of your recent articles published on your blog. Lets get to work, same code but with slight modifications!

Note: Click the Button below to see full list of topics under discussion.

Topics List

Where is the Content Data Stored?

As we discussed in our last tutorial, you first need to change your site feed settings to allow feed in "Full" length or you can also choose "Until Jump break", only then you can you proceed.

site feed settings

Your post content is stored as HTML inside the following path:
Which means we will first search through [ ] entry array and then extract the post html data from the { } content object where the content is stored inside the node $t as shown below:
content node
Click the content node and you will see that the $t stores your entire post as its value.
post content stored here

Displaying Recent Posts by Label in Blogger

We will use the exact same code that we shared in Part#6 , the only addition that we made this have been highlighted as Green.

<!-- ######### Writing Callback Function ############# -->
<script type="text/javascript">
var ListBlogLink = window.location.hostname;
var ListCount = 5;
var TitleCount = 70;
var ListLabel =" ";
var ChrCount = 80;

//----------------------------Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)

//-----------------------------Variables Declared
var listing= ListUrl = ListTitle = ListConten = ListContent = "";
//----------------------------- Title URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//----------------------------------- Title Stirng
if (json.feed.entry[i].title!= null)
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);

//----------------------------------- Content Check

ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substr(0, ChrCount);

//----------------------------------- Printing List
var listing = "<li><a class='mbttitle' href="
" ...  <a href="
" class='imore'>»</a></span>
<!-- ######### Invoking the Callback Function ############# -->
ListBlogLink = "http://www.mybloggertricks.com";
ListCount = 5;
TitleCount = 70;
ListLabel = "Social Media";
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
<!-- ######### Styles for Look ############# -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
.mbtlist {list-style-type:none;overflow:hidden}
.mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:Helvetica; font-size:12px; border-bottom:1px dotted #ddd;}
.mbtlist .mbttitle {font-family:oswald; font-size:16px; color:#0080ff; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover {color:#00A5FF;}
font-family:georgia; font-size:15px; font-weight:bold}
.mbtlist div span{margin:0 10px 0 0; display:inline-block;}
.mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}


  • As you can see above we introduced a new variable ChrCount and then set its default value to 80 to show only the first 80 characters of your post excerpt/summary.
  • We then introduced two new variables (ListConten  ListContent ) inside the loop and set their values to empty.
  • ListConten  will store the Post content which will also contain the thumbnail images + links. Since we just want the text and no images or links therefore we created another variable ListContent
  •  ListContent will replace/remove all images and links from the post content and will give us a Plain text. This is done using the replace() method.
  • To make sure we display only selected number of characters, we used the substr( ) method to display only the first ChrCount characters.
  • We then add the code for printing the results inside the <span>" tags.
  • Finally added some styles to make it's appearance look better


You have now created a recent posts width that displays Titles with Post Summaries or Post excerpts.

recent posts with post summaries


Have Questions?

Confused with any part still un-cleared just post your comments. In my next tutorial I will share how to display thumbnails next to each title. We will also learn how to display YouTube thumbnails and other third party thumbnail images inside this widget. A lot is on its way so stay tuned for all the updates!
Can you answer why we used substr() and not substring() method here? :)
Peace and blessings buddies! :>



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Retrieve Content Excerpt From Blogger JSON Feed API
Retrieve Content Excerpt From Blogger JSON Feed API
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy