Skip to content

Latest commit

 

History

History
83 lines (67 loc) · 4.33 KB

README.md

File metadata and controls

83 lines (67 loc) · 4.33 KB
Raw

Disqus for Accelerated Mobile Pages (AMP)

Disqus for Accelerated Mobile Pages (AMP) is a fast-loading, optimized Disqus experience for Google AMP compatible pages. AMP is a way to build web pages for static content that renders quickly, especially on mobile devices. The Disqus Universal Code can be implemented on an AMP compatible page.

Before you start

  • If you haven't done so already, you'll want to familiarize yourself with Google's What Is AMP? and Create Your First AMP Page.
  • Make sure you've registered your site with Disqus. Read the Quickstart Guide for more information.
  • If you have an existing site on Disqus, you can find your “shortname” in Admin > Settings > General.
  • Make sure you can host the installation code on two different domains.

How to install

  1. Create and host the following Universal Code file on a different domain than where you intend to load Disqus for AMP. This will be the URL that you will provide to the src attribute in step 3 below.

    <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') {
            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 () {
        this.page.url = window.location;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = window.location.hash; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');

        s.src = '//EXAMPLE.disqus.com/embed.js';

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

  2. Refer to the amp-iframe documentation and add the required amp-iframe script to your document's <head>. :

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

  3. Place the following <amp-iframe> element anywhere within the <body> of your AMP page. It will likely make sense to place it at the end of your article content, where ever you would your audience should engage further after reading.

    <amp-iframe width=600 height=140
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
            resizable
            src="https://example.com/amp#hash">
</amp-iframe>

  4. Replace hash with a unique identifier that represents the page where you’d like a specific thread to display. If you are loading the <amp-iframe> element on multiple pages, generate the hash dynamically for each page. The hash you provide will be used in the identifier variable in step 1. Learn more about identifiers.

  5. Add the new domain as a Trusted Domain in your Admin > Settings > Advanced.

Continue to the getting started guide.