Add Disqus to AMP site

Now I’m going to add Disqus comments to my AMP site. Disqus already supports this and has an official guide about it. The whole process is smooth with only few exceptions.

  • You need to have a separate domain. This is not an issue for me. If you don’t have an extra domain, you can host your disqus HTML file in GitHub or other places. Or you can use a universal HTML file as discussed in this GitHub issue.
  • An extra element with overflow needs to be added as child of <amp-iframe>.
1
2
3
4
5
6
7
<amp-iframe width=600 height=140
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
resizable
src="https://<yousite>.com/disqus_amp.html#<%= page.disqusId || page.slug %>">
<div overflow>Comments</div>
</amp-iframe>
  • The hash of the Disqus URL should be unique. My site is generated using Hexo, so I use page.disqusId || page.slug as the hash.
Comments