Get Updates

New posts, webinar and event invitations, and more.

The Old Dog Gets New Tricks – Social Comment Systems

, Monday, October 25th, 2010

Js-Kit Echo - Change the ConversationBlog comment systems have come a long way from the early days. In the past, to achieve a level of interaction with your audience, you provided a simple form somewhere near the bottom of your page, which would allow a user to leave a note on your site by posting data to the server with would be stored in your database or text file for future rendering. Simple, straightforward, but certainly lacking all that the new social has to offer. Enter the new social commenting platforms. These sleek plug-ins for your site include a host of features and self-contained functionality. Let’s cover some of the benefits of using a social comment platform and get our hands dirty with the implementation specifics.

The Background

Social comment systems have the advantage over the basic comment system in several ways. Most social comment systems have built-in integration with social networks and identity providers such as Twitter, Facebook and OpenId, which allows you to easily pull user data to provide quick registration and identification data. Also, most systems allow you to easily share the comment or the site with friends.

Recently, we needed to implement a fairly robust commenting system on a Convio site for a client. We knew that we wanted to make our comments the centerpiece of the site and that we wanted them to be easily shared with Twitter and Facebook. Since the requirement had such a strong focus on Facebook and Twitter integration, we initially had started down the path of creating a simple storage mechanism for the comments and then to allow the user to share that comment with the world via their social network of choice.  Three things became very apparent quickly:

  1. Facebook social plugins are nice, but they are anything but flexible and they are purposefully protected from much customization, which was a real problem for our client, who had a very specific idea of how things should work.
  2. Twitter was amazingly easy to implement, but the population of Twitter users in the audience was much lower than Facebook, so it was deemed a less attractive solution. Also, let’s face it: When people have to say something important, sometimes they can’t fit it into 140 characters or less.
  3. Synergy (ha!) Of course, combining and publishing the two disparate feeds of data was an issue. It was becoming apparent that we needed something more…

A few things that you should know right off the bat. JS-Kit Echo is not the only player out there. DISQUS Comments, IntenseDebate, and others are also worth checking out. We chose to write about JS-Kit echo because after a quick feature comparison, JS-Kit Echo fit our needs for customization, social network integration, and form. JS-Kit Echo is not free. Currently there is a 30 day free trial and then you have your choice between two plans, Echo Live and Echo Live Pro, which cost $10/mo and $100/mo respectively. Get more info over at the JS-Kit Echo site.

So, now that we know the why, let’s talk about the how and let’s jump in feet first. The basic implementation of the JS-Kit Echo comment system is about as easy as it could be. To get a working comment box on a page, you sign up for an account, associate a domain name with the account, and paste two lines of code on your site. Done.

The JS-Kit Echo framework is very customizable and covering all the various settings here would do their documentation wiki a huge disservice. Go take a look for yourself.

The Implementation

Our implementation is a little more complicated and includes a bit more wrangling. The basic premise is to allow users to weigh in on a topic by commenting on their choice in two separate threads. We wanted to provide the ability to vote and then leave a comment as to why they voted that way.

The basic layout of our two column approach includes utilizing a simple float to layout the page and placing the two JS-Kit Echo divs within. This is the basic code:


<span  style="float: left;">
<div permalink="" uniq="yes" paginate="10" ></div>
</span>
<span  style="float: right;">
<div permalink="" uniq="no" paginate="10" ></div>
</span>
<script src="http://cdn.js-kit.com/scripts/comments.js"></script>

Those of you paying attention will notice the use of the “uniq” tag. This allows the individual instances of Echo on the page to associate with a separate thread. The handy wiki pointed out using this method for our purposes.

On this site, we take a user’s vote on a previous page and pass it along to the comments page, so we wanted the user to be able to weigh in as to why they voted that way. So, when the document loads, we check a session value and set the state of the other thread to be hidden, which is to say, we simply apply a class to the parts of the Echo comment box that involve taking user input, so at the end of the day, it appears that the appropriate thread is queue up and waiting for your input, while the opposing view is simply displaying the already entered comments in a read-only state.


function hideNo(){
$('.no .jsk-CommentFormSurface').addClass('hideMe');
$('.no .jsk-CommentFormButton').addClass('hideMe');
$('.no .js-commentControl').addClass('hideMe');
$('.no .js-singleCommentReplyable').addClass('hideMe');
}
function hideYes(){
$('.yes .jsk-CommentFormSurface').addClass('hideMe');
$('.yes .jsk-CommentFormButton').addClass('hideMe');
$('.yes .js-commentControl').addClass('hideMe');
$('.yes .js-singleCommentReplyable').addClass('hideMe');
}

Where our CSS includes the following:

.column {width:338px; margin:2px; display:block;float:left}
.hideMe {display:none}

Then to wire it all up:


$(document).ready(function() {
if(getParameterByName("v") == '1') // calls a helper method to get the vote result
{
setTimeout('hideNo()',1250);
}else if(getParameterByName("v") == '0'){
setTimeout('hideYes()',1250);
}
});

Tech Tip!

You will note that we use the setTimeout function. It is important to remember that because these controls are being injected into your page, you can not assume that they will be ready for styling or editing on Document.Ready. We give the controls a bit of time to load in and then we perform our styling task.

Wrap It Up

And that’s that! After a user votes, they reach this page and they are shown the appropriate comment thread ready to receive their input with the opposing view there to encourage feedback.

In only a few lines of code, you can achieve a very robust system for storing user interaction. On top of that, because of JS-Kit Echo’s social integration, you give your user several ways to quickly identify themselves and share that comment with others.

Comments are closed.