You've successfully subscribed to Nicholas Workshop
Great! Next, complete checkout for full access to Nicholas Workshop
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Home-made "Recent Comments" For Blogger

Nicholas Wong
Nicholas Wong

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=""></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 -->

Nicholas Wong

Fullstack software engineer with strong background in computer science and extensive experience in software engineering and architecture. Studied in NYU, worked in Yahoo, Rakuten and Manulife.