JR

Pages

No results for 'undefined'

Blog Posts

No results for 'undefined'
Powered by Algolia

Gatsby Blog with Disqus comments

Mar 03, 20196 min readWebDev, Tutorial

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. 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
  3. Add the shortname from step 1 as something like GATSBY_DISQUS_NAME to your .env and .env.example 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.)

    // .env.example
    ...
    # enables Disqus comments below blog posts
    GATSBY_DISQUS_NAME=insertValue
    // .env
    ...
    GATSBY_DISQUS_NAME=yourOwnSiteShortname
  4. Go to your template file for blog post (in my case src/templates/post.js) and import the DiscussionEmbed React component.

    // src/templates/post.js
    import React from 'react'
    import { graphql } from 'gatsby'import { DiscussionEmbed } from 'disqus-react'
    ...

    Then define your Disqus configuration object

    const disqusConfig = {
     shortname: process.env.GATSBY_DISQUS_NAME,
     config: { identifier: slug, title },
    }

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

    // src/templates/post.js
    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! emoji-sunglasses


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.

src/components/postMeta/index.js
import React from 'react'
import { Link } from 'gatsby'
import { CommentCount } from 'disqus-react'
import { Meta, TagList, Calendar, Timer, Comments } from './styles'
import { disqusConfig } from '../../utils/misc'

const PostMeta = ({ title, slug, date, timeToRead, tags }) => (
  <Meta>
    <span>
      <Calendar size="1.2em" />
      {date}
    </span>
    <span>
      <Timer size="1.2em" />
      {timeToRead} 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() defined as

src/utils/misc.js
export const disqusConfig = ({ slug, title }) => ({
  shortname: process.env.GATSBY_DISQUS_NAME,
  config: { identifier: slug, title },
})

You can customize what string the CommentCount 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

© 2019 - Janosh RiebesellThis site is open source
Powered byGatsbyGithubNetlify