Docusaurus - Disqus integration

Recently I have become a fan of Docusaurus and I have started using it to create my blog and other websites that I own. In one of the posts I described how to integrate Docusaurus with YouTube, and now it is time for integration with Disqus. Integration with Disqus allows readers of my blog to comment on entries, allows them to share their opinions about them, which is very important to me. Every opinion affects the development of the blog and also my knowledge.

Disqus

Disqus is an US blog comment hosting service offering a platform for social integration, social networking, user profiles, among other things - see Disqus - Wikipedia.

Although Disqus describes integration methods with various products on its pages, I was forced to write my own solution, which completely satisfied me. Disqus offers two interesting integration options:

• A solution using the React component (installation using npm/yarn).
• A solution using a JavaScript script that we place in an HTML file (manual installation with the "universal code").

Solution using React

Generally speaking, the solution using React is to install the disqus-react package using npm/yarn.

Unfortunately, during my attempts to integrate with Docusaurus, I was not able to achieve the expected effect. The thing is that I have several language versions of the same entry and I wanted the comments to be shared between them. So that a comment added under the article in the English language version would also be visible in the Polish language version. When I defined a common url and identifier in the Disqus configuration (e.g. url="https://slawas.pl/blog/2025-01-25-Docusaurus-Disqus-Integration, identifier="2025-01-25-Docusaurus-Disqus-Integration") for an entry in both language versions, the comments appeared under all articles. In the Disqus administration panel, I saw that the provided client implementation incorrectly built the comment page address - it was always set to https://slawas.pl/blog/.

I didn't want to delve into the analysis of what the error was. During later work, I noticed that a possible error was that identifier was not a value representing the page address, but only an entry identifier. When I set identifier=window.location.href, then comments were visible only under one entry, but they were not shared between language versions 😞.

That's why I decided to use a JavaScript solution.

JavaScript solution

The JavaScript solution consists of placing the following script in the HTML file:

<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_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://slawas.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>

And then the trouble began. How to add such content in React? I am a novice in this technology and I admit that the proposed solutions searched by uncle Google were either impossible to grasp (they were too complicated) or did not work, e.g. the code in the browser loaded only once and did not react to changes after loading a new entry. Finally, I found and wrote a solution that works and is simple.

Solution using the Disqus component

I used useEffect and Helmet to achieve the effect I wanted. I installed Helmet in the project with the command npm install react-helmet. I placed the solution in the file _functions.js.

I imported the appropriate dependencies:

import { useEffect } from 'react';
import { Helmet } from 'react-helmet';

I added a Disqus component which I defined as follows:

/**
 * Set Disqus configuration. Sets URL, page title, presentation 
 * language. The configuration is called before the script is 
 * loaded Disqus.
 * @param {
 *   url: string,
 *   title: string,
 *   lang: string
 * } param0 
 */
function DisqusConfig({url, title, lang}) {
  useEffect(() => {
    window.disqus_config = function () {
      this.page.url = window.location.href;
      this.page.identifier = window.location.href;
      this.language = "en";
      if (url) { 
        this.page.url = url;
        this.page.identifier = url;
      }
      if (title) { this.page.title = title; }
      if (lang) { this.language = lang; }
    };
    return () => { }
  });
}

/**
 * Building a Disqus Commenting Presentation
 * @param {
 *  shortname: string,
 *  urlContext: string,
 *  urlPage: string,
 *  title: string,
 *  language: string
 * } param0 
 */
export const Disqus = ({children, shortname, urlContext, urlPage, title, language}) => (
  <span>
    <div id="disqus_thread"></div>
    <DisqusConfig url={urlContext + urlPage} title={title} lang={language}/>
    <Helmet>
      <script data-timestamp={"" + new Date()} src={"https://"+ shortname + ".disqus.com/embed.js"} async></script>
    </Helmet>
  </span>
);

Now in the MDX files where I want to place Disqus comments, I import this component:

import { Disqus } from '../_functions.js';

and I use it with the appropriate parameters. For example:

<Disqus
  shortname='slawas'
  urlContext="https://slawas.pl/blog/"
  urlPage="2025-01-25-Docusaurus-Disqus-Integration"
  language="en"
  >
</Disqus>

And that's it. Now you can enjoy Disqus comments on your site like I did in this article (see below) 😆.