Gatsby React Disqus Comments

Rating: 4.5 - 36 Reviews

Taken From

janosh.io Gatsby React Disqus Comments

If you’re running a Gatsby blog (or any React-powered blog for that matter) and you’d like to add comment functionality, rest assured, it’s very easy. I just went through that process and the only thing that took time was deciding which service to use. There are quite a few to choose from. The ones I considered were all mentioned in a 2017 Gatsby Spectrum chat:

I ended up going with Disqus for the following reasons.

  • It seems to be by far the most widely used service.
  • It is low maintenance, meaning moderating your comments and maintaining your forum is easy.
  • It provides official React support.
  • It offers a generous free tier.
  • It’s easy to comment: Disqus has a large existing user base and the onboarding experience for new users is fast since you can register with your Google, Facebook or Twitter account. You can also easily share your review about the post through those channels.
  • Its commenting interface has a distinct but unobtrusive look that many users will instantly recognize and trust.
  • All Disqus components are lazy-loaded, meaning they won’t negatively impact the load times of your posts.

The other services seemed excellent as well, though, and are well worth checking out.

Staticman, for instance, took an interesting approach. Essentially, you set up your own HTML form for writing comments, let it send a POST request on submission to one of their endpoints. From this Staticman will automatically submit a pull request to your site’s repo which you can accept or deny. And it would be a good choice if Staticman’s APi, though GitHub’s limitations, was not overused and unavailable 80% of the time.

If that isn’t a geeky way of doing comment moderation, I don’t know what is. This has the big advantage of keeping everything static (hence the name). All your data is in one place (your repo) as opposed to having to be loaded through JavaScript embeds or iframes on the fly. It will remain there even if Staticman is ever discontinued. With the other services, you depend on an external platform to deliver your comments.

Of course, in return you have the disadvantage of increased manual setup including putting together the comment form and hooking it up to Staticman. Depending on your use case, this degree of customizability may well be an advantage. In my case, though, I just wanted something fast with as little manual configuration and setup as possible. Disqus turned out to perfect in this regard.

Implementing Disqus

Here are the steps for adding Disqus comments to your own blog:

  1. Sign-up to Disqus. During the process you’ll have to choose shortname for your site. This is how Disqus will identify comments coming from your site. Copy that for later.
  2. Install the Disqus React package
yarn add disqus-react
  1. Add the shortname from step 1 as something like
GATSBY_DISQUS_NAME

to your

.env

example usage in .env.sample

GATSBY_ALGOLIA_APP_ID=insertValue
GATSBY_ALGOLIA_SEARCH_KEY=insertValue
ALGOLIA_ADMIN_KEY=insertValue

GOOGLE_ANALYTICS_ID=insertValue
GATSBY_GOOGLE_MAPS_API_KEY=insertValue

# enables Disqus comments below blog posts
GATSBY_DISQUS_NAME=insertValue

files so that people forking your repo will know that they need to supply this value to get comments to work. (You need to prefix the environment variable with GATSBY in order to make it available to client side code.)

or

3.5 Add it to your config.js in your data folder. Data/config.js

enables Disqus comments below blog posts

import config from '../../data/config'
disqusShortname: 'yourOwnSiteShortname'
  1. Go to your template file for blog post
(in my case src/components/ArticleTemplate) and import the DiscussionEmbed

React component.

src/components/ArticleTemplate
  import React from 'react'
  import { graphql } from 'gatsby'
  import { DiscussionEmbed } from 'disqus-react'

Then define your Disqus configuration object if you are not using .env or Data/config.js

  const disqusShortname = 'yourShortName'
  const disqusConfig = {
    identifier: slug,
    title: title,
  }

Where identifier must be a string or number that uniquely identifies the post. Finally, add DiscussionEmbed to the JSX of your post template.

Add Discussion embed

src/components/ArticleTemplate
 return (
   <Global>
     <PageBody>
       ...
     <DiscussionEmbed {...disqusConfig} />     </PageBody>
   </Global>
 )  

And you’re done. You should now see the Disqus comment form appear beneath your blog post just like the one below this post. Happy blogging!

Update

Adding comment counts to your blog post previews

If you’d like your blog post previews to show a count of the number of comments each post received, simply import disqus-react’s CommentCount in the relevant component and provide it the exact same config object as DiscussionEmbed.

adding

data/config.js
  import React from 'react'
  import { Link } from 'gatsby'
  import { CommentCount } from 'disqus-react'

  import { Meta, TagList, Calendar, Timer, Comments } from './styles'
  import config from '../../data/config'
  const PostMeta = ({ title, slug, date, readingTime, tags }) => (
    <Meta>
      <span>
        <Calendar size='1.2em' />
        {date}
      </span>
      <span>
        <Timer size='1.2em' />
        {readingTime} min read
      </span>
      <span>
        <Comments size='1.2em' />
        <Link to={`/blog` + slug + `#disqus_thread`}>          <CommentCount {...disqusConfig({ slug, title })} />        </Link>      </span>
      <TagList tags={tags} />
    </Meta>
  )
  
  export default PostMeta

where the config object now comes from the utility function

  disqusConfig()

You can customize what string the Comment Count component displays depending on how many comments a post has by going to your Disqus admin settings as described here. For instance you might want to change the text ‘0 comments’ to something more inspiring like ‘Start a discussion!‘. emoji-wink

Disqus community admin settings
Disqus community admin settings



Is this a useful post? Please give us a rating!

Comments

Issues

Messaging

PubliusLogic
Governed by our!

MailChimp Newsletters

Newsletters

Enjoyed this post? Want the next one in your inbox!

Secure Email

Slack

Slack @donboulton

Bring your team together with Slack, Work collaboration hub.

Netlify Functions  Message Me!

PubliusLogic

Heatmaps by Hotjar

Hotjar is the fast and visual way to understand your users..

Hotjar