Skip to content

Instantly share code, notes, and snippets.

Embed
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](https://github.com/novaugust/novasper). 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?
```html
<style>
#disqus_thread {
width: 80%;
max-width: 710px;
margin: 3rem auto 0;
}
</style>
```
4. 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).
```html
<!-- 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.
@paulwellnerbou
Copy link

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/)

@lorentzca
Copy link

Thank you very much!!!

@kopax
Copy link

kopax commented Oct 27, 2020

Is this outdated? Now ghost is 3.0 and casper is 3.1.1

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