Charlie Parker
Charlie Parker

Reputation: 5267

Where does the Universal Embed Code go for Disqus and Jekyll?

I was going through the instructions of setting up Disqus but I don't understand where the Universal Embed code goes nor where {% if page.comments %} and {% endif %} is supposed to go.

I do understand where:

---
layout: default
comments: true
# other options
---

goes. At the top of my markdown (that is currently my blog post). I was also watching this:

https://www.youtube.com/watch?time_continue=154&v=Dr6pSdeJgkA

For how to manually install Disqus but I am still failing.

This is how my project looks like:

enter image description here


I saw this but wasn't helpful:

Jekyll and Disqus: cannot get disqus to appear on site

I also checked:

https://talk.jekyllrb.com/t/where-does-the-universal-embed-code-go/3340

Quora: https://www.quora.com/unanswered/Where-does-the-Universal-Embed-Code-go-for-Disqus-and-Jekyll

Their discuss page: https://talk.jekyllrb.com/t/where-does-the-universal-embed-code-go/3340/5

Upvotes: 1

Views: 487

Answers (1)

Rajiv Singh
Rajiv Singh

Reputation: 3947

As we have the file disqus_comments.html in the _include folder, this is where we have to paste the Universal Embed Code.

<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 () {
        // Replace PAGE_URL with your page's canonical URL variable
        this.page.url = PAGE_URL;

        // Replace PAGE_IDENTIFIER with your page's unique identifier variable
        this.page.identifier = PAGE_IDENTIFIER;
    };
    */

  (function () {
    // REQUIRED CONFIGURATION VARIABLE: EDIT THE SHORTNAME BELOW
    var d = document,
      s = d.createElement('script');

    // IMPORTANT: Replace EXAMPLE with your forum shortname!
    s.src = 'https://EXAMPLE.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>

In https://EXAMPLE.disqus.com/embed.js, replace EXAMPLE with our Disqus Username.

After making the Universal Code, we have to fetch that code in our post to render the comments, and to do so, we have to make a layout file of the post so create a file with the name post.html and put this code in it.

---
comments: true
---

{% include disqus.html %}

Now make any post that will be a markdown file with code.

---
layout: post
---

So, whenever we make a new post, we have only to repeat step 3. If still not working, try to check the _config.yml file for Disqus Username.

Upvotes: 1

Related Questions