tterb/gatsby-plugin-disqus

:speech_balloon: A plugin for adding Disqus comments to GatsbyJS

Gatsby Plugin Disqus

A plugin that simplifies adding Disqus comments to your Gatsby website

Description

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

Configure

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`
      }
    },
  ]
}

Usage

You can use the plugin 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 are recommended as it will prevent threads from being lost in the case that the domain changes or the post is renamed. Additional information on all available parameters can be found on the wiki.

Note: When running your site locally, you should pass the production URL to the config.url because this is the URL that Disqus will associate with the shortname and identifier to identify the correct comment thread.

Contributing

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. cd into gatsby-disqus-workspace/gatsby-plugin-disqus/ and run yarn && yarn watch. Leave this terminal window open.
5. Add a gatsby site that uses gatsby-plugin-disqus into your workspace folder 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"
	]
}

7. In a new terminal window, navigate to your workspace folder and run yarn && yarn workspace <example-site> run develop.

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

gatsby-plugin-disqus's Issues

Enable language option for Disqus embed

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Disqus has the option to show the embed in different languages, but the plugin doesn't have language in the config props now.

Describe alternatives you've considered
Add the language field into config prop and follow the following link instruction activate language to change.
https://help.disqus.com/en/articles/1717203-multi-lingual-websites

Additional context
I have playaround with the console panel and this makes it work:

• In the browser console where a Disqus embed loaded already, type in this command:

window.disqus_config = function() { this.language='vi' } // override default language
window.DISQUS.host._loadEmbed(); // reload embed.

Defer disqus script/iframe loading

Having the disqus iframe load at the same time really puts a dent on the page loading time. Is there a way to expilicity define that the script should load in defer or async?

How can I make Disqus work with pagination?

My use case is that I have a Blog template with a Disqus component, as well as Previous/Next navigation buttons for each post.

What happens is that when I navigate to 'myblog/post1', the component loads fine, but when I move to the next or previous post Disqus doesn't load properly. I'm using a Gatsby Link for navigation.

My question is how I can trigger the Disqus component to load when I move to another post. Do I need to pass in a special prop to Disqus? My implementation is straight from the Demo page here

Thanks for any help!

callbacks

Does this plugin support callbacks like the original JS code?

Support React 18

Describe the bug
I'd like to be able to use this package in a project that also depends on React 18

Peer dependencies specify compatibility with only React 16 or 17:

  "peerDependencies": {
    "react": "^16.0.0 || ^17.0.0"
  },

To Reproduce
Steps to reproduce the behavior:
Add this project as a dependency of a project that also has a dependency on react 18 and try to npm install. NPM will report dependency conflicts.

Expected behavior
For there to be no dependency conflicts when used in a project alongside React 18.

Screenshots
N/A

Specifications:

• OS: Any
• Package version: 1.2.3 (latest)
• Gatsby version: 4.12.1 (latest)

Additional context
Not sure if this should have been reported as a feature or bug, but I felt bug was more applicable.

This is a great and easy to use project! Do you suspect there are any blockers to this other than adding it to the package.json?

FB share feature doesn't show full path to post

Hello,

I followed the instructions under the usage section of readme.

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

The url variable points at full url of my blog post viz. blog.com/post1/.
The title has the blog post title with spaces viz. this is a blog post title.
I could not figure out how to get the post.id so I have set it to the full url of post.
Not sure this is related to the problem, but you may be able to help me out with this information.

The disqus component appears at bottom of my post.
The issue is, clicking on Facebook share doesn't populate the 'comment' section. The url just shows the domain name bit viz blog.com, although clicking on it takes me to the post with #disqus_thread appended at end of it.
The twitter share seems to work as expected, i.e. a tweet is populated and a disquss url gets appeneded which navigates to blogpost url with #disqus_thread appended at end of it.

Do you know how to get it to show the url properly and populate the comment on the FB share?
How did you get post.id ? Is it related to this issue?

disqus transforms url like text to HTML <a> tag

For Example, here is my article's HTML content:

<p>foo.example.com</p>

After I use Disqus component on my website, the HTML content is transformed to:

<p>
  <a class="vglnk" href="http://foo.example.com" rel="nofollow"><span>foo</span><span>.</span><span>example</span><span>.</span><span>com</span></a>
</p>

Is this expected?

Look forward to your reply.

net::ERR_NAME_NOT_RESOLVED

Hello! I've been trying to integrate disqus with my gatsby site, and am running into the following errors in my console:

And perhaps consequently Disqus does not seem to be working at all on my site, there isn't even an empty widget showing up. I have already configured the site in my Disqus dashboard and added the shortname in my gatsby-config.js file:

         {
            resolve: `gatsby-plugin-disqus`,
            options: {
                shortname: `my-site`
            }
          },

and in my relevant file:
(i have verified that all the post.xxx fields are defined and console log correctly)

import { Disqus, CommentCount } from 'gatsby-plugin-disqus';
# other code
  let disqusConfig = {
    url: 'https://my-site-link.com' + post.fields.slug, 
    title: post.frontmatter.title,
    identifier: post.id
  };
# more code 
return (
    <div className="commentSection">
        <h1>comments</h1>
        <CommentCount config={disqusConfig} placeholder="0" /> comments
        <Disqus
          config={disqusConfig}
       />
    </div>
);

Any help on this would be vastly appreciated!

I'm currently using react v18.1.0 and node v18.5.0.

Unable to show comments due to "config not defined" in blog-post.js

Describe the bug
Following the instructions here and later running npm run deploy results in this error:

success Building production JavaScript and CSS bundles - 3.974s
failed Building static HTML for pages - 1.425s

 ERROR #95313

Building static HTML failed for path "/hello-world/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  15 |
  16 |   let disqusConfig = {
> 17 |     url: `${config.siteUrl + location.pathname}`,
     |             ^
  18 |     identifier: post.id,
  19 |     title: post.title,
  20 |   }


  WebpackError: ReferenceError: config is not defined

  - blog-post.js:17
    src/templates/blog-post.js:17:13


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: `gatsby build && gh-pages -d public -b master`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Erik\AppData\Roaming\npm-cache\_logs\2020-08-07T15_25_10_004Z-debug.log

If I changed
url: `${config.siteUrl + location.pathname}`,
to
url: `${data.site.siteMetadata.siteUrl + location.pathname}`, `
it deploys but the comments don't load, saying:

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

