What is Disqus
Disqus (pronounced discuss) is a worldwide blog comment hosting service for web sites and online communities that uses a networked platform. It offers add-on tools for site owners to power discussions, increase engagement, and earn revenue.
Disqus is directly integrated with popular services, like WordPress, Blogger, Tumblr, Squarespace, TypePad, Movable Type, Drupal, Joomla, Wix, Weebly, Strikingly, Jekyll, Ghost, HubSpot, Shopify, Adobe Muse, Jimdo, Postach.io
Get started on disqus.com
First things first, you need to register your site on disqus.com. Follow the install instructions and choose the platform as Jekyll, the goal of setting up on disqus.com is to get the universal embed code and identifier of your website registered on disqus.com.
The identifier of your site, usually a shortname used on disqus.com, is the unique identifier assigned to a Disqus site. All the comments posted to a site are referenced with the shortname. The shortname tells Disqus to load only your site’s comments, as well as the settings specified in your Disqus admin. Note that your website shortname cannot be changed once it is created. Choose your shortname wisely.
What’s a shortname - Disqus help tells you more about how to use your shortname.
Install Disqus on Jekyll
Jekyll Installation Instructions - Disqus help gives a brief introduction on how to install Disqus on Jekyll.
First, you will get the universal embed code as shown below:
{% if page.comments != false and jekyll.environment == "production" %}
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = '{{ absolute_url }}';
this.page.identifier = '{{ page.url | absolute_url }}';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://{{ site.disqus.shortname }}.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" rel="nofollow">comments powered by Disqus.</a></noscript>
{% endif %}To use this snippet, we need to create a file in the _includes directory called disqus_comments.html that contains the universal embed code.
Next, we need include this new javascript file in our default layout. In _layouts/post.html, add
{% if site.disqus.shortname %}
{% include disqus_comments.html %}
{% endif %}
To enable it, add the following lines to your Jekyll site YAML Configuration file _config.yml:
disqus:
shortname: my_disqus_shortnameComments are enabled by default and will only appear in production, i.e., JEKYLL_ENV=production
If you don’t want to display comments for a particular post you can disable them by adding comments: false to that post’s YAML Front Matter.
Display comment count
If you want a way to display the comment count for each page with comments, on home page. There is an easy to use JavaScript code snippet which displays the number of comments for pages with Disqus embedded.
First, paste the following is the code at the bottom of your layout file of the home page _layouts/default.html, right before the closing </body>.
<!-- Disqus display comment count -->
<script id="dsq-count-scr" src="//{{ site.disqus.shortname }}.disqus.com/count.js" async></script>
Then, on the home page _layouts/home.html, append #disqus_thread to the end of each article URL which appears inside the href tag for the article comments link. This will tell Disqus which links to look up so it can return the correct comment count.
<a href="https://lyk6756.github.io{{ post.url }}#disqus_thread">0 Comments</a>
Refer to Adding comment count links to your home page - Disqus help to learn more.