Adding Disqus to Ghost
by John Vincent
Posted on March 1, 2017
This is part of a series of discussions regarding Deploying to a Digital Ocean Droplet. For more details, please see Overview of johnvincent.io website
Adding Disqus to Ghost
Create and Configure Disqus Account
www.disqus.com
Sign up for an account.
Create a new site
- Website name:
ghost.johnvincent.io
- Category: Tech
- Create Site>
Got it. Let's get started.
- Ghost
Ghost install instructions:
- View the Universal Embed Code.
Paste the Disqus script anywhere between the opening {{#post}} and closing {{/post}} - where you'd like the Disqus comments to load. May need to remove any already existing code.
vi {ghost-install}/content/themes/Masonry-Ghost-Theme-master/post.hbs
- Remove the /* and the */ bits of code.
- Replace this.page.url = PAGE_URL;, with this.page.url = '{{url absolute="true"}}’;
- Replace this.page.identifier = PAGE_IDENTIFIER; with this.page.identifier = 'ghost-{{id}}';
became
var disqus_config = function () {
this.page.url = '{{url absolute="true"}}';
this.page.identifier = 'ghost-{{id}}';
};
Adding a Comment Count
vi {ghost-install}/content/themes/Masonry-Ghost-Theme-master/default.hbs
Place the following code before your site's closing </body> tag.
Inserted after footer tag and before script tags.
<script id="dsq-count-scr" src="//ghost-johnvincent-io.disqus.com/count.js" async></script>
Update your post-meta details
Next, you'll need to open and locate the post-meta information that displays on the homepage of your theme.
In the Casper theme, the post-meta information is located in the block of code on the loop.hbs file
(located in the partials directory of the theme.
For my theme, the post-meta information is located in post.hbs
and partials/loop.hbs
vi {ghost-install}/content/themes/Masonry-Ghost-Theme-master/post.hbs
Insert the following code after time tag and before /footer tag:
<a href="{{url}}#disqus_thread”>Comments</a>
vi {ghost-install}/content/themes/Masonry-Ghost-Theme-master/partials/loop.hbs
Insert the following code after time tag and before /footer tag:
<a href="{{url}}#disqus_thread”>Comments</a>
Restart Ghost
The comments and counts should now be appearing.
Backup
Backup the useful files.