/ Javascript & Node.js

Add Disqus comments to your Ghost Blog v1.x

Comments

1) Create an account on Disqus

2) Upload a theme in your ghost theme directory

cd /your-ghost-directory/themes/
wget https://github.com/TryGhost/Casper/archive/2.1.9.tar.gz
tar -xzvf 2.1.9.tar.gz
rm 2.1.9.tar.gz

3) Modify the theme by adding Disqus comments code

  • Open the file post.hbs
nano /your-ghost-directory/themes/post.hbs

Copy and paste the Universal Embed Code from your Disqus account juste after the </footer> markup.

Replace PAGE_URL and PAGE_IDENTIFIER with these two values :

this.page.url = "{{url absolute="true"}}";
this.page.identifier = "ghost-{{comment_id}}";

And add these line inside the <header></header> markup:

<header class="post-full-header">
    <section class="post-full-meta">
    <time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
                    {{#primary_tag}}
    <span class="date-divider">/</span> <a href="{{url}}">{{name}}</a>
                    {{/primary_tag}}
    </section>
    <h1 class="post-full-title">{{title}}</h1>
---------------------------------- add these line -------------------------------
    <a href="{{url absolute="true"}}#disqus_thread" data-disqus-identifier="ghost-{{comment_id}}">Comments</a>
---------------------------------------------------------------------------------
</header>
  • Open the file default.hbs
    Juste after the markup {{ghost_foot}} add these code:
<script type="text/javascript">
  var disqus_shortname = "your-disqus-shortname";

  /* * * DON'T EDIT BELOW THIS LINE * * */
  (function () {
    var s = document.createElement('script');
    s.async = true;
    s.id = 'dsq-count-scr';
    s.type = 'text/javascript';
    s.src = '//' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
  }());
</script>

Don't forget to replace your-disqus-shortname with your own disqus shortname !

  • Open post-card.hbs
nano /your-ghost-directory/themes/your-template-name/partials/post-card.hbs

Add these line inside the footer:

<footer style="text-align:center;"  class="post-card-meta">
------------------------------ add these line ----------------------------------
    <a style="color:black;" href="{{url absolute="true"}}#disqus_thread" data-disqus-identifier="ghost-{{comment_id}}">Comments</a><br/>
---------------------------------------------------------------------------------
    {{#if author.profile_image}}
        <img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" />
    {{/if}}
    <span class="post-card-author">{{author}}</span>
</footer>

Restart Ghost and everything should work fine :-)

docker-compose down
docker-compose up -d
  • If you want to customize comments links appearance, go to your disqus administration section :
    your-domain.disqus.com/admin/settings/community/

Edit and add these values :

Community & Comments Configuration
Comment Count Link

Zero comments:  &nbsp;
One comment: 1 Comment
Multiple comments: {num} Comments