When I decided to switch over to using Disqus as the commenting system for this site, I found very little info on how to implement it within Mango Blog. Someone made a request for a plug in many years ago, but no one answered. Disqus's own documentation is "okay" but the section on adding comment count links to the home page was vague and missing some key info. And of course they don't look at Mango specific installs like they do WordPress and the other big folks.
It was a good starting point, though, and between that and a blog entry on using Disqus in a Ruby on Rails app, I was able to figure things out. So I thought I'd throw up a quick guide to save others time in the future if they wish to do the same.
Note: for this method, I didn't bother doing a plug-in. One, it seemed like a way to really overcomplicate the whole thing. Two, it would have made it a bigger pain to manage if Mango is ever updated in the future. Three, most of Mango's commenting layout/form is hard coded into the templates anyway, so why go against their design? Four, I honestly did not want to get into learning how to write a good Mango plug-in.
What this method does do is allow for flexible implementation of the code, allows you to still take advantage of the "allow comments" settings for individual pages/articles from within Mango, and keeps your existing comments visible, if you like. (Disqus does have an import function for porting over comments, but I didn't use it so I can't really speak to how that works.)
Step 1: Get Disqus Set Up
Obviously the first step is to go register at Disqus, if you haven't already, and set things up for the site you want to put Disqus on. The process is pretty straight forward, so I'm not going to go into how to do that part. Once you have it configured, make note of your site's "Shortname", which is displayed in the admin panel, General tab, Site Identity section.
Step 2: Modify Mango Post Code
In your Mango site, head over to the skin folder for whatever skin you are using on your site. Now here is where you need to have a pretty good knowledge about your skin, as the code you'll find can change dramatically. For these examples, I'll use the code from Cutline, which is one of the default templates that ships with Mango.
Open up your skin's post.cfm file and find the start of your comments section (line 65 in the unmodified Cutline skin). The first part deals with displaying comments.
<h3 class="comments_headers"><mango:PostProperty commentCount /> response<mango:PostProperty ifCommentCountGT="1">s</mango:PostProperty><mango:PostProperty ifCommentCountLT="1">s</mango:PostProperty><mango:PostProperty ifcommentsallowed> so far ↓</mango:PostProperty></h3>
<ul id="comment_list">
<mango:Comments>
<mango:Comment>
<li class="comment <mango:CommentProperty ifIsAuthor> highlighted</mango:CommentProperty>" id="comment-<mango:CommentProperty id />">
<p class="comment_meta">
<span class="comment_num"><a href="#comment-<mango:CommentProperty id />" title="Permalink to this comment"><mango:CommentProperty currentCount /></a></span>
<strong><mango:CommentProperty ifhasurl><a href='<mango:CommentProperty url />' rel='external nofollow'></mango:CommentProperty><mango:CommentProperty name /><mango:CommentProperty ifhasurl></a></mango:CommentProperty> </strong>
<span class="comment_time">// <mango:CommentProperty date dateformat="mmm d, yyyy" /> at <mango:CommentProperty time /></span>
</p>
<div class="entry">
<mango:CommentProperty content />
</div>
</li>
</mango:Comment>
</mango:Comments>
<mango:PostProperty ifcommentsallowed ifCommentCountLT="1">
<!-- If comments are open, but there are no comments. -->
<li class="comment">
<div class="entry">
<p>There are no comments yet...Kick things off by filling out the form below.</p>
</div>
</li>
</mango:PostProperty>
</ul>
You'll probably want to give some indication that this section is now for "archived" comments. For example, you could change this:
<h3 class="comments_headers"><mango:PostProperty commentCount />
To this:
<h3 class="comments_headers">Old Style Comments: <mango:PostProperty commentCount />
If you don't want to show the old comments at all (or you plan to import them into Disqus) you can delete that whole section. If you are going to keep old comments, just delete this part:
<mango:PostProperty ifcommentsallowed ifCommentCountLT="1">
<!-- If comments are open, but there are no comments. -->
<li class="comment">
<div class="entry">
<p>There are no comments yet...Kick things off by filling out the form below.</p>
</div>
</li>
</mango:PostProperty>
</ul>
Below this is the section that displays the comment form. Notice it is all wrapped in a PostProperty tag:
<mango:PostProperty ifcommentsallowed>
<!-- Comment Form -->
<h3 id="respond" class="comments_headers">Leave a Comment</h3>
<mango:Message ifMessageExists type="comment" status="error">
<p class="error">There was a problem: <mango:Message text /></p>
</mango:Message>
<mango:Message ifMessageExists type="comment" status="success">
<p class="message"><mango:Message text /></p>
</mango:Message>
<form method="post" action="#respond" id="comment_form">
<input type="hidden" name="action" value="addComment" />
<input type="hidden" name="comment_post_id" value="<mango:PostProperty id />" />
<input type="hidden" name="comment_parent" value="" />
<mango:AuthenticatedAuthor ifIsLoggedIn>
<p>You are logged in as <mango:AuthorProperty name /></p>
<input type="hidden" name="comment_name" value="<mango:AuthorProperty name />" />
<input type="hidden" name="comment_email" value="<mango:AuthorProperty email />" />
<input type="hidden" name="comment_website" value="<mango:Blog url />" />
</mango:AuthenticatedAuthor>
<mango:AuthenticatedAuthor ifNotIsLoggedIn>
<p><input id="author" class="text_input" type="text" name="comment_name" value="<mango:RequestVar name='comment_name' />" /><label for="author"><strong>Name</strong></label></p>
<p><input class="text_input" type="text" id="email" name="comment_email" value="<mango:RequestVar name='comment_email' />" /><label for="email"><strong>Mail</strong> (it will not be displayed)</label></p>
<p><input class="text_input" type="text" id="url" name="comment_website" size="30" value="<mango:RequestVar name='comment_website' />" /><label for="url"><strong>Website</strong></label></p>
</mango:AuthenticatedAuthor>
<p><textarea class="text_input text_area" id="comment" name="comment_content" rows="7"><mango:RequestVar name="comment_content" /></textarea></p>
<p><input type="checkbox" id="subscribe" name="comment_subscribe" value="1" /> <label for="subscribe">Subscribe to this comment thread</label></p>
<p><mango:Event name="beforeCommentFormEnd" /></p>
<p><input name="submit" class="form_submit" type="submit" id="submit" src="<mango:Blog skinurl />assets/images/submit_comment.gif" value="Submit" /></p>
</form>
</mango:PostProperty>
Replace that with our Disqus code:
<mango:PostProperty ifcommentsallowed>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'YourShortNameHere'; // required: replace example with your forum shortname
var disqus_identifier = '<mango:PostProperty id />';
var disqus_title = "<mango:PostProperty title />";
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div><!--/post -->
</mango:PostProperty>
Replace the indicated place holder with your site's Shortname.
Step 3: Modify Mango Page Code
Basically, repeat step 2 for your post.cfm page, except the the tag your Disqus code goes between will be PageProperty instead of PostProperty. Also, you'll need ot change two lines of your Disqus code:
var disqus_identifier = '<mango:PostProperty id />';
var disqus_title = "<mango:PostProperty title />";
to
var disqus_identifier = '<mango:PageProperty id />';
var disqus_title = "<mango:PageProperty title />";
Step 4: Add the Comment Counts to the Index and Archive Lists (if desired)
For most of the Mango skins, the home page, category browse, archive list, etc. show how many comments an article. To achieve the same effect with Disqus, open your skin's index.cfm file. Find the line(s) that display the comment numbers.
<mango:PostProperty ifCommentCountGT="0"><mango:PostProperty commentCount /> Comment<mango:PostProperty ifCommentCountGT="1">s</mango:PostProperty></mango:PostProperty><mango:PostProperty ifCommentCountLT="1">No Comments</mango:PostProperty></a></mango:PostProperty>
Change it to:
<mango:PostProperty ifcommentsallowed><span class="post-comments"><a href="<mango:PostProperty link />#disqus_thread" title="Comment on <mango:PostProperty title />" data-disqus-identifier="<mango:PostProperty id />">Comments</a></span></mango:PostProperty>
In the Cutline template, this line appears twice so make sure to change the second instance as well! At the bottom of the page, above your footer include (if you use one), add this code:
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'YourShortNameHere'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
Again, change YourShortNameHere to your own. Do the same for the archives.cfm file.
Step 5: Final Wrap Up
Log in to your blog admin and hit Clear All in the Cache Manager. Go to your Disqus administrator and hit their Verify button to be sure they can find your install. Go to your home page and one or two articles to make sure everything is loading right.
Is it? Yay, all done, enjoy 🙂
If not, things to check:
- Did you put in the right ShortName with no spaces?
- Do any of your article titles have double quotes in them, that may be throwing off the JS code?
- Did you clear the site cache?
- Did you clear your browser cache?
If you get Mango errors, make sure that you placed the code between the two tags and didn't accidentally remove any closing tags for the other parts of the template.