Install Disqus in AMP environment

Preparations before enabling Disqus for AMP in WordPress:

  • Download and install the AMP for WordPress plug-in to the theme and configure it.
  • Prepare a new domain name to store Disqus files. The new domain can be named: disqus.EXAMPLE.com

Step 1: Build an independent html file and and place it in other domains

Note: The file must be placed on the production environment for testing.

1) Prepare a new domain name, which can be named disqus.EXAMPLE.com. You can also put the file on different domain name.

2) Open the code editor, save the following code in html format and name it amp-disqus.html

<div id="disqus_thread"></div>
<script>
    window.addEventListener('message', receiveMessage, false);
    function receiveMessage(event)
    {
        if (event.data) {
            var msg;
            try {
                msg = JSON.parse(event.data);
            } catch (err) {
            // Do nothing
        }
        if (!msg)
            return false;
        // Automatically load the height of the comment.
        if (msg.name === 'resize' || msg.name === 'rendered') {
            window.parent.postMessage({
              sentinel: 'amp',
              type: 'embed-size',
              height: msg.data.height
          }, '*');
        }
    }
}
// Get the value of the page url.
function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
// Call a comment via the page url & the page identifier
var disqus_config = function () {
    this.page.url = decodeURIComponent(getQueryVariable("url")); 
    this.page.identifier = this.page.url; // After many tests, only the page url equals the page identifier for the comments to take effect.
};
    (function() {
        var d = document, s = d.createElement('script');
        s.src = '//EXAMPLE.disqus.com/embed.js'; // EXAMPLE needs to be changed to your disqus shortname.
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

3) Put the saved html file under the domain name path prepared in the first step (custom path):

 disqus.EXAMPLE.com/amp-disqus.html

Step 2: Add script to AMP

1) Find the file, the path is as follows:

\wp-content\plugins\amp\templates\html-start.php

2) Copy the code snippet below:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

3) Paste the code into the <head> of your header file.

Step 3: Show the Disqus

1) Find the file, the path is as follows

\wp-content\plugins\amp\templates\meta-comments-link.php

2) Copy and paste the code below to replace the original comment link displayed.

<amp-iframe width=600 height=140
     layout="responsive"
     sandbox="allow-scripts allow-same-origin allow-modals allow-popups"
     resizable
     src="https://disqus.EXAMPLE.com/amp-disqus.html?url=https://www.EXAMPLE.com<?php echo wp_make_link_relative(get_permalink()); ?>">
    <div overflow tabindex=0 role=button aria-label="Read more"></div>
</amp-iframe>

All done. You can check whether the comment is vaild. It’s working for me.