My repo. I have already set up a site in Disqus admin setting and set a trusted domain to erikmartinessanches.github.io.

Specifications:

• OS: Win 10
• Package version: 1.2.2
• Gatsby version: 2.24.34, Gatsby CLI: 2.12.77

CommentCount doesn't work if providing a new disqus_identifier

Describe the bug
For sites that do not currently have a disqus_identifier set, setting one makes <CommentCount /> not work (it always shows the placeholder textinstead). The <Disqus /> comments component still works properly under these conditions.

Per the Disqus docs, disqus_identifier is optional but recommended; if you didn't have one set previously, you can start using one simply by adding it—your comments will continue to work properly.

The issue is we're migrating our site to Gatsby, and I want to start setting disqus_identifier now. I did so by passing identifier as such:

    // comments work properly
    const config = {
        url: url,
        title: title,
        identifier: guid,
    };

    <Disqus config={config} />

    // comments work, count does not
    const config = {
        url: url,
        title: title,
        identifier: guid,
    };
    const countConfig = {
        url: url,
        title: title,
        identifier: guid,
    };

    <Disqus config={config} />
    <CommentCount config={countConfig} />

    // both comments and counts work
    const config = {
        url: url,
        title: title,
        identifier: guid,
    };
    const countConfig = {
        url: url,
        title: title,
    };

<Disqus config={config} />
<CommentCount config={countConfig} />

I'm guessing the CommentCount lookup is done by identifier. I could omit identifier for that, but it would be nice to use the same config for both.

To Reproduce
Steps to reproduce the behavior:

1. Add both CommentCount and Disqus on a site that currently has no disqus_identifier set.
2. Specify the identifier prop for both.
3. Observe that the Disqus component works correctly but the CommentCount component always shows the placeholder string (...)
4. Remove identifier from the CommentCount config
5. Observe comment counts now work

