How to Add Comments to the Main Blog Page of Blogger

The new version of Blogger added many useful features, but it removed one nice capability that the old version had. It is no longer possible to display comments on the main blog page; these are only accessibly on an individual post page.

Luckily, it’s possible to use a little AJAX to scrape the individual post pages and display the comments on the main page. You could also use the RSS feed, but it doesn’t contain the links to the commenters’ profiles.

To do this you need to edit your HTML template. Click “Edit HTML” and make sure the box “Expand Widgets Template” is checked. Now, copy and paste everything into a text editor like Note Pad to make things easier.

The first step is the find the place where the template inserts the comments on the individual post page. It looks something like:

<b:if cond='data:blog.pageType == "item"'>
 <b:include data='post' name='comments'/>
</b:if>

Modify it like this:

<b:if cond='data:blog.pageType == "item"'>
 <span id='startcomments'></span>       
 <b:include data='post' name='comments'/>
 <span id='endcomments'></span>
<b:else/>
 <div expr:id='"comment"+data:post.id'>
 <!-- add something here to display if the AJAX fails -->
 </div>
 <script language='javascript' type='text/javascript'>
 showCommentsPost("<data:post.id/>","<data:post.url/>");
 </script>
</b:if>

This does several things. On the individual post page, it inserts tags to make it easy to find the comments. On the main page, it adds a div for the comments and a JavaScript function to display the comments. You can put something in the div to display before the comments load or if the AJAX fails.

Now, just add the following JavaScript just before the </head> tag of the template. This basically retrieves each individual post page, finds the comments, and inserts it on the main page.

<script language='javascript' type='text/javascript'>
//<![CDATA[

function getXMLDoc() {
// returns a browser specific xml request object
 var x = false;
 if(window.XMLHttpRequest) {
  try {
   x = new XMLHttpRequest();
   x.overrideMimeType("text/xml");
  } catch(e) { }
 } else if(window.ActiveXObject) {
  try {
   x = new ActiveXObject("Microsoft.XMLHTTP");
  } catch(e) {
   try {
    x = new ActiveXObject("Msxml2.XMLHTTP");
   } catch(e) { }
  }
 }
 return x;
}

function showCommentsPost(postid,posturl) {
// gets individual post page and inserts comments in main page
 try {
  var request = getXMLDoc();
  if (request) {
   request.open("GET", posturl, true);
   request.onreadystatechange = function(){
    if(request.readyState == 4){
     var s = new String (request.responseText);
     var ss = "<span id='startcomments'>"+"</span>"
     var si = s.indexOf(ss);
     ss = "<span id='endcomments'>"+"</span>"
     var ei = s.indexOf(ss);
     document.getElementById("comment"+postid).innerHTML = s.substring(si+32,ei);
    }
   };
   request.send("");
  }
 } catch(e) { }
}

//]]>
</script> 

Finally, copy and paste the whole template from your text editor into the Blogger Edit Template box and click “Save Template”.

That’s it! You should now be able to display comments on your blog’s main page just like they are here.