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 = 'andrewmigueleztest'; // 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 = 'andrewmigueleztest'; // 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='andrewmigueleztest',
        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.

  • Afnizar Nur Ghifari

    Thanks!

    • Andrew Miguelez

      Hey, I’m glad this helped you! If you have any questions, feel free to ask. And drop a link when you finish your implementation. I’d love to see how it turned out.

      • Afnizar Nur Ghifari

        Okay!
        I have a problem, how to display comments count?

        • Andrew Miguelez

          See the install page on Disqus.com. Directly under the instructions for adding comments are the instructions for adding comment count.

          If using my cleaned-up code from this article, you add the following code directly under the one for embed.js. If you’re including this on a non-post page (no comments), then use the same code for comments but replace the embed.js line with this one:

          !function(){var e=document.createElement(“script”);e.type=”text/javascript”,e.async=!0,e.src=”//”+disqus_shortname+”.disqus.com/count.js”,(document.getElementsByTagName(“head”)[0]||document.getElementsByTagName(“body”)[0]).appendChild(e)}();

          Then wherever you want to display the comments, append #disqus_thread to a link’s href value. I do it like this at the top of my posts:

          <a href=”#disqus_thread” data-disqus-identifier=”<?php echo article_id(); ?>”></a>

          The comment count will be filled in when the script runs, but you can also put text in the anchor in case it doesn’t or if you don’t mind it being replaced.

  • Very helpful article. Thanks!

  • Thanks to much. Very helpful article for me.

  • mvc e-ticaret
    You share issue’m looking for.
    Thank you so much bro.

  • Thank you, works as described!

  • Thanks. I have a question for you, can disqus comments sync to Anchor’s default comments? 🙂

    • Andrew Miguelez

      Since it’s apparently possible to sync with WordPress comments, I would assume that the same is true for Anchor comments. Try looking into how it’s done with WordPress and see if you can apply it to your site. I wasn’t able to find any tutorials on how to do it with Anchor, so you could be the first!

  • Thanks for sharing this info!

  • If you see yours in the list you 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 which really very interesting. ..

  • laurence mike

    Great info you have shared it is helpful and new info for me

  • Still i find it too technical

    • Andrew Miguelez

      Well Anchor CMS isn’t for beginners and Disqus, as a platform, is wrought with user experience issues. So don’t feel bad if you can’t figure it out. But don’t give up on your website. Consider WordPress and the millions of hours of YouTube tutorials dedicated to it.