Overview of adding comments in ghost themes

Ghost does not come with the ability to easily add comments. Fortunately, depending on your needs, there are several techniques for adding comments that are all pretty simple. This post will walk you through the process of adding two of the most popular third-party options: Disqus and Facebook.

Add Comments with Disqus in ghost themes

Adding Disqus comments to your Ghost site necessitates a change to your Ghost themes. The Disqus website has Ghost instructions, but these instructions tell you to update your ghost themes in time, which is not possible if you are using a hosted Ghost site and is just not a smart idea. Changes performed in this manner are easily overwritten – and hence lost – if your theme is updated. A much better way is to adjust your theme independently, as mentioned in the link above so that any changes you make – for comments or otherwise – are backed up.

Installing Disqus comments on your Ghost site is as simple as pasting the code snippet below into your theme’s post.hbs template. The only thing you need to alter is to replace the example with the name of your Disqus account. (Your Disqus account will show you exactly what this value should be.)

<div id="disqus_thread"></div>
<script>
/**
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/themeix/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://YOUR_SITE_ID.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

This code should be placed in the <div> tag with the id Disqus thread where you wish the comments to appear. If you’re using the default Casper free ghost theme, the theme will tell you where to put the code.

Lines 117 and 121 should be removed (these are HTML comments that disable the section), and line 119 should be replaced with the above code.

add comments in ghost themes

Add Comments with Facebook in ghost themes

Adding Facebook comments to your Ghost Blog is very simple. To add Facebook comments,  you’ll need a Facebook APP ID. To add Facebook comments to your blog, follow these steps:

  • Visit https://developers.facebook.com/apps.
  • Select the Create New App option.
  • Enter an App Name and select a category for the App ID.
  • Open your post.hbs file inside your theme folder and paste the below code just before the closing {{/post}} template tag.
{codecitation}<div id=”fb-root”></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=<your-facebook-app-id-here>”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div
class=”fb-comments”
data-href=”{{@blog.url}}/{{slug}}”
data-colorscheme=”light”
data-numposts=”10″
data-width=”700″ >
</div>
{/codecitation}

Sum Up

I hope, this article will help you to add comments on ghost themes in your blog. Besides, discover our most amazing collection of high-quality themes that you would certainly like to have to build any website. Click here

Leave a Comment

No Comment