Webdesign Sopelnik Logo
Programming

Adding comments to your Astro blog with Disqus

Artur Sopelnik •
#disqus#astro

Comment functionality allow your users to share their thoughts on your pages, products or topics and can be the beautiful beginning of an engaged community surrounding your website.

1) How to Add Disqus to Your Website

  1. Go to Disqus.com and create an account
  2. Click I want to install Disqus on my site
  3. Enter the name of your business and the category that best describes it
  4. Select your preferred package. Basic would be free.
  5. Click to use Universal Code for installation
  6. Copy the path to embed.js from Step 1 to your clipboard.
Copy the path to embed.js for Astro

2) Creating a comment component

We create a Astro component called disqus.astro with the following content:

<div id="disqus_thread"></div>

<script is:inline>
    if (!window.DisqusWidget) {
        window.DisqusWidget = {
            overwriteGlobalSelectors: function () {
                window.$disqus = document.querySelector('#disqus_thread')
            },
            init: function () {
                this.overwriteGlobalSelectors()
                this.addListeners()
                this.initDisqus()
            },
            addListeners: function () {
                // After language switched
                document.addEventListener('astro:after-swap', () => {
                    this.overwriteGlobalSelectors()
                    this.initDisqus()
                })
            },
            initDisqus: () => {
                // early escape if $disqus not exists
                if (window.$disqus === null) {
                    return
                }

                // Reset DISQUS, Rather than loading new embed.js
                if (window.DISQUS) {
                    window.DISQUS.reset({
                        reload: true
                    })
                    return
                }

                (function () { // DON'T EDIT BELOW THIS LINE
                    const d = document, s = d.createElement('script');
                    s.src = '[PATH_TO_EMBED_JS]';
                    s.setAttribute('data-timestamp', String(+new Date()));
                    (d.head || d.body).appendChild(s);
                })();
            }
        }

        window.DisqusWidget.init()
    }
</script>

<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
    Disqus.</a></noscript>

Please replace PATH_TO_EMBED_JS with your path to embed.js and if view transitions are not used in your project, please remove the listener astro:after-swap above and use the code directly.

addListeners: function () {
    // After language switched
  this.overwriteGlobalSelectors()
  this.initDisqus()
},

Have fun with it! And feel free to leave a comment.

← Blog