Solving the "We were unable to load Disqus" Error

TLDR: Make sure you're setting the category_id field in the Disqus load script to a valid value, or just don't use it at all.

Problem

While migrating my blog over to GatsbyJS from Ghost, I ran into this peculiar error when trying to load Disqus.

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide

This particular error was quite annoying because it gave no information on what actually went wrong. And I couldn't ask Disqus directly for help or what happened; that's only for paid users. As a dirty freeloader free user, all I get is a troubleshooting guide and Google :smiley:.

In the troubleshooting guide, there are 9 listed reasons as to why Disqus failed. Unfortunately for me, neither the guide nor Google was much help with my issue. It seemed no one had run into (or at least wrote about) what was causing my particular issue before. So, I was on my own here.

Solution

After scouring the Disqus developer documentation, I came across an article about the javascript configuration variables for the Disqus load script. What particularly caught my eye was the category_id field. According to the Disqus documentation, the category_id field:

Tells the Disqus service the category to be used for the current page. This is used when creating the thread on Disqus for the first time.

More interestingly, the docs go on to say the following about the field:

If you try using a category ID that hasn't been created within your forum settings, you'll receive a 400 Bad Request error.

Now here is a possible reason to why Disqus can't load!

When making this blog, I used the gatsby-material-starter, which uses the react-disqus-comments npm package to load Disqus. Sure enough, the starter was setting the category_id to post.category_id!

 <CardText expandable={!expanded}>
          <ReactDisqusComments
            shortname={config.disqusShortname}
            identifier={post.title}
            title={post.title}
            url={url}
            category_id={post.category_id}
            onNewComment={this.notifyAboutComment}
          />
 </CardText>

I figured that the post.category_id was an invalid value since I hadn't set what were the valid values on the Disqus end. Once I commented out the category_id field, Disqus was able to load! So in my case, category_id was the culprit to my problem.

So long story short, if you don't need to use Disqus categories, remove the category_id field from your load script. Disqus will just default the value to the id for the "General" category which exists for all forums.

One thing to note is that this issue only occurs for new pages. Once Disqus is able to load on the page, you can set category_id to whatever you want, regardless if its a valid value or not. Disqus ignores the value after its created the thread for the page for the first time.

Using the category_id field

If you actually want to use the category_id field, then its not going to be as simple as going to the Disqus dashboard and setting the valid values there. According to the Disqus documentation:

Categories are primarily used with our API for results filtering; categories are not used for moderation (e.g., to filter comments by category in the moderation panel). New categories can be created with our categories API endpoints.

So if you really want to use this feature, you're going to have to manually interrogate their API (don't ask me why this isn't just available through the dashboard).

If you want to see all of your current categories, you can do a GET request to the categories/list endpoint. You'll need to provide your Disqus shortname as well as your public API key. You can get an API key by registering an application with Disqus.

If you haven't done anything with Disqus categories before, then you'll get a response back that looks something like this:

 {
  "cursor":{
    "prev":null,
    "hasNext":false,
    "next":"1:25:0",
    "hasPrev":false,
    "total":null,
    "id":"1:25:0",
    "more":false
  },
  "code":0,
  "response":[
    {
      "id":"1",
      "forum":"bobross",
      "order":0,
      "isDefault":true,
      "title":"General"
    }
  ]
}

In general, the default Disqus forum comes with just the "General" category. The id field seems to be unique to each forum, so you'll have to find out through the API what your unique id is.

If you want to add new categories, then you can use the categories/create endpoint. Refer to the Disqus API documentation for more information.

Summary

If you use category_id in your Disqus load script, then make sure that you're using a valid value! Otherwise Disqus will not load (or tell you that this was the reason).

If you don't care to use the categories feature, then just don't give category_id a value. Disqus will default category_id to the id of the "General" category which exists for all forums.

If you do want to use category_id, then you'll have to use the Disqus API to find out what your category ids are and to create new categories.

Hopefully this article provides you with a solution to your Disqus issue or at least rules out category_id as the problem. :smile:

If you found this article to helpful, please leave a comment below! Feedback is always appreciated.

comment

Comments

arrow_back

Previous

How to Debug Entity Framework Migration Errors

Next

How to Debug Entity Framework Migration Errors
arrow_forward