Last active
October 9, 2023 14:12
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you! casper 5.7.0 Apply!!!!!!!