Expected behavior
I expect both the Disqus and CommentCount components to work correctly when specifying a new disqus_identifier

Screenshots

Specifications:

• OS: macOS Catalina 10.15
• Package version: 1.1.4
• Gatsby version: 2.16.5

Additional context
Please see my detailed description above. Thanks!

Please update dependency of React to 17.x

Is your feature request related to a problem? Please describe.
Cannot install due to conflicts with Gatsby React version

Describe the solution you'd like
Package.json updated for support of latest React

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context

npm install -S gatsby-plugin-disqus
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from @emotion/[email protected]
npm ERR!   node_modules/@emotion/react
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/[email protected]
npm ERR!     node_modules/@emotion/styled
npm ERR!       @emotion/styled@"^x" from the root project
npm ERR!     peer @emotion/react@"^11.0.0" from [email protected]
npm ERR!     node_modules/gatsby-plugin-emotion
npm ERR!       gatsby-plugin-emotion@"^x" from the root project
npm ERR!     1 more (the root project)
npm ERR!   peer react@">=16.8.0" from @emotion/[email protected]
npm ERR!   node_modules/@emotion/styled
npm ERR!     @emotion/styled@"^x" from the root project
npm ERR!   11 more (@gatsbyjs/reach-router, gatsby, gatsby-link, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! gatsby-plugin-disqus@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.5" from [email protected]
npm ERR!   node_modules/gatsby-plugin-disqus
npm ERR!     gatsby-plugin-disqus@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

TypeScript Support

Is your feature request related to a problem? Please describe.
I'm using TypeScript and get the following warning when using the react component

[tsserver 7016] [I] Could not find a declaration file for module 'gatsby-plugin-disqus'. >'../node_modules/gatsby-plugin-disqus/index.js' implicitly >has an 'any' type.
Try npm i --save-dev @types/gatsby-plugin-disqus if it exists or add a new declaration (.d.ts) file containing declare >module 'gatsby-plugin-disqus';

Describe the solution you'd like
A Typescript definition file should be added.

Describe alternatives you've considered
I can ignore this error, but adding proper TypeScript support will prevent bugs and add autocomplete support.

Additional context
I'm happy to help write the definition file, I'm starting here to see if you've already created TypeScript support or can offer support in building out this feature.

React 17

I'm trying to install the latest version of this plugin using React 17, but there appears to be a peer dependency on React 16. I can see in this repo that the React peer dependency has been bumped to 17, but it doesn't seem to have a new version available in NPM. Am I missing something?

How to get comment count to display in heading meta?

Is there a way to do this?

It seems you can do it with disqus-react package but not sure about gatsby-plugin-disqus.

Typescript support

Hi!
First of all, I'd like to say thanks for great plugin which allows add disqus comments in a really simple way.
The only problem I faced with is lack of typings. Can you please add typescript support for the plugin?
Thanks in advance!

"Use DISQUS.reset instead of reloading embed.js please."

Hello, I'm seeing this message on my console. I'm currently working on my local build.

Use DISQUS.reset instead of reloading embed.js please.
See https://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites

I followed the installation steps from here: https://www.gatsbyjs.org/packages/gatsby-plugin-disqus/

I'm not sure if this is a common problem, if this is rooted from my configuration or if it is an issue with the plugin.

Please let me know what details should I provide further. Thank you!

Question about integrating code in blogPost.js

Hello, I am trying to use your plug in and I am having some trouble. I am a noob so I hope this isn't a nuisance question too you.

I have run the install and modified my gatsby-config.js file. When I try to add the example plug in code to my blogPost.js template I get errors. I am sure it is either a function of my placing code in the wrong place or a novice mistake. Any tips?

Thanks for your time.

Gatsby Plugin Disqus Configuration

Summary
I have installed disqus plugin https://github.com/tterb/gatsby-plugin-disqus to my theme, it shows the disqus widget in the blog posts but its not properly linking to the disqus account. I have used correct shortname. The comments are zero on all posts. Whereas there are comments on most of my posts.

Relevant information
Here is my disqus plugin configuration code https://github.com/emmadigital/ardalis-newsite/blob/master/src/templates/blog-post.js

"TypeError: Cannot set property 'props' of undefined" in graphql query when using diqus plugin with contentful

As soon a si configure gatsby-plugin-disqus in gatsby-config.js the graphql queries against contentful are not working anymore

{
  resolve: `gatsby-plugin-disqus`,
  options: {
    shortname: `thoughts-on-coding`,
  }
},

Error:

{
  "errors": [
    {
      "message": "Cannot set property 'props' of undefined",
      "locations": [
        {
          "line": 5,
          "column": 9
        }
      ],
      "path": [
        "contentfulBlogPost",
        "description",
        "childMarkdownRemark",
        "html"
      ],
      "stack": [
        "TypeError: Cannot set property 'props' of undefined",
        "    at Component (/home/bmahr/develop/thoughts-on-coding/node_modules/react/cjs/react.development.js:428:14)",
        "    at Disqus (/home/bmahr/develop/thoughts-on-coding/node_modules/gatsby-plugin-disqus/components/Disqus.js:28:30)",
        "    at /home/bmahr/develop/thoughts-on-coding/node_modules/gatsby-transformer-remark/extend-node-type.js:227:18",
        "    at processImmediate (internal/timers.js:461:21)",
        "From previous event:",
        "    at parseString (/home/bmahr/develop/thoughts-on-coding/node_modules/gatsby-transformer-remark/extend-node-type.js:220:21)",
        "    at getMarkdownAST (/home/bmahr/develop/thoughts-on-coding/node_modules/gatsby-transformer-remark/extend-node-type.js:272:14)",
        "    at getAST (/home/bmahr/develop/thoughts-on-coding/node_modules/gatsby-transformer-remark/extend-node-type.js:180:36)",
        "    at getHTMLAst (/home/bmahr/develop/thoughts-on-coding/node_modules/gatsby-transformer-remark/extend-node-type.js:365:21)",
        "    at getHTML (/home/bmahr/develop/thoughts-on-coding/node_modules/gatsby-transformer-remark/extend-node-type.js:379:21)",
        "    at async Promise.all (index 0)",
        "    at async Promise.all (index 0)",
        "    at async Promise.all (index 0)",
        "    at async Promise.all (index 0)"
      ]
    }
  ],
  "data": {
    "contentfulBlogPost": {
      "description": {
        "childMarkdownRemark": {
          "html": null
        }
      }
    }
  },
  "extensions": {}
}

To reproduce clone my repository (https://github.com/Ben1980/thoughts-on-coding) and connect it with your own contenful account.
With

query MyQuery {
  contentfulBlogPost {
    description {
      childMarkdownRemark {
        html
      }
    }
  }
}

you can reproduce the issue.

Specifications:

• gatsby-plugin-disqus: 1.2.2
• gatsby-source-contentful: 4.2.1
• Gatsby version: 2.28.2

The plugin doesn't work due to incorrect publish

Just came across this plugin and noticed that the published npm package is empty. This is probably because -

1. package.json points to a mainfile index.js, which doesn't exist
2. The lib folder generated as a result of build is a part of .npmingore, hence nothing gets published.

Violation avoid using document.write when using Disqus component

Describe the bug
Whenever the Disqus component is used my page template, the console reports the same error twice:

[Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write

To Reproduce
Steps to reproduce the behavior:

1. Put Disqus component in a page
2. Load the page
3. Open console on Chrome (Version 114.0.5735.198 (Official Build) (x86_64))

Expected behavior
I shouldn't see the above error in the console in my browser

Screenshots

Specifications:

• OS: macOS Monterrey 12.6 (21G115)
• Package version: "gatsby-plugin-disqus": "^1.2.6",
• Gatsby version: "gatsby": "~5.11.0",

Add SSO Integration

Is your feature request related to a problem? Please describe.
I need to use the SSO integration in a site, but it seems that config object doesn't have the required props, remote_auth_s3 and public_key

Describe the solution you'd like
Right now I'm using the disqus-react implementation to solve this and it seems like that adding those props into the config should be enough. I could open a PR to add those props.