Gatsby Plugin Disqus

Improve audience engagement by integrating Disqus comments into your Gatsby website

Comment

Motivation

The goal of this plugin is to allow users to bring their content to life and cultivate engaged communities by integrating Disqus comments into their blazing-fast Gatsby websites. After struggling to integrate different Disqus components into my Gatsby site, creating an easily-configured plugin for the Gatsby ecosystem felt like a no-brainer.

Install

$ yarn add gatsby-plugin-disqus

or

$ npm install -S gatsby-plugin-disqus

Usage

Add the plugin to your gatsby-config.js file with your Disqus shortname

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-disqus`,
      options: {
        shortname: `your-disqus-shortname`
      }
    },
  ]
}

The plugin can be used as shown in this brief example: 

import { Disqus, CommentCount } from 'gatsby-plugin-disqus'

const PostTemplate = () => {
  let disqusConfig = {
    url: `${config.siteUrl+location.pathname}`,
    identifier: post.id,
    title: post.title,
  }
  return (
    <>
      <h1>{post.title}</h1>
      <CommentCount config={disqusConfig} placeholder={'...'} />
      /* Post Contents */
      <Disqus config={disqusConfig} />
    </>
  )
}

export default PostTemplate

While providing a url, identifier, and title are optional, these attributes will prevent threads from being lost in the case that the domain changes or the post is renamed.

Examples

Blog Post
A blog post featuring comments, provided by gatsby-plugin-disqus
Web
And More
Check out the 650+ projects that are already using gatsby-plugin-disqus
Web

Contribute

  1. Make sure you have yarn installed.
  2. Create a new folder for your yarn workspace. mkdir gatsby-disqus-workspace
  3. Inside your workspace folder, clone this repo.
  4. Navigate into gatsby-disqus-workspace/gatsby-plugin-disqus/ and run yarn && yarn watch. Leave this terminal window open.
  5. In addition to this repo in your workspace folder, add a gatsby site that uses gatsby-plugin-disqus for testing purposes.
  6. In your workspace folder create a package.json and add the following: 
{
  "private": true,
  "workspaces": [
    "your-example-test-site",
    "gatsby-plugin-disqus/lib"
  ]
}
  1. In a new terminal window, cd to your workspace folder and run yarn && yarn workspace <example-site> run develop.

If you have questions or would like help with enhancing or debugging the plugin, feel free create an issue or submit a pull request