Blogger or Blogspot, one of giant blogging platform owned by Google may be look simple from the outside. But on the inside, Blogger has many technique that allow use to extend our blog functionality and RSS manipulation technique is one of them. Our Blogger blog has many mode in the feeds from atom, RSS, to JSON.

Blogger blog guides and tutorials by Weblogwap

We can convert our Blogger blog RSS feeds into JSON format by adding alt=json-in-script parameter in the RSS address for JSON in Javascript format or alt=json for raw JSON format. What's the difference between the two? json-in-script is useful for included in script source to use the RSS in callback function: https://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunction. Where myFunction is the defined function in your script.

But I don't like to use json-in-script format as to use it we will need to use it in script source tag which will block the loading especially if we use it to create related posts. So I personally prefer to use raw JSON format alt=json with AJAX async mode. In this case, I'm using JQuery .getScript() because JQuery will wait to run its scripts until the blog has finished loading (and all JQuery AJAX method including .getScript() are async by default). So to turn our Blogger blog feeds to raw JSON format is by accessing: http://yourblog.blogspot.com/feeds/posts/default?alt=json.

We can customize the feeds call to show only posts for certain label or limit the number of posts fetched by adding extra parameters to the feeds address. Limiting the number posts fetched is especially an important thing to reduce the data and time needed load the feeds. You can see following pattern examples to modify the feeds call on your Blogger blog:

  • http://yourblog.blogspot.com/feeds/posts/default. Will fetch all of your latest blog posts.
  • http://yourblog.blogspot.com/feeds/posts/default/-/Label Name. Will only fetch latest posts published under Label Name label. Label name are case sensitive.
  • http://yourblog.blogspot.com/feeds/posts/default?max-results=10. Will fetch 10 first posts of all your blog posts.
  • http://yourblog.blogspot.com/feeds/posts/default/-/Label Name?max-results=10. Will fetch 10 latest posts published under Label Name label.

Note that the entry sorting in the feed is sorted ascended by published time by default.

The problem is when I was trying to use the feeds in raw JSON, it have some "undefined" object in it. The culprit behind this undefined objects is nothing but the JSON contains characters that not valid to used in JSON format like newline and control characters.

Luckily I was able to found the solution at stackoverflow forum. The workaround is to replace the invalid characters contained in the JSON before parse it to JSON format. Below is the workaround to fix undefined objects in Blogger blog raw JSON format feeds:


<script>
$(document).ready(function(){
// Get the feeds in raw JSON format
$.getScript('/feeds/posts/default?alt=json', function(data){

// Turn the data fetched into pure string
var dataClean = data.toString();

// Replace all invalid characters in JSON
dataClean = dataClean.replace(/\\n/g, "\\n").replace(/\\'/g, "\\'").replace(/\\"/g, '\\"').replace(/\\&/g, "\\&").replace(/\\r/g, "\\r").replace(/\\t/g, "\\t").replace(/\\b/g, "\\b").replace(/\\f/g, "\\f");
dataClean = dataClean.replace(/[\u0000-\u0019]+/g,"");

// Parse the cleaned string into JSON object format
var json = JSON.parse(dataClean);

// Work your code !
var firstTitle = json.feed.entry[0].title.$t;
});
});
</script>