Get Blogger feeds using javascript

Google Blogger is the famous blogging service used by a lot of people in the world. Is a good service but is quite basic and is not possible to customize so much by default. However some new features can be "added" by using some javascript code. In this tutorial will explain how to "extract" blog feeds through javascript showing an example of possible use.

Blogger feeds are basically a json structure containing a lot of information regarding each single blog post. Please, note a very important point, for allow the javascript code to work correctly the blog need to have the following conditions:

  - The blog must to be set as public (since private blog doesn't export feeds data)
  - The feeds must be enabled in blog settings panel

Once verified these conditions we can proceed with explanations. Basically the way to get blogger feed is to format url address in this mode:

http://myblogname.blogspot.com/feeds/posts/default?alt=rss

This will return an XML file in RSS format containing feeds data. Changing the url params a follow will show the same data but in json string format:

http://myblogname.blogspot.com/feeds/posts/default?alt=json

As you can see making some test the string returned is very long. This because the data returned contains a lot of information about each post published in the blog. If you want to know the json structure you can use the various web site able to convert the string to the tree structure  like, for example, this one. Our final goal, however, is to get and elaborate these data using javascript language. For this reason we need to change the the blog url as follow:

http://myblogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=MyJavascriptFunc

This particular format will instruct Blogger platform to call the javascript function MyJavascriptFunc passing as single param the feeds structure to elaborate. In our example, however, will introduce two additional params as follow:

http://myblogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=MyJavascriptFunc&max-results=1000&start-index=1

The params max-results and start-index, as you can know, instruct Blogger platform to return a maximum number of feeds of 1000 (in this url example) starting from the first feed available ordered by the last published. In the various examples on the same topic you can find around quite all set the max result value to some number like 999999999 for have all the feeds returned in one call. However, googling around, it seem there is the suspect Google set a max limit of feeds is possible to get in a single call. As usual this "official" limit is undocumented than, just for avoid problems, in this example I'll choose to extract the feeds with steps of 1000, you can increase this value if you want. Follow the full source of the javascript code:

<script type="text/javascript"> 

var StartIndex = 1;
var MaxResults = 1000;

function MyJavascriptFunc(BlogData)
{
   var Feed, i;

   for(Feed = BlogData.feed, i = 0; i < Feed.entry.length; i++)
   {
      var PostUrl, ImgUrl, Entry, Content, Title, x;

      Entry = Feed.entry[i];
      Content = Feed.entry[i].content.$t;
      Title = Feed.entry[i].title.$t;
      ImgUrl = PostUrl = '';

      if(typeof Feed.entry[i].media$thumbnail !== 'undefined')
      {
         ImgUrl = Feed.entry[i].media$thumbnail.url;
      }

      for(x = 0; x < Entry.link.length; x++)
      {
         if(Entry.link[x].rel == 'alternate')
         {
            PostUrl = Entry.link[x].href;
            break;
         }
      }

      // Here you have all basic post data, use as you like
      // .... 
   }

   if(i < MaxResults)
   {
      // All the feeds has been extracted
   }
   else
   {
      var ScriptObj = document.createElement('script');

      var FeedsUrl = 'http://myblogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=MyJavascriptFunc&max-results=' + MaxResults + '&start-index='; 

      StartIndex = (StartIndex + MaxResults);

      ScriptObj.src = (FeedsUrl + StartIndex);
      document.body.appendChild(ScriptObj);
   }
}
 
function StartFeedsExtraction()
{
   var ScriptObj = document.createElement('script');
 
   var FeedsUrl = 'http://myblogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=MyJavascriptFunc&max-results=' + MaxResults + '&start-index=';

   ScriptObj.src = (FeedsUrl + StartIndex);
   document.body.appendChild(ScriptObj);
} 

</script>

<script type="text/javascript">
StartFeedsExtraction();
</script>

Now let's go to explain each single piece. At first we need the single javascript line calling the main extracting function StartFeedsExtraction(). You can put this code everywhere into the page with the only condition it have to be placed after the main function body:

<script type="text/javascript">
StartFeedsExtraction();
</script>

This call start the feeds extraction process. Basically it dynamically insert a call to a formatted url for get the blog feeds. Once process started correctly the MyJavascriptFunc() was automatically called with the requested feeds data range. The first for cycle extract the basic post info like content, title, post url and image url (if image present, usually is the first image of the post). If you need more data you have to examine the post tree structure as described above and read the additional info you want. The second condition if(i < MaxResults) check if all feeds has been extracted. Since we asked a maximum number of feeds of MaxResults (that is 1000 in our example) if the feeds number returned is not minor to this value it probably mean there are additional feeds available. In this case repeat the operation to dynamically ask for new feeds by increase the starting index for the next range. In case is minor it mean all the feeds has been extracted and the operation can be concluded. Please note same operation can be done by extracting feeds connected to some label only. This will require to change the url as follow:

http://myblogname.blogspot.com/feeds/posts/default/-/MyLabel/?alt=json-in-script&callback=MyJavascriptFunc

This will return the feeds of the post containing the MyLabel tag. This can be useful in case you want to separate the various sources. Since the amount of data returned is quite big you can reduce then by configuring Blogger platform to return feeds only for post data and ignore comments for example. Check the options available in blog settings panel.