Skip to content

Instantly share code, notes, and snippets.

@novaugust
Last active October 9, 2023 14:12
Show Gist options
  • Save novaugust/aa73f696a72f2a2dacce85c424e12558 to your computer and use it in GitHub Desktop.
Save novaugust/aa73f696a72f2a2dacce85c424e12558 to your computer and use it in GitHub Desktop.
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

@GyohoonLIm
Copy link

Thank you! casper 5.7.0 Apply!!!!!!!

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