Skip to content

j26design/Disqus-AMP-Integration

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 

Repository files navigation

Disqus AMP Integration

How to install

  1. 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 src attribute in step 3 below.

  2. 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>

Configuration

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

Required script

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>

Releases

No releases published

Packages

No packages published

Languages