Learn More

Monday, November 26, 2012

Get Comments Retreaded With Javascript API Of Blogger

blogger
Several posts ago, we had discussed how to use Blogger Javascript API. And know, we discuss how to get comments retreaded using stable Javascript API. So this method more effective to get comments on a post of blogger. What you should to do before learn this tutorial is must understand with Javascript, http://www.threelas.com/2012/01/basic-google-data-api.html, http://www.threelas.com/2012/01/basic-blogger-api.html, http://www.threelas.com/2012/04/basic-using-javascript-client-library.html, http://www.threelas.com/2012/04/basic-blogger-javascript-api.html, http://www.threelas.com/2012/05/how-to-retrieve-posts-using-blogger.html. And also, we must make sure to you that this tutorial is valid for public blog. If you set your blog as private, then this method will not work. Again, you should to care that Google was publish blogger API v3. However, this Javascript API will not have side effect due to API v3 (at least for this time).
To "release" comments on a post using this API, you must start it using code below

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
      google.load("gdata", "1.x", { packages : ["blogger"] });
</script>
    
After you call google.load(), then you create a new function for blogger service object. Format of this blogger service is as follow

function getYourComment(){
       var content document.getElementById('content');        
    var bloggerService =
            new google.gdata.blogger.BloggerService('com.appspot.interactivesampler');
    var feedUri 'http://www.threelas.com/feeds/posts/default'//threelas feed Uri​​​​​​​​​​​​​​​​​
   
   // Handle blog post feed code here
   
   // Handle comments code here
   
   // Handle error code here
             
    bloggerService.getBlogPostFeed(feedUrihandleBlogPostFeedhandleError);        
}
        
Threelasappname is application name. You must fill this application name, bloggerService will call method inside them, one of them is 

getBlogPostFeed(<string|google.gdata.blogger.BlogPostQueryuriOrQuery, 
<function(Object)continuation, <function(Error)|undefinedopt_errorHandler, opt_param)​​​

So, you call it after bloggerService

var handleBlogPostFeed function(blogPostsFeed{
          // Display blog's title and clear 'Loading...' message, this is using getBlogPostFeed()
          content.innerHTML '<p><strong>Blog:</strong> '
                            '<a href="'
                            blogPostsFeed.feed.getLink('alternate').getHref()
                            '">'
                            blogPostsFeed.feed.getTitle().getText()
                            '</a></p>';
        
          var postEntry blogPostsFeed.feed.getEntries()[0]// only get first post  
          var commentsFeedUri postEntry.getRepliesLink().getHref();
        
    // This is using getBlogCommentFeed()
          bloggerService.getBlogCommentFeed(commentsFeedUrihandleCommentFeed
handleError);
        };
        
If you see the code above, we must call getBlogCommentFeed(), where this function has format as follow

getBlogCommentFeed(commentsFeedUrihandleCommentFeedhandleError

commentsFeedUri is comment feed uri of a posting, handleCommentFeed is a function to access comments of a post from commentFeedUri, handleError is optional parameter to handle your application if something error is happen. After getBlogCommentFeed() is success to call comments from comment feed, then we can access all comments via handleCommentFeed like below

// The callback method used when getBlogCommentFeed() returns comments
        var handleCommentFeed function(commentsFeedRoot{
          var commentEntries commentsFeedRoot.feed.getEntries();
        
          // Buffer HTML until execution completes
          var html '<p><strong>Recent Comments:</strong></p>';
          
          if (commentEntries.length 0{
            html += '<ul>';
            for(var 0commentEntrycommentEntry commentEntries[i]i++{
              var commentTitle commentEntry.getTitle().getText();
              var commentLink commentEntry.getLink('alternate').getHref();
              html += '<li>'
                   '<a href="' commentLink '">'
                   commentTitle '</a></li>';
            }
            html += '</ul>';
          else {
            html += '<p>No comments found for that post.</p>';
          }
          
          // Output buffered HTML and clear 'Loading...' message.
          content.innerHTML += html;
        };
                
And you can make error message like below

var handleError function(error{
          content.innerHTML '<pre>' error '</pre>';
        };
        
After that, you have to tell the google.load to wait until the page finishes loading and then call your code

google.setOnLoadCallback(getYourComment);

Below is the complete code for this tutorial