Blogger JSON Feed API

Maybe sometimes we need a widget for certain features, but the widgets are not available. Blogger already provides an APIs to overcome this, so we can create our own widget by reading the blog feed using the JSON and JavaScript.

Here is the JSON feed API:

Object Description Example
json.feed.id.$t Show blog ID tag:blogger.com,1999:blog-12345
json.feed.updated.$t Last update of a blog 2013-07-08T18:21:57.051+07:00
json.feed.category[] Categories / label array of a blog
json.feed.category[i].term Show the i-th category Blogger
json.feed.title.$t Show blog name Danlogs
json.feed.subtitle.$t Show description of a blog Dan's Weblog
json.feed.author[] Array of blog authors Danang Probo Sayekti, Matt Cutts
json.feed.author[i].name.$t Show the i-th blog author name Danang Pobo Sayekti
json.feed.author[i].uri.$t Show the i-th profile author uri https://profiles.google.com/123456789
json.feed.openSearch$totalResults.$t Show total posts 777
json.feed.entry[] Posts array of a blog
json.feed.entry[i].id.$t Show the i-th post ID tag:blogger.com,1999:blog-8508.post-12345678
json.feed.entry[i].title.$t Show the i-th post title Blogger JSON Feed API
json.feed.entry[i].published.$t Show time published of the i-th post 2013-07-07T12:56:00.000+07:00
json.feed.entry[i].updated.$t Show when the i-th post is updated 2013-07-07T12:56:47.089+07:00
json.feed.entry[i].category[] Show array of post categories
json.feed.entry[i].category[x].term Show the x-th category of the i-th post Blogger API
json.feed.entry[i].summary.$t Show post summary Maybe sometimes we need a widget ...
json.feed.entry[i].content.$t Show post content Maybe sometimes we need a widget for certain features, but the widgets are not available ...
json.feed.entry[i].link[] Links array of a post
json.feed.entry[i].link[x].href Show the x-th link of the i-th post http://www.danpros.com/2013/08/blogger-api.html
json.feed.entry[i].author[] Array of post authors
json.feed.entry[i].author[x].name.$t Name of the x-th author on the i-th post Danang Probo Sayekti
json.feed.entry[i].author[x].uri.$t Show uri author profile https://profiles.google.com/123456789
json.feed.entry[i].author[x].gd$image.src Image uri of the x-th author profile on the i-th post //lh4.googleusercontent.com/photo.jpg
json.feed.entry[i].media$thumbnail.url Show image on the i-th post http://3.bp.blogspot.com/danlogs.jpg
json.feed.entry[i].thr$total.$t Show total threaded comments 7

Here is an example implementation of the above code:

Suppose I need 5 recent posts by a certain label, the label I want to display is "Blogger". I took the title and summary of the post.

<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="http://www.danpros.com/feeds/posts/summary/-/Blogger?max-results=5&alt=json-in-script&callback=mycallback"></script>

Note: we need to understand that json.feed.entry[i].summary.$t only available if we grab the feed URL using http://www.danpros.com/feeds/posts/summary instead of using http://www.danpros.com/feeds/posts/default.

Now how can we create a widget without unsorted recent post by a certain label? This widget also only displays 90 characters in the summary. The following is the example:

<script type="text/javascript">
  function mycallback(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
      for (var j = 0; j < json.feed.entry[i].link.length; j++) {
        if (json.feed.entry[i].link[j].rel == 'alternate') {
          var postUrl = json.feed.entry[i].link[j].href;
          break;
        }
      }
      var postTitle = json.feed.entry[i].title.$t;
      var postAuthor = json.feed.entry[i].author[0].name.$t;
      var postSummary = json.feed.entry[i].summary.$t;
      var entryShort = postSummary.substring(0, 90);
      var entryEnd = entryShort.lastIndexOf(" ");
      var postContent = entryShort.substring(0, entryEnd) + '...';
      var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
      document.write(item);
    }
  }
</script>
<script src="http://www.danpros.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>

Setting up robots.txt on Blogger

Blogger now allows custom robots.txt, this is very useful because we can set the visibility of our articles on search engines, we can determine whether the article will be indexed by search engines or not.

By default, every blog that uses the Blogger platform will have a robots.txt as follows:

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: http://www.example.com/feeds/posts/default?orderby=updated

And has the following explanations:

Mediapartners-Google is a robot from Google Adsense, leave it as is because if you mistakenly change that than the ads served will not fit with your content.

The next line is for all the robots and marked with an asterisk (*). On the default configuration, it is clear that the label of our blog is not indexed Disallow: /search.

Keep in mind that a slash (/) is as your homepage, so for example if you want the label to get indexed, do not just fill up with a slash like this Disallow: / because that would be you do not allow the robot tracing your blog, but it should like the example below:

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow:
Allow: /

Sitemap: http://www.example.com/feeds/posts/default?orderby=updated

With the configuration as above then all of the articles and the label will be indexed. And to block a robot for particular page (I take the example of my FAQ page) you can simply write as follows:

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /p/faq.html
Allow: /

Sitemap: http://www.example.com/feeds/posts/default?orderby=updated

Update: To resolve the pagination problems on blogspot after we remove the Disallow: /search than we can use the following configuration to block the pagination page:

User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search?updated-min=
Disallow: /search?updated-max=
Disallow: /search/label/*?updated-min=
Disallow: /search/label/*?updated-max=
Allow: /

Sitemap: http://www.example.com/feeds/posts/default?orderby=updated

After the changes, make sure everything is fit like what we want by visiting www.example.com/robots.txt. Replace the Example.com with your domain name.

Warning! Use with caution. Incorrect use of these features can result in your blog being ignored by search engines.

Note: Last updated on January 5, 2013.

Blogger new features: Search preferences

Starting today Blogger added some new features, the "Search preferences" that aims to maximize our blogs in search engines. If you care about the ranking of your blog, then this new feature is very exciting news.

Here are the new features are:

Maybe you realize that there is new option in the settings tab, the "Search preferences".

By clicking on it will bring up the three categories, the Meta tags, Errors and redirections, Crawlers and indexing.

For Meta tags category is serve to add a description tags on our blog, by enabling the Meta tags option then everytime we make new article will appear a new option called "Search Description" that allows us to add meta description to any post.

The next category is Errors and redirections, with this feature you can set the message that appears when visitors visit a page that is no longer exists on our blog, the "Page Not Found 404" error, and more helpful is that now we can redirect visitors to a particular page as we wish.

The last feature is Crawlers and indexing, here we can create our own robots.txt and header tags for our blog. It seems that now we can set the label of our blog to got indexed in the search result.

And there is one additional feature on the link tool, where there is a new option, the ability to add rel = "nofollow" on every link.

Blogger is now becoming increasingly intense. Lots of improvements, and all these new features become my favorite.

Blogger Dynamic Views and SEO

Previously I was a little worried when switching my blog theme to Blogger Dynamic Views theme, it’s because I read many articles if the Dynamic Views theme is not SEO friendly. But I decided to install it regardless of people’s opinions.

After trying it for over a week, I did not find any bad effects on traffic, even an increase in visitors and page views, indicating that changing the theme from regular theme to Dynamic Views theme is the perfect choice.

Update: Blogger finally adding Search preferences feature for SEO purposes.