Using Disqus

Testing Disqus comments on the blog. This is about how I ended up using Disqus for comments on the blog.

Gus Beare

UPDATE: 8th June 2015. I decided to remove Pjax and go back to simpler Disqus loading as described here:
Comments on demand.

The main reasons I took the decision are problems with Pjax loading and issues with Adsense.

I found from time to time in some browsers the page refreshed normally when it was supposed to be Pjax loading the content. I couldn't work out why. With Google Adsense I found it wasn't providing relevant ads and also not refreshing when new content was loaded. There are ways around this but I decided it was too much work.


I decided to give Disqus a go to manage my blog comments outside of the application.

Having tested Wordpress and in a very short time run into a lot of spam comments I had a think about how to approach comments. I didn't want to have to build my own system if I could use an external service so I decided to give Disqus a go. It was very simple to get up and running at first.

All I had to do was bung some js code into the blog content and give each block a unique indentifier for which I used the blog title. I simply used the model in the Razor view to pass in the title:

var disqus_identifier = '@post.Title';

Unfortunately I was seeing a lot of errors in the browser console. I did some research and for a while gave up and removed Disqus. However, I finally came across this helpful repo which showed me a code sample which enabled me to fix it like this:

<div id="disqus_thread"></div>
<script>
    var disqus_shortname = 'myblog'; // required: replace example with your forum shortname
    var disqus_identifier = '@ViewBag.Permalink';
    var disqus_title = '@ViewBag.Title';
    var disqus_url = '@ViewBag.Permalink';
    var disqus_script = 'embed.js';

    // here we will only load the disqus <script> if not already loaded
    if (!window.DISQUS) {
        (function (d, s) {
            s = d.createElement('script');
            s.async = 1;
            s.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
           (d.getElementsByTagName('head')[0]).appendChild(s);
    })(document);
    }

    else {
        DISQUS.reset({
           reload: true,
           config: function () {
           this.page.identifier = '@ViewBag.Permalink';
           this.page.url = '@ViewBag.Permalink';
    }
});
}
</script>

Now to see how it works in the real world.