Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Adding Disqus to a Ghost Blog running a Casper-based theme without editing any files

I noticed that there weren't any writeups for using code injection to add Disqus comments to a ghost blog. Everything assumes you're comfortable with editing your theme (and thus being responsible for maintaining a fork, urk).

So, I used the steps below to add to Disqus comments to my blog running a Casper fork. If your theme varies wildly from Casper, you'll be able to get by just by updating the css selectors in the javascript. If all that is a bit much for you, leave a comment and a link to your site and I'll give you what your versino of the code would be.

Code Injection to the rescue

So! Here's the scoop

  1. Set up your disqus. You're a grownup, you'll figure it out.
  2. Go to your blog admin's Code Injection section (example.com/ghost/settings/code-injection/).
  3. Add this code to the Blog Header section to style up your disqus. Don't want it getting too wide now, do we?
<style>
    #disqus_thread {
        width: 80%;
        max-width: 710px;
        margin: 3rem auto 0;
    }
</style>
  1. Add this code to the Blog Footer section.

Make sure to replace the disqusSite value with whatever your disqus subdomain is (for example, mine's novaugust.disqus.com so I put 'novaugust' in there).

<!-- disqus -->
<script>
    // Only inject comments if you're on a post page.
    var article = $('.post-template main article');
    var disqusSite = 'YOUR-DISQUS-SUBDOMAIN-HERE';  // Yo! You gotta customize this bit to you!
    if (article.length) {
      article.after('<div id="disqus_thread"></div>');
        // this is the code you get from disqus
        (function() {
            var d = document, s = d.createElement('script');
            s.src = '//' + disqusSite + '.disqus.com/embed.js';
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
        })();
    }
</script>

Caveat

This won't provide the unique-ifying post.id to disqus. If that's a concern for you, you'll just have to update your theme.

Thanks for this one... wish I had found it earlier, just did almost the same (http://paul.wellnerbou.de/2017/09/23/using-disqus-with-your-managed-ghost-blog/)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment