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>
<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>" +
    $('#nicholasComment').html("<ul>" + nicholasCommentCode + "</ul>");
<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 -->

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: