/ ghost

[ghost] Config Disqus in Ghost 1.x

Recently I upgraded ghost to 1.x, the migration was easy but it really cost me some time when I reconfig disqus under the default casper theme.

The instruction mentioned in the ghost official guide was not working at least in my case. There are some mistake in the guide but there are also other reasons out of it, don't worry, I'll try to explain it in this post.

Create Disqus Account

As said in the guide, first you need to register a disqus account.

Then create a site in the disqus admin panel.

Get the Unique URL of Your Site

After this, you should see an unique url for your site, the format is like mysitename.disqus.com, like mine was xhyumiracle.disqus.com.

If you already finished this before, you could find the url by visit disqus admin panel and choose your site at the top of the page.

Add Disqus Comment Panel in Posts

locate post.hbs

According to the guide:

From within your theme files, locate the post.hbs file. If you do not already have a copy of your theme to work with, you can download a copy of your active theme by going to Settings > Design from the admin menu, and clicking "Download" next to the active theme.

Basically, you gonna run the following commands if you are not familar to linux cmd. (replace the /var/www/ghost part if you installed ghost in another directory)

$ cd /var/www/ghost/
$ find . -name post.hbs
...
./versions/1.24.3/content/themes/casper/post.hbs
$ vi ./versions/1.24.3/content/themes/casper/post.hbs

NOTE: change vi to any editor that you are comfortable with, like nano or vim.

searching for the important lines.

Searching for something like <section class="post-full-comment">, you should see a sentance like // if you want to add comment, here is a good place. (I've deleted this line in my site, so I just type it here by memory).

Good, then delete these lines including <section ...>, </section> and //if....

copy and paste the embeded code

Visit disqus universal embeded code, copy it, then paste it in the place where you just deleted those stuff.

modify variables.

According to the guide:

Change PAGE_URL to {{url absolute="true"}}
Change PAGE_IDENTIFER to ghost-{{comment_id}}

This instruction is almost correct except it missed the double quotes.

UPDATE: ghost staff has updated it after I mentioned it in the forum, so now it's correct.

What you actually do is:

  • Change PAGE_URL to "{{url absolute="true"}}"
  • Change PAGE_IDENTIFER to "ghost-{{comment_id}}"

PS: The 4 double quotes in the first line do work here because things between {{ }} was explained by ghost first, then replace it and assemble to the final page then send to the browser.

remove comments

Make sure you removed the /* and */ surrounding the var disqus_config = ..., otherwise it won't work.

modify s.src

You may saw this line:
(function() { // DON'T EDIT BELOW THIS LINE

So now we are going to EDIT something BELOW THIS LINE.

Change the value of s.src to the unique url of your site.
Like mine is s.src = 'https://xhyumiracle.disqus.com/embed.js';

save and done

Already, save it, restart the ghost by ghost restart in the root directory of ghost (/var/www/ghost)

Add Comment Count in Post Cards

You might noticed that it says How to display comment count in the disqus guide, right, here we are talking about how to use it.

locate the post-card.hbs

Usually, it stays at versions/1.24.3/content/themes/casper/partials/post-card.hbs

cd /var/www/ghost
vi versions/1.24.3/content/themes/casper/partials/post-card.hbs

Copy and paste the embeded code

Taking some user friendly consideration, the final code I use is:

<script id="dsq-count-scr" src="//uniquesiteurl.disqus.com/count.js" async></script>
<a class="reading-time" href="{{url}}#disqus_thread" data-disqus-identifier="ghost-{{comment_id}}">Comments</a>

NOTE: Replace the uniquesiteurl with your site url, like mine is src="//xhyumiracle.disqus.com/count.js"

save and done

Save it, restart ghost again, then refresh your site, check the post list (post cards) in the main page, the 0 comments should be displayed on each card.

That's it, hope you enjoy it. See you in the next post.

Please leave a comment if you like or dislike it.

[ghost] Config Disqus in Ghost 1.x
Share this