I thought a lot about putting comments on this site. The main question is "Do I go pre-built or build my own?". I built my own, but that doesn't mean you should too. It really depends on your preferences and willingness to spend time on making your own and maintaining it. Here are the pros for going with a pre-built system such as Disqus;

  1. It just works out of the box
  2. Users are familiar with it and may already have an account
  3. Spam filtering is built in

Here are the cons (and ultimately why I decided to build my own):

  1. The data is not owned by you
  2. You might not be able to make the changes you want
  3. It relies on an external system which can go down

Number 1 and 2 are the deciding factors for me. I like control and I can't do that with an external system. So here's how I did it myself - it's fairly simple and hopefully it can help someone make their own decision on this matter.

The server side code is pretty trivial and just reads and inserts into a database, so I won't bore you with that. I went with a JavaScript heavy implementation, I had thought about using Knockout JS but I'm not currently using it on the site and can't justify a 14kb library of awesomeness just for this one small feature. So I went with just jQuery, and these are the two main functions for the comment system.

blog.loadComments = function (node) { 
   if (node.children('form').is(':visible')) { 
      node.children('form').hide(); 
      node.children('.comments-list').hide(); 
   } else { 
      $.ajax({ 
         url: "/Blog/Comments/" + node.data('id'), 
         method: 'get' 
      }).done(function(data) { 
         blog.displayComments(node, data); 
         node.children('form').slideDown(); 
      }); 
   } 
}; 
 
blog.displayComments = function (node, data) { 
   node.children('.comments-list').empty().show(); 
   for (var i = 0; i < data.length; i++) { 
      var comment = data[i]; 
      node.children('.comments-list').append( 
         $('<div></div>') 
            .addClass("comment") 
            .append($('<img />').addClass("thumbnail").attr('src', comment.ProfilePicture).attr('alt', comment.Name).attr('title', comment.Name)) 
            .append($('<span></span>').addClass("name").text(comment.Name)) 
            .append($('<span></span>').addClass("date").text(comment.Date)) 
            .append($('<p></p>').addClass("body").text(comment.Text)) 
      ); 
   } 
};

So that's it, really. They are fairly self explanatory functions, blog.loadComments is responsible for pulling the comments from the database and calling blog.displayComments which is responsible for iterating through the data and filling the correct element on the site. We have one other small piece that kicks off the whole thing:

// Comments loading code 
var commentNodes = $('.post .post-comments'); 
if (commentNodes.length == 1) { 
   // load comments if there is only one 
   blog.loadComments(commentNodes); 
} else if (commentNodes.length > 1) { 
   // attach the click to the a 
   $('a', commentNodes).click(function () { 
      blog.loadComments($(this).parent()); 
   }); 
}

If we are just looking at one post, then the comments will pull from the database and display automatically. However if we are looking at page with multiple posts on it (i.e. the home page) the comments will not load, instead we just attach a click even to the comments button to bring them up.

Cheers, Rich
By Richard Rout
Feed
0 Comments
Only used for Gravatar avatar.