Adding Disqus to Ghost

Adding Disqus to Ghost

by John Vincent


Posted on March 01, 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

Useful reference

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

Useful reference


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 <footer> 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.