This article focuses on ways that you can use Ajax Rating Pro to setup comment thresholds for Movable Type. The concept behind comment threshold is the ability to hide or collapse comments with rating score below a certain threshold. The result is collaborative filter, readers rate each others comments, and higher ranked comments are given more prominence, while lower ranked comments are given less prominence. Popular site such as Slashdot, Digg, and Scoop-powered sites use comment threshold filtering. It is a great tool for popular sites that attract a large number of comments.
Ajax Rating Pro is very flexible and customizable -- you can decide how you want to implement comment threshold filtering. Do you want to completely hide low ranked comments? Merely collapse them? Implement a default threshold score, or let readers choose their own? Something else in mind?
Ajax Rating Pro comes with a few built-in tools to help setup some of the more common approaches to comment thresholds. Let's walk through such an example. First take a look at the test entry here. Feel free to rate some comments and set a person comment threshold - notice how the display changes (refresh the page if needed). I am going go step-by-step to setup comment thresholds in this manner.
In this scenario, reader will rate comment with a vote up or a vote down. Votes are +1 point and votes down are -1 point. The default threshold is -3. In this scenario, comments with a total score of less than -3 will appear in a collapsed state. A single-click reveals the below threshold comment. Reader can optionally choose their own threshold using the form at the bottom of the comment listing.
Step 1 - After you have installed Ajax Rating Pro, go to the plugin settings for the blog you want. Choose Thumbs Up/Down for comment mode and choose 1 for Comment Max Points. Set the default threshold as desired (in this example, we will use -3).
Step 2 - Add a thumb rater to your Individual Archive template, between the <MTComments> and </MTComments> tags. In this example, I added it after the comment date on the default MT 3.3+ template:
<$MTAjaxThumbRater type="comment" report_icon="1"$> Score: <strong><span id="ajaxrating_comment_<MTCommentID>_ttl"><MTAjaxRating></span></strong> (<span id="ajaxrating_comment_<MTCommentID>_cnt"><MTAjaxRating show="vote_count"></span> votes cast)
Then rebuild your individual archives. (Tip: make sure you have the Ajax Rating lines in the <head> section of this template, as described in step 10 here. After rebuilding, each comment should have a thumb rater -- test to make sure the ratings are working.
Step 3 - Now that our readers can rate others' comments, now we can change the display for comments that fall below the threshold. In this example, we will do this using CSS styles to show or hide things. First we want to create add a section to the Individual Archive template, that will display only when comments fall below the threshold. In this example, immediately after </MTCommentsHeader>, enter the following:
<span class="below-threshold" id="threshold-<$MTCommentID$>">
<a href="#" id="c<$MTCommentID pad="1"$>" onclick="showComment(<$MTCommentID$>); return(false);"><$MTCommentBody trim_to="30" strip_linefeeds="1" remove_html="1"$>...</a> (Below threshold)
Posted by <$MTCommentAuthorLink default_name="Anonymous"$> <$MTCommentAuthorIdentity$> |
<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a> | Score: <strong><$MTAjaxRatingTotalScore$></strong>
The first and last lines above are very important. This <span> encloses the stuff that we want to display when a comment is below the threshold. We will show and hide this span depending on the score and threshold. Both the class="below-threshold" and id="threshold-<$MTCommentID$>" are required for this purpose.
Inside the the span, you can customize what you want to display when a comment is below threshold. In this example, we have included a link that will display the comment. Notice the onclick argument in the link:
Step 4 - The next step is to include a form that readers can use to set their own threshold. (If you don't want readers to be able to set their own threshold, you can skip this step). Below the </MTComments> tag, enter the following form code:
<form id="threshold-form" name="threshold_form" action="<$MTEntryLink$>#comments" onsubmit="setThreshold(this);">
<input type="text" name="threshold" size="3">
<input type="submit" name="submit" value="Set Comment Score Threshold">
The important part of this form is the onsubmit="setThreshold(this);" section as this will set the readers threshold by storing in a cookie in their browser.
Step 5 - By default, the section that we added in Step 3 above is hidden from view, and the full comment is displayed. At this point we need to compare the score to the threshold of each comment and decide which comments should be collapsed. Add the following below the form coded added in Step 4:
var comments = new Array(<MTComments>'<$MTCommentID$>',</MTComments>'');
Step 6 - Rebuild your individual archives and test it!
The customized individual archive template used in this example on the test entry can be found here.
Another Built-in tool is the <MTIfAjaxRatingBelowThreshold> conditional tag. You can use this tag inside an <MTComments> container. Anything between <MTIfAjaxRatingBelowThreshold> and </MTIfAjaxRatingBelowThreshold> tags will not be inlcuded in the HTML of the page. (Note that the score is checked against the default threshold when the page is rebuilt, or if you are using PHP dynamic publishing, when the page is displayed). For example, if you wanted to completely hide comments below the default threshold, you could do something like this:
.....comment template code here......
Note that if you use this tag, you won't be able to provide a link to display the comment like in the example above.
Another way to use this tag might be to apply certain filters to comments below the default threshold. For example you might want to remove HTML from comments below threshold:
I hope that the example above provide a few examples of how you can implement comment threshold viewing, and perhaps inspire a few ideas for unique ways to do so.
To get Ajax Rating Pro, or for more information, click here.