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

This comment has been minimized.

Copy link

@paulwellnerbou paulwellnerbou commented Sep 26, 2017

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

This comment has been minimized.

Copy link

@lorentzca lorentzca commented Apr 29, 2020

Thank you very much!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.