Using Disqus
Testing Disqus comments on the blog. This is about how I ended up using Disqus for comments on the blog.
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.