Chapter 3: Adding Discussions with Giscus or Disqus

While Airtable buttons are great for quick binary feedback, sometimes readers need space to discuss, ask questions, or leave detailed comments. That’s where discussion systems come in.

In this chapter, we’ll:

• Learn the differences between Giscus and Disqus.
• Build a working integration using Markdown HTML embeds.
• Grow by adding a React component for React-based blogs.

3.1 Giscus vs. Disqus

Rule of thumb:

• If your audience already uses GitHub → use Giscus.
• If you want universal login (Google, Facebook, etc.) → use Disqus.

3.2 Markdown & HTML Embed

Giscus Embed

Before you can use Giscus for discussion on your site, you’ll need to configure your GitHub Discussions (instructions in Giscus docs).

Set up the following according to the instructions:

• Repository
• Page ↔️ Discussions Mapping
• Discussion Category
• Features
• Theme

Enable giscus

Add this snippet to your blog post template (Markdown allows raw HTML):

html
<script src="https://giscus.app/client.js"
        data-repo="yourusername/yourrepo"
        data-repo-id="YOUR_REPO_ID"
        data-category="General"
        data-category-id="YOUR_CATEGORY_ID"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="light"
        data-lang="en"
        crossorigin="anonymous"
        async>
</script>
<noscript>Please enable JavaScript to view the comments powered by Giscus.</noscript>

Note: Giscus will fill in the correct values for the variables, and generate the appropriate source. However, we will be using the pre-built Giscus components within our React site.

Giscus React Component

Install the component:

bash
npm i @giscus/react

Import the default export from the package:

jsx
import Giscus from '@giscus/react';

export default function MyApp() {
  return (
    <Giscus
      id="comments"
      repo="giscus/giscus-component"
      repoId="MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA="
      category="Announcements"
      categoryId="DIC_kwDOF1L2fM4B-hVS"
      mapping="specific"
      term="Welcome to @giscus/react component!"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="top"
      theme="light"
      lang="en"
      loading="lazy"
    />
  );
}

Replace the prop values using the values from the earlier example.

Disqus Embed

Sign up with Disqus. From the main menu, click Add Disqus To Site. Select the platform. For now we're going to select the Universal Code.

Disqus works with a <div> + script:

html
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
  this.page.url = window.location.href;
  this.page.identifier = document.title;
};
(function() {
  var d = document, s = d.createElement('script');
  s.src = 'https://YOUR_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">comments powered by Disqus.</a></noscript>

Replace YOUR_DISQUS_SHORTNAME with the value from your Disqus dashboard.

Disqus React Component

Install the component:

bash
$ npm install --save disqus-react

Import the component on your page:

jsx
import { DiscussionEmbed } from 'disqus-react';

<DiscussionEmbed
    shortname='YOUR_DISQUS_SHORTNAME'
    config={
        {
            url: this.props.article.url,
            identifier: this.props.article.id,
            title: this.props.article.title,
            language: 'zh_TW' //e.g. for Traditional Chinese (Taiwan)
        }
    }
/>

Disqus is more feature reach compared to Giscus, however it doesn't generally offer a free tier without ads.

3.3 Case Study Example

• A developer blog about “Database Sharding” now includes a Giscus thread tied to the post’s pathname.
• A non-technical blog about “Photography Tips” instead embeds Disqus for broader login support.

Both are ready in minutes, without building any backend.

3.4 Summary

In this chapter, you:

• Learned the pros/cons of Giscus vs. Disqus.
• Added discussion threads using Markdown HTML embeds.
• Grew into a reusable Gatsby component.

3.5 Exercise

1. Add Giscus to one blog post (if your audience is developers).
2. Add Disqus to another (if you want broader access).
3. Test by leaving comments and checking whether they map to the correct page.

3.6 Next Step

In the next chapter, we’ll combine both systems into a hybrid feedback system:

• A quick Airtable vote and a discussion thread on the same page.
• Best of both worlds — low friction + rich engagement.