Tutorial: How can I enable comments to my site?

You can do this many ways but these are the steps we recommend.

1) Add a template called ‘Comments’. This will be for displaying existing comments and displaying the form to leave a new one

2) Add a template called ‘Comment’. This will be for displaying an individual comment

3) Add a template called ‘New Comment’. This is the form for leaving a new comment

4) In your article template, include the new ‘Comments’

There’s sample code for each step at the end of this post.

But first, a few technical details.

All the comments on an article are accessible via article.comments. For instance, this works: {% for comment in article.comments %}

If you just want a count of how many comments an article has, you can use article.comment_count. For instance, you can use <span>There are {{ article.comment_count }} comments on this article</span>

Each comment has the following properties that you can display:

- comment.date - the date

- comment.body - the text of the comment

- comment.name - the name of the person who left the comment

- comment.url - the site url of the person who left the comment

To create the form, you have to use the {% commentform %} tag.

Inside that and the corresponding end tag ( {% endcommentform %} ), you should include the following:

- form.name

- form.email

- form.url

- form.body - the box that users type their comment into

- form.captcha_answer - IMPORTANT. This little bit asks a question that makes sure that the responder is a human and not a spam bot. If you don’t include this in your form, the comments will not be accepted by Hot Ink. form.capcha_answer generates the box for the answer and form.captcha_question is the text of the related question

- form.submit - the button that users press when they’re finished.

Note: if you’re an HTML wizard, you can create your own form as long as you put it inside the {% commentform %} tag. If you want to try your own, use the above for now, view the source to get an idea of what the HTML is like and then modify that.

# Checking the status of an article

Comments on articles can be in three states:

- Enabled: full steam ahead. Anyone can leave a comment.

- Locked: existing comments show up but nobody can leave new ones.

- Disabled: comments are completely turned off.

To check what the status is, you can use:

- article.comments_enabled

- article.comments_locked

# Moderating comments

If you log in to Hot Ink and click on Publisher, there’s a new sub-option called “Comments.” This will display all the comments left on your site. From here, you can:

- Clear flags. If people have flagged a comment, you can remove the flags if you feel the comment is actually acceptable.

- Remove it. This will take it off your site.

- Mark as spam. This will both remove the comment and send a signal to Hot Ink to tell us that this was a spam comment. This will make the system smarter about automatically blocking future spam.

# Tips

- It’s probably a good idea to create a moderation policy and post it on the site. Have a look at The Fulcrum’s for example: http://thefulcrum.ca/articles/21139

- Encourage authors to get involved in the commenting action. It creates an incentive for people to get engaged.

- Sometimes you might notice comments that seem relevant but sound a bit quirky. If they include a link, you can be fairly certain that it’s spam so make sure to hit the “Mark as spam” button on the commenting moderation page.

# TODOs on our end

- Commenting doesn’t quite work on blog entries yet. Keep this to your article pages.

- There isn’t an easy way for users to flag comments for review. This is coming.

# Sample code

1) Comments partial

<a name=”comments”></a>

{% if article.comments_enabled %}

{% for comment in article.comments %}

{% include “Comment” for comment %}

{% endfor %}

{% unless article.comments_locked %}

{% include “New Comment” for comment %}

{% else %}

<p>Comments are locked</p>

{% endunless %}

{% else %}

<p>Comments are disabled</p>

{% endif %}

2) Comment partial

<div class=”comment”>

<span><strong>{{comment.name}}</strong></span> on

<span><a name=”comment-{{comment.id}}”>{{ comment.date | date: “%b %e, %G at %I:%M %p”}}</a></span><br/>

<div>{{ comment.body | strip_html | markdown}}</div>

</div>

3) New Comment partial

<h3>New Comment</h3>

{% commentform %}

<p>{{ form.name }}<label for=”author”><small>Name (required)</small></label></p>

<p>{{ form.email }}<label for=”email”><small>Mail (will not be published)</small></label></p>

<p>{{ form.url }}<label for=”url”><small>Website</small></label></p>

<p>{{ form.captcha_answer }}<label for=”captcha_answer”><small>{{form.captcha_question}}</small></label></p>

<p>{{ form.body }}</p>

<p>{{ form.submit }}</p>

{% endcommentform %}

4) Adding comments to the article template

{% if article.comments_enabled %}

{% for comment in article.comments %}

{% include “Comment” for comment %}

{% endfor %}

{% unless article.comments_locked %}

{% include “New Comment” for comment %}

{% else %}

Comments locked

{% endunless %}

{% else %}

Comments disabled

{% endif %}