disqus wont load in localhost, already in development mode

Question

No matter what I do I can't make disqus work in development mode.

The disqus account is new, there is no content in it.

In my site header I have

<script type="text/javascript">
var disqus_developer = 1;
var disqus_url = 'example.com';
</script>

Not the real domain, but since I'm using it in localhost it should work nonetheless, right?

Then I have right at the end of my content:

 <div id="disqus_thread"></div> 
<script type="text/javascript">
/* <![CDATA[ */
var disqus_shortname = 'mywebsiteshortname'; // the real thing, this is just for show

/* * * 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="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="//disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

And on discus I have:

Same URL as in my settings, and same shortname.

But despite that disquss wont load:

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

Troubleshooting guide didn't help at all.

Is this the expected behavior, or is there a way so I load and use comments when in localhost and developer mode, to properly test and configure it?

Answer 1

It looks like the issue is with your disqus_url, this needs to be an absolute URL. Using var disqus_url = 'http://example.com' should work

Additional note: You don't need to use 'disqus_developer' anymore, it will load locally without any extra configurations. If you're setting a trusted domain in your site settings, just make sure to add localhost to the list.

Answer 2

Update:

Disqus has made some changes, and I was not able to add localhost as a trusted domain. From what I have heard, they also no longer support disqus_developer = 1.

The Simple solution:

Remove all trusted domains from Disqus during development. From what I can tell, removing all trusted domains is the same as allowing any domain to access your Disqus.

The Advanced Solution:

The simple solution presents some security issues, which this solution solves. This example uses Sinatra, but any backend language or library should work. It is not a good idea to use the same Disqus for development and production. In the application controller, add this block.

class ApplicationController < Sinatra::Base
  before do
    @production = Sinatra::Application.production?
    @disqus_url = @production ? "production.disqus.com" : "development.disqus.com"  
  end
end

Create two sites in Disqus and change production.disqus.com and development.disqus.com to match your Disqus URLs acordinly.

In your view somefile.erb, add the following code where you want your comments.

<div id="disqus_thread"></div>
<script>

  var disqus_config = function () {
    this.page.url = "<%= request.url  %>";
  };

  (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = '//<%= @disqus_url %>/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<script id="dsq-count-scr" src="//<%= @disqus_url %>/count.js" async></script>

Important for Security: In your Disqus under admin/settings/advanced/, add your website URL to your trusted domains for your production Disqus, which will restrict access from other domains. Don't add any trusted domains to your development Disqus so it will run on localhost. This will also keep all your comments separate for your development and production websites.