Geek Answers Handbook

How to use Disqus with AMP?

I am trying to convert a Disqus commentary article below to AMP. For this, I use <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>

It loads the iframe and seems to load all of its script dependencies, but nothing is displayed. If you check the contents of the iframe, Disqus printed a message stating that Disqus could not load. I don't know how to debug this from here. Is there something that I am missing, or should I approach it differently?

In addition, a way to submit a comment, such as Disqus, is to have an arbitrary height defined by the plugin. Therefore, I probably cannot set a fixed height on the iframe. What do I need to do to work correctly?

+6
source share
2 answers

Do 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 entry) and it was a pretty simple process.

It should be noted that the script in step 1 should be hosted on another site with SSL enabled, since the source of the iframe must be https.

Also, have you added the domain to the Trusted Domains section? on Disqus settings? I believe the problem.

Trusted Domains section

0
source

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

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

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

0
source

More articles:


All Articles