Add Disqus to Your Anchor CMS Blog

In a previous post, I wrote about choosing Disqus to add comments to my blog. I wanted to share my implementation with you in case you’re like me and find the documentation to be a little too technical or the code too bloated. Some of this will be specific to Anchor CMS, but the majority of my implementation can be taken to any content management system you are using.

Starting with Official Documentation

The official documentation, and the new account walk-through for that matter, do a very good job of getting you where you need to go. Once you sign up for an account, click the link at the top of the page that says, “Add Disqus to Your Site”. You’ll then be presented with the following form.

Disqus Site Profile form

Fill out this Site Profile form and click Finish registration. Yeah, you’ve already finished registering. How nice and simple is that? Next you’ll be presented with options for which platform you’re using. If you see yours in the list, go ahead and click it. Disqus has done a nice job of simplifying the process and showing you exactly how to implement in each of these platforms.

Choose your platform

You can just as easily use the Universal Code option and insert the code where you like. That’s what I did because I like a no-frills installation. Disqus then gives you your main code snippet which you are to place exactly where you want the comments section to appear on your site. It looks like this:

<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

    /* * * 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>

That code right there will work, right out of the box. That’s a wonderful thought, isn’t it? But I wasn’t satisfied to leave it there – and neither should you. Enter the JavaScript Configuration Variables…

/content/add-disqus-anchor-cms-blog-1.jpg

You’ll find them here. They aren’t necessary at all, but you’ll definitely want them and I’ll tell you why. You see, by default, Disqus will scan your page for the info it needs. It will take your page title and URL and use them for a few things it stores about your page. That’s great if everything works smoothly.

There are a few things that could go wrong. For one, rather than waiting for Disqus to scan your page, you can give them the info they want instantly. That’s a pretty good reason. What if you add things to your <title> tag, like your website name and other stuff? If you send Disqus just the article title, you will be cleaning up the data they use. Also, if you send them a unique identifier for each page, they won’t have to use the URL. That’s a great reason right there, because your URL could change, or there might be multiple URLs that point to your page. So let’s just give them some solid, trustworthy data. Shall we?

At this point, you should be where I am in the following code block. Of course you’ll need to replace the values with the ones that apply to your site and Disqus account, but you knew that. Read on to find out how this already marvelous code can become smaller and prettier.

<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
    var disqus_identifier='<?php echo article_id(); ?>',
    var disqus_title='<?php echo page_title(); ?>',
    var disqus_url='<?php echo full_url().current_url(); ?>';

    /* * * 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>

Simplification

It all works just fine. Most of you will be happy with the code as it is, paste it in place and move on. However, if you’re like me, you just have to clean this up. I don’t like comments or bloated code filling up my site. So I ran the JavaScript through a (minifier)[http://javascript-minifier.com/] and was able to simplify it down to this:

<div id="disqus_thread"></div>
<script>
    var disqus_shortname='EXAMPLE',
        disqus_identifier='<?php echo article_id(); ?>',
        disqus_title='<?php echo page_title(); ?>',
        disqus_url='<?php echo full_url().current_url(); ?>';
    !function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/embed.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

You could even get rid of the <noscript> section if you didn’t mind some users never knowing that comments existed for your page. But for me, I was happy here. All that’s left is to drop this code into place on your site.

Insert into Anchor CMS Articles

As I’ve mentioned, I run this site on Anchor CMS and implementation is extremely easy. If you’re using WordPress you’ll find that your implementation is different but equally as easy.

First you’ll need to navigate to your themes folder, and within the theme folder you’re using, you’ll find a page called article.php. If you’ve not modified this page yet, you may still have the default Anchor CMS comments code. If not, you can refer to the themes/default/article.php file to see the default code.

Since we’re all but ignoring Anchor’s built-in commenting system here, all we’ll need to keep is the code to turn comments on and off. You’ll find the following lines in the default code:

<?php if(comments_open()): ?>
...
<?php endif; ?>

Take everything between these two lines and replace it with your Disqus code. DONE!

Yep, that’s it. Now when adding or editing a post on your site, if you check the box to Allow Comments, that article will get a Disqus comment section. If you un-check the box, no comments. It’s that simple.

Since Disqus matches the styling of your site and mainly uses minimalistic styling, it will look great automatically. When you’re done testing it, push it live and enjoy that extra sense of community you’ve just added to your website.

One Minor Issue

From the very beginning of this process, I had a nagging feeling that something was missing. In the back of my head I kept wondering where the sandbox was. Have you wondered the same thing? I mean, I just walked you through the entire install but never mentioned a developer mode or a sandbox for testing.

Well as it turns out, there isn’t one of those things. Which is a real big issue in my opinion. Doing a quick search led me to this post which answered all my questions:

This variable has been depreciated since it is no longer needed –– We recommend creating a new forum shortname which you use for testing/developing.

I really didn’t want to maintain two separate accounts and risk pushing the wrong shortname live. That would be much worse than pushing a sandbox mode live. I guess that’s just my opinion, but their choice to deprecate the sandbox is rather annoying.

I run my sites locally for testing and without an option for a sandbox, I risk opening an article locally and having it appear in my discussions on Disqus. I don’t know if that makes it public or not and I’m not sure that when I mark the discussion as closed that it helps either. I would really like to see them add this feature back in.

Final Thoughts

I’m quite happy with my Disqus implementation and I’m happy with how Disqus has been working for me as well. I won’t really know for sure if it’s as easy as it looks to moderate until my blog picks up some momentum and I get a steady stream of comments. So do your part and comment, won’t you?

But seriously, once you know what you’re doing, implementation is a cake walk. Make sure to do your testing with a separate account to avoid the issue I mentioned. I highly recommend you try Disqus on your site. Whether you’re using WordPress, Anchor CMS, or anything else, I’m sure that your blog could benefit from Disqus. Try it out and let me know what you think.