Disqus not loading in Jekyll Blog

Question

I am unable to get Disqus working for my Jekyll Blog. I followed the instructions on the Disqus website. I added comments to the post layout

---
layout: default
comments: true
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>

{{ content }}

{% include disqus.html %}

with disqus.html using the code generated by Disqus website

{% if page.comments %}
<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/universalcode/#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.id }}; // 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://rohit-gupta-blog.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>

{% endif %}

Here is an example of a blog post on my website post. Here is my git hub repository if it is needed.

Maybe the {% if page.comments %} condition isn't working (it's not true). Try temporarily removing {% if page.comments %} and the associated {% endif %} to verify. — Tom Faltesek
Still not working. However I can now see the script in the page source. — Rohit Kumar Gupta

Tom Faltesek Tom Faltesek · Accepted Answer · 2020-01-21T18:46:35

It looks like the page.url and page.url should be strings, but they aren't in quotes. Here's the config that is rendered on your page:

var disqus_config = function () {
  this.page.url = /blog/2020/01/15/rohit-gupta-blog-launched;
  this.page.identifier = /blog/2020/01/15/rohit-gupta-blog-launched;
};

This is likely what you want:

var disqus_config = function () {
  this.page.url = 'https://rohitkumargupta.com/blog/2020/01/15/rohit-gupta-blog-launched';
  this.page.identifier = '/blog/2020/01/15/rohit-gupta-blog-launched';
};

Full Updated disqus.html

<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/universalcode/#configuration-variables*/

var disqus_config = function () {
  this.page.url = 'https://rohitkumargupta.com{{ page.url }}';  // Replace PAGE_URL with your page's canonical URL variable
  this.page.identifier = '{{ page.id }}'; // 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://rohit-gupta-blog.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>

Disqus not loading in Jekyll Blog

1 Answers