Unsorted

Home-made "Recent Comments" For Blogger

Nicholas Wong

Nicholas Wong

— 2 min read
Home-made "Recent Comments" For Blogger

I suddenly want to write a “Recent Comment” for this Blogspot as I am not satisfied with the default one. It is not difficult as I made use of jQuery to dual with the comment feed in Json format. All the data is avaliable and ready, what I do is just adjusting the location into a nice looking layout. Try it. =]

Just create an HTML/JavaScript gadget on your blogger and paste the following code onto it. Don’t worry about anything as I have done everything for you, you will see the result as soon as you save the gadget. You may need to change the layout such as number of comment to show and structure of each comment, ask me if you don’t know how to alter. Anyway, I will keep on modified it as I am still not very satisfied with it.

<!-- Recent Comments Designed by Nicholas Wong -->
<!-- Created on 31 July, 2010. Last update on 1 Augest, 2010 -->
<div id="nicholasComment">
  <noscript>Error! Javascript here is not supported!</noscript>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
  var nicholasCommentNum = 10;
  function nicholasCommentShow(json) {
    var nicholasCommentCode = "";
    if (json.feed.entry.length < nicholasCommentNum) {
      nicholasCommentNum = json.feed.entry.length;
    }
    for (i=0; i<nicholasCommentNum; i++) {
      nicholasCommentCode +=
        "<li>" +
          json.feed.entry[i].author[0].name.$t + ": <br />" +
          "<a href='" + json.feed.entry[i].link[2].href + "'>"  +
            json.feed.entry[i].summary.$t.replace(/<br.*>/, " ") +
          "</a>" +
          "<div style='text-align:right;'>" +
            json.feed.entry[i].published.$t.substr(0, 10) +
          "</div>" +
        "</li>";
    }
    $('#nicholasComment').html("<ul>" + nicholasCommentCode + "</ul>");
  }
</script>
<script src="/feeds/comments/summary?rderby=published&start-index=1&max-results=11&alt=json-in-script&callback=nicholasCommentShow"></script>
<!-- Recent Comments Designed by Nicholas Wong -->
<!-- Created on 31 July, 2010. Last update on 1 Augest, 2010 -->

Read more