-
Download amp.html and host the file on a different domain than where you intend to load Disqus. You can do this for free with Amazon Cloudfront. You do not (and should not) need to change the amp.html file for the integration to work. The URL location of this file will be the URL that you will provide to the
srcattribute in step 3 below. -
Place the following code anywhere within the
<body>where you would like the comments to appear:<amp-iframe width=600 height=140 layout="responsive" sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms" resizable src="https://abc123.cloudfront.net/amp.html?shortname=museseo&fontBodyFamily=sans-serif&fontLinkColor=03A9F4&url=https://www.j-26.com&identifier=12345"> <div overflow tabindex=0 role=button aria-label="Disqus Comments">Disqus Comments</div><!-- Required by AMP as a fallback as pointed out here: https://github.com/disqus/disqus-install-examples/issues/3#issue-177942264 --> </amp-iframe>
Replace the URL in the example (https://abc123.cloudfront.net/amp.html) with the URL where you are hosting the amp.html file. The src URL provides 5 configurations. Only replace the text that comes after =.
| Option | Description |
|---|---|
shortname |
Your disqus shortname. |
fontBodyFamily |
The main font family of the page. Disqus provides 2 options: sans-serif or serif. Or replace with inherit. |
fontLinkColor |
The hyperlink font color. (You must replace with a hex value). |
url |
The URL that users will be directed to if they click on a link to the discussion. This will likely be the canonical URL of the AMP page. |
identifier |
A unique identifier for the discussion. This can be used to keep the comments on the AMP page in sync with the comments on the canonical page. Read more |
Lastly, add the required script tag to the <head> of your amp pages to enable the amp-iframe tag. Read more:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>