If you're using the Ghost blogging software and you want to enable your readers to comment on your posts, you don't have that many options.

The most popular one is Disqus. It's a third party site, which allows you to embed their commenting widget right under your posts. While it's very comfortable to setup and maintain, it harms the privacy of your visitors by collecting data as soon as their browsers are loading the script.

A better approach is to lazy-load the Disqus widget only when your reader has demand for it. We're going to realize this with a button, which needs to be clicked in order to load Disqus.


1. Setup

I assume, you already have your account setup. If not, please follow the instructions given here.

2. Doing the magic

Instead of embedding the Disqus code as officially documented, we'll load their script only after clicking a given button. In the post.hbs of the Casper theme insert the following code right under the closing </article>:

{{!-- Disqus --}}
<a id="show-comments">
    Show comments (Disqus)
</a>
<div id="disqus_thread"></div>
<script>
    document.querySelector('#show-comments').addEventListener('click', function () {
        this.classList.add('hidden');
        var disqus_config = function () {
            this.page.url = "{{url absolute="true"}}";
            this.page.identifier = "ghost-{{comment_id}}";
        };

        (function() {
            var d = document, s = d.createElement('script');
            s.src = 'https://example.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    });
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Don't forget to replace example with the short name of your site. You can find that information at the Disqus Admin.

3. Theming

We need the button to fit our page layout and to hide once it got the hidden-class. Open assets/css/screen.css and add the following rules:

#disqus_thread {
    padding: 0 4vw;
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
}

#show-comments {
    padding: 0 4vw;
    max-width: 1040px;
    width: 100%;
    padding: 20px 0;
    border: 1px solid var(--pink);
    margin: 0 auto;
    display: inline-block;
    text-align: center;
}
#show-comments:hover {
    cursor: pointer;
}

#show-comments.hidden {
    display: none;
}

4. Update Theme

Finally, we only need to yarn zip the modified theme and upload it to Ghost. You can see the result below - feel free to leave a comment :)