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. |
This comment has been minimized.
This comment has been minimized.
Thank you very much!!! |
This comment has been minimized.
This comment has been minimized.
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
This comment has been minimized.
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/)