How to Install Disqus in Amp With Hugo

Updated: , Published:

Disqus is amp compatible but to install disqus on amp page is not simple. Hugo does support Disqus out of the box but only for non-amp pages. To install disqus on amp pages there is official documentation. But its incomplete and vague. It just confused me more than actually helping me. I didn’t find any other reference or blog post explaining the install process. I had to reverse engineer someone who has implemented disqus on their website. Luckily they had source code available to public and not private. So it was easier to reverse engineer.

So its 2 step process

  1. First install disqus universal code in subdomain. e.g. in my case I installed it on https://comments.apoorv.blog
  2. Create comment partial template and add amp-iframe pointing to the subdomain

Lets begin with 1st step

You need to have created disqus account and registered your website with disqus. Then you will receive shortname for the site. It will be in address bar. When you login to disqus as admin and go to your website page then take a look at your link. It will look something like https://shortname.disqus.com/admin/. You need to insert your shortname in following code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="robots" content="noindex">
    <style>
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <title>Disqus Comments</title>
</head>
<body>
    <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 () {
            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 = 'https://INSERT-YOUR-SHORTNAME.disqus.com/embed.js';

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

The above code is taken from official documentation. So before deploying code to your subdomain please check official documentation for any changes.

This is just basic html page & I have added one extra line.

1
<meta name="robots" content="noindex">

This line tells all search engines not to index or crawl through this page. You do want to index your comments on your actual website but not any comments on your subdomain.

Now to display comments on page of your choice you can create a partial comments.html in hugo and add following code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{{ if .Site.IsServer }}{{ else }}
    <amp-iframe width=600 height=140
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
    resizable
    src="https://INSERT-YOUR-SUBDOMAIN/?id={{ .File.UniqueID }}&url={{ .Permalink }}"
    >
        <div overflow
            tabindex=0
            role=button
            aria-label="Load more"
            style="display:block;font-size:12px;font-weight:500;font-family:Helvetica Neue, arial, sans-serif;text-align:center;line-height:1.1;padding:12px 16px;border-radius:4px;background:rgba(29,47,58,0.6);color:rgb(255,255,255)"
        >
            Load more
        </div>
    </amp-iframe>
{{ end }}

So amp uses the amp-iframe to display your subdomain on your main domain website. The above amp-iframe code is also taken from official documentation. So refer to official documentation for any changes. Make sure to add correct subdomain link in amp-iframe src that we created in step 1. Here I check if this is local server or deployed on cloud server. You don’t want to create disqus comment link for local server. Also don’t forget to add following amp script on <head> for that page.

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

I don’t add this script on every page on the website because there are tons of list pages that normally don’t have comments. And normally list pages do not have amp-iframe in them.

Have you found any mistake or improvement for this post then let me know in the comments below.

Load more