How to install Disqus for AMP

I’ve installed Disqus to my blog.

Comment is now available! | Toshimaru’s Blog

Official setup instruction

disqus-install-examples/google-amp at master · disqus/disqus-install-examples

Create different domain

The domain of this blog is blog.toshima.ru. Firstly, You need to create another domain (FQDN) to host Disqus HTML.

I’ve created disqus.toshima.ru and put the Disqus HTML on it (Hosted by GitHub Pages).

Disqus HTML

I made a little change to disqus_config function to build identifier, url and title values from query parameter.

<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;

        if (msg.name === 'resize' || msg.name === 'rendered') {
            window.parent.postMessage({
              sentinel: 'amp',
              type: 'embed-size',
              height: msg.data.height
            }, '*');
        }
    }
}
</script>
<script>
/**
 *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
 *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
 */
var disqus_config = function () {
    var params = new URLSearchParams(window.location.search);
    this.page.identifier = params.get("id");
    this.page.url = params.get("url");
    this.page.title = params.get("title");
};
(function() {  // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');

    s.src = 'https://{your_disqus_id}.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();
</script>

Source code: https://github.com/toshimaru/disqus.toshima.ru/blob/master/blog-toshima-ru.html

Disqus Config

Config	Description
`identifier`	Tells the Disqus service how to identify the current page. If this.page.identifier is undefined, the page’s URL will be used. The URL can be unreliable, such as when renaming an article slug or changing domains.
`url`	Tells the Disqus service the URL of the current page.
`title`	Tells the Disqus service the title of the current page.

ref. JavaScript configuration variables | Disqus

URL Format

https:{hostname}/disqus.html?id={id}&url={url}&title={title}

How to install Disqus on your AMP

Set the URL to amp-iframe src attribute value.

<amp-iframe width=600 height=140
          layout="responsive"
          sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
          resizable
          src="https:{hostname}/disqus.html?id={id}&url={url}&title={title}">
  ...(snip)...
</amp-iframe>

iframe origin error

If you use same FQDN in iframe src, you’ll get the following error.

Origin of <amp-iframe> must not be equal to container <amp-iframe>…</amp-iframe> if allow-same-origin is set. See https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md for details.

What is sandbox attribute?

sadbox value	description
empty	all restrictions are applied
`allow-scripts`	Allows the resource to run scripts.
`allow-same-origin`	Treat as same origin even if different origin is specified in `src`.

ref. <iframe>: The Inline Frame element - HTML: Hypertext Markup Language | MDN

Toshimaru's Blog