Michael Kant

Adding Disqus Comments to Jekyll

0 Comments | 1 Min Read

Adding Disqus to Jekyll is a very straight-forward process.

  • Create a new file under _includes named disqus.html
  • Paste your universal embed code to the newly created disqus.html. It should look something like this:
<div id="disqus_thread"></div>
<script>
     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://[SHORTCODE].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>
  • Make sure to make the following changes to the above script:
    • Replace the PAGE_URL with the URL for your website. eg http://michaelkant.com
    • Replace the PAGE_IDENTIFIER with "{{ page.id }}"
    • Replace SHORTCODE with the shortcode for your site, as set on disqus.com
  • At the bottom of your _layouts/post.html template, paste the following line. The placement of this line is where the Disqus comments will be rendered.
    • {% include disqus.html %}

That’s it, easy as pie.