Read MoreThe best VPS hosting starts from $5 per month!

How To Add Disqus Comment To Your Ghost Blog

When it comes into Ghost blogging platform, Disqus is the most recommended commenting platform, I’ve also added Disqus to my ghost blog. If you own a ghost powered blog and want to integrate Disqus commenting system within your blog, Here is my simple and quick instructions to do that within 5 minutes or less.

Adding Disqus To Ghost Blog

You know that, Ghost platform still on the early stage and It doesn’t have built in commenting solution. That’s why you need to implement an 3rd party commenting platform like Disqus or Livefyre. By the way, I think Disqus is better than Livefyre and any other commenting system out there. That’s why I recommend Disqus for ghost blog.

Okay! As I promised, By following my instruction, You will be able to integrate Disqus to your ghost blog within 5 minutes or less. So why Waiting, Go ahead to the instruction.

Signing up for an Disqus account

The very step is signing up for an disqus account and you know it’s free. Just head over to disqus https://disqus.com/ and create a new account.

create an disqus account

Once you successfully signed up for a Disqus account, You will need to create a website profile with unique Disqus profile URL. To do that, Click on the “Add Disqus to Your Site” from the top menu bar.

Disqus Site Profile

After that, You need to grab the source code from Disqus and place inside your Ghost theme.

Actually, There is no quick click method to implement Disqus to your ghost blog. You must insert Disqus source code to enable Disqus comments to your Ghost blog. Also some premium ghost themes has built-in Disqus enabled, Where you just need to input your Disqus short name. And If you are using the default Casper theme or any other theme that doesn’t has built-in Disqus comments functionality, You need to follow the instructions below.

Integrating Disqus To Your Ghost Theme

Once you successfully created your site profile, Now you will be asked to grab and insert Universal Source code to your ghost.

Choose universal code

Hit on the “Universal Code” and Disqus will provide you a source code like this:

<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'techiesmith'; // required: replace example with your forum shortname

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

Now You’ll have to place the source code where you want Disqus to be load within your ghost blog. To place the source code or display Disqus comments after each blog post, Follow the instructions:

Now locate the active Theme’s post.hbs file. If you are using the default theme, Then The file is located here ghost-installation-directory/content/themes/casper/post.hbs. Edit the post.hbs file with your preferred editor.

Once the post.hbs file is opened in your SSH client, Now find the closing footer</footer> tag within the file and paste the “Disqus Universal Source Code” right before the closing footer </footer> tag as shown below:

</section>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'techiesmith'; // required: replace example with your forum shortname

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</footer>

</article>

</main>

That’s It! Now restart ghost service and revisit your blog to see how Disqus appears.

Display Disqus Comment Count To Your Ghost Blog (Optional)

So, Now you have Disqus comments enabled on your Ghost blog, And here Is how to display comment count. This is an optional configuration, And If you want to add comment count then follow the instructions and If you don’t want to add another script, Just ignore this.

Okay! To add Disqus comment count, Open the default.hbs file, That you can find on ghost-installation-directory/content/themes/casper/default.hbs. Open the default.hbs file with your preferred editor and paste the comment count source code from Disqus universal code grabber page.

Display comment count

Also make sure that You have placed the Comment count source code right before closing body tag </body>.

Now, Open loop.hbs file from your-ghost-installation/content/themes/casper/partials/loop.hbs and add the following code where you want to display comment count:

<a href="{{url}}#disqus_thread">Comments</a>

I recommend and used this snippet right before closing the </footer> tag. So the final code should be look like:

<footer class="post-meta">
{{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="Author image" nopin="nopin" />{{/if}}
{{author}}
{{tags prefix=" on "}}
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</article>
{{/foreach}}

Now restart ghost service to apply the changes and visit your blog to see how the comment count and Disqus comment appearing on your Ghost powered blog.

Hope you find this Tutorial useful, And you have successfully added Disqus commenting system to your ghost blog. Now, It’s your turn, Share your experience in the comments below.

One Comment

Leave a Reply