Easily add comment functionality to EPiServer CMS with DISQUS

Posted on August 21, 2011 by Frederik Vig in EPiServer

DISQUS is a very popular hosted comment system that makes it very easy to add comment functionality to new or existing sites. It takes care of spam, security (blacklists, whitelists), moderation, mobile and social media support and more.

To get started we need to sign up at disqus.com. The next step is adding the necessary JavaScript code to our site template – I created a new user control that I then can add to the templates that should have comment functionality enabled.

<%@ Control Language="C#" AutoEventWireup="false" EnableViewState="false" CodeBehind="Disqus.ascx.cs" Inherits="EPiServer.Templates.Units.Disqus" %>
 
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname
 
    // The following are highly recommended additional parameters. Remove the slashes in front to use.
    var disqus_identifier = '<%= CurrentPage.PageGuid %>';
    var disqus_url = '<%= CurrentPage.GetExternalUrl() %>';
 
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + 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">blog comments powered by <span class="logo-disqus">Disqus</span></a>

The disqus_shortname is the shortname you used when you signed up. disqus_identifier is a unique identifier for that page (I used the CurrentPage’s PageGuid property), and disqus_url is the permalink for the page, I just used the GetExternalUrl() method of the Extensions library for EPiServer CMS for this. That’s it, now you only need to include the user control in the templates where you want to allow comments.

Since I tested this locally (not on a public domain) I had to add the following variable to get it to work: var disqus_developer = 1; – which turns on developer mode for DISQUS.

Comment count in lists

If you have a list of pages that have comments you might want to display the number of comments that they have. DISQUS provides us with additional code we can use for just this purpose.

<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // 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>

We can add this code to the bottom of our templates (right before the closing body tag). I then created an extension method for building the link to the comments.

public static string GetDisqusCommentLink(this PageData page)
{
	var link = new TagBuilder("a");
 
	string url = page.LinkURL + "#disqus_thread";
 
	link.MergeAttribute("href", url);
	link.MergeAttribute("data-disqus-identifier", page.PageGuid.ToString());
 
	return link.ToString(TagRenderMode.Normal);
}

To use the TagBuilder class you’ll need to add a reference to System.Web.Mvc.dll (version 2 ships with EPiServer CMS 6 R2).

There’s a lot more you can do with DISQUS, I encourage you to take a look at their developer docs and to try it out.

Related Posts: