How to use Disqus with AMP?

Question

I'm trying to convert an article that has Disqus comments at the bottom to AMP. To do this I'm using an <amp-iframe/>:

<div id="disqus_thread">
    <amp-iframe
        src="https://disqus.com/embed/comments/?https&base=default&version=11a9d09102788744769550f3928faf15&f=<<DISQUS ID GOES HERE>>&t_u=<<DISQUS SITE URL GOES HERE>>&s_o=default"
        sandbox="allow-same-origin allow-forms allow-modals allow-scripts allow-popups"
        layout="responsive"
        frameborder="0"
        width="600" height="500">
    </amp-iframe>
</div>

The iframe loads, and it seems to load all of its script dependencies, but nothing is shown. If you inspect the content of the iframe, Disqus has printed a message saying Disqus was unable to load. I don't know how to debug it from here. Is there something I'm missing, or should I be approaching this differently?

Also, the way a comment feed like Disqus works is to have an arbitrary height determined by the plugin. So I probably can't set a fixed height on the iframe. What do I need to do to get that to work correctly?

Possible duplicate of this one: http://stackoverflow.com/questions/34520908/disquss-on-an-amp-page-inside-an-amp-iframe — Barry Pollard, Jan 26 '16 at 17:42
@BazzaDP No, it's not a duplicate of that one. I already read it and verified that it's a different problem (that person is trying to load a local page in an amp-iframe that then loads Disqus) — Rahul, Jan 26 '16 at 18:58
I read in this [discussion](https://disqus.com/home/channel/discussdisqus/discussion/channel-discussdisqus/we_were_unable_to_load_disqus_please_help/) that your account appears to be registered to two channels, which are not designed to load anywhere other than on the Disqus.com channel page. [Here](https://help.disqus.com/customer/portal/articles/472007-i-m-receiving-the-message-%22we-were-unable-to-load-disqus-%22) are several reasons why you may be prompted with this message. — abielita, Jan 27 '16 at 02:08
@abielita Thanks, but that's not the case - this particular Disqus account has been running live for the past five years. I also set up the trusted domains to include `localhost`. If it isn't loading because some javascript variables haven't been set, I'm not sure how to fix that within the constraints of AMP (which disallows arbitrary javascript on the page). — Rahul, Jan 27 '16 at 11:33
This [link](https://help.disqus.com/customer/portal/articles/472007-i-m-receiving-the-message-%22we-were-unable-to-load-disqus-%22) might help. Maybe you have incorrectly-formatted JavaScript configuration variables. — abielita, Jan 29 '16 at 03:06

score 0 · Answer 1 · answered Oct 17 '16 at 04:12

Did you follow the instructions here? https://github.com/disqus/disqus-install-examples/tree/master/google-amp

I installed it on verdict.justia.com/ (check the amp version of any post) and it was a pretty straight forward process.

One thing to notice is that the script on the step 1 should be hosted on a different site with SSL enabled, since the source on the iframe should be https.

Additionally, did you add your domain to the Trusted Domains section? on the Disqus settings? I believe that's the issue.

Neeraj Kumar · Answer 2 · 2018-03-21T11:21:32.130

I think your src should be different. You should host your universal code file to another domain which should be accessible using https. Mainly I prefer to create another subdomain of my domain and install a new certificate for this new subdomain. The src should be that subdomain URL (e.g. https://subdomain.example.com#hash). Please refer https://github.com/disqus/disqus-install-examples/tree/master/google-amp

throughly. You can also refer to my implementation here https://www.wiki11.com/articles/touch-chesi-chandu-wiki-review-songs-rating-movie-release-date-photos

Or, You can get more references here https://github.com/disqus/disqus-install-examples/issues/3. Here, they have changed the final universal HTML which is in working condition.

How to use Disqus with AMP?

2 Answers2