Unable to load Disqus on blog posts

I had previously used Disqus for post comments on my Graffiti blog and I wanted to continue doing so for the new Gatsby blog using react-disqus-comments. The urls for posts were basically unchanged so it seemed like there should not be any migration issues. And it all worked fine for the most part. But I did have some issues with a few of the older posts showing a “We were unable to load Disqus.” message. And the same for all of the new posts that I had created.

I read through everything in the Disqus knowledge base and looked through everything I could find from Google searches and nothing seemed to work until…

Using Disqus’ Migration Tools

By going into the Disqus admin and taking a look at Discussions I found some of the issues that were causing the problem.

Unfortunately I made some mistakes in the past when having multiple domain names pointed to my main site. When I would retire a site or application, like RandomTweets, I would shut down the site and point the domain to my blog. I should have used some url rewriting to apply redirects to danhounshell.com for all those other domain. Because of this I found in the Disqus admin that I had discussions listed under various other domain names in addition to danhounshell.com. Using the Disqus migration tools I was able to re-crawl the site and use their URL mapper to point all those discussions to the proper urls.

After about a day I found that Disqus was working properly on all the old blog posts.

Setting category_id

However, I still had the same “We were unable to load Disqus” issue with all my new posts. The culprit was the categoryid_ setting for react-discus-comments. Originally when adding the configuration I set the category_id to “blog” because that is the category of all my posts. When doing my original Google searches to figure out the issue I found something about that field needing to be an integer so I changed it to 1. But that did not help. Finally I figured out the issue by copying the URL that is generated in the HTML for the Disqus iframe. It should look something like this:

https://disqus.com/embed/comments/?base=default&t\_i={ the unique id }&t\_u={ url to the post }%2F&t\_t={ post title }&t\_c={ the category id }#version={ more stuff goes here }

I then pasted that into a browser and removed querystring params one by one until the error message went away and the Disqus commenting UI was displayed.. And the culprit was: category_id. After a little bit of further reading it seems that categories are something you can implement via the Disqus API by adding categories and then identifying the category id for the post. But I am just using a “default” implementation of Disqus, I do not have any categories. So simply removing the category_id setting from my markup fixed everything right up. [I suspect that I do have categories, just the “General” default category, and using a category_id = 0 might have worked too.] 

Hopefully this post helps others that run into the same issue. If it does then leave me a comment via Disqus below or give me a shout on Twitter: @danhounshell on Twitter.