#gatsbyjs

Add Disqus comment to Gatsby site

In this post, I will show you the steps to add Disqus comment to GatsbyJS site.

Note: In this post I use Gatsby Starter Blog for example. The way to add Disqus comment to your project may be a bit different.

  1. Firstly, we need to register a Disqus site. After that we have a Disqus short name (Ex: Our site is mysite.disqus.com then short name is mysite).
  2. Turn back to our Gatsby project, install Disqus React package by npm install --save disqus-react.
  3. In gatsby-config.js file, we add new information for siteMetaData

// gatsby-config.js

module.exports = {
  siteMetadata: {
    title      : 'Gatsby Starter Blog',
    author     : 'Kyle Mathews',
    description: 'A starter blog demonstrating what Gatsby can do.',
    siteUrl    : 'https://gatsbyjs.github.io/gatsby-starter-blog/',
    disqus     : {      shortName: 'your-disqus-short-name',    },  },
  // ...
};

  1. Edit src/templates/blog-post.js to embed disqus comment to every post.
    Add disqus comment component to the post container:

// src/templates/blog-post.js

import React from 'react'
import Helmet from 'react-helmet'
import Link from 'gatsby-link'
import get from 'lodash/get'

import Bio from '../components/Bio'
import {rhythm, scale} from '../utils/typography'

import {DiscussionEmbed} from 'disqus-react';
class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark
    const siteTitle = get(this.props, 'data.site.siteMetadata.title')
    const {previous, next} = this.props.pathContext;

    let siteMeta = get(this.props, 'data.site.siteMetadata');
    let disqusProps = {      shortname: siteMeta.disqus.shortName,      config: {        identifier: post.id, // identify of the post        title     : post.frontmatter.title, // title of the post      },    };
    return (
      <div>
        <Helmet title={`${post.frontmatter.title} | ${siteTitle}`}/>
        <h1>{post.frontmatter.title}</h1>
        <p
          style={{
            ...scale(-1 / 5),
            display     : 'block',
            marginBottom: rhythm(1),
            marginTop   : rhythm(-1),
          }}
        >
          {post.frontmatter.date}
        </p>
        <div dangerouslySetInnerHTML={{__html: post.html}}/>
        <hr
          style={{
            marginBottom: rhythm(1),
          }}
        />
        <Bio/>
        <ul
          style={{
            display       : 'flex',
            flexWrap      : 'wrap',
            justifyContent: 'space-between',
            listStyle     : 'none',
            padding       : 0,
          }}
        >
          <li>
            {
              previous &&
              <Link to={previous.fields.slug} rel="prev">
{previous.frontmatter.title}
              </Link>
            }
          </li>
          <li>
            {
              next &&
              <Link to={next.fields.slug} rel="next">
                {next.frontmatter.title}
              </Link>
            }
          </li>
        </ul>
        <DiscussionEmbed {...disqusProps}/>       </div>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
        disqus {
            shortName
        }
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
      }
    }
  }
`;

Checkout my repository at gatsby-starter-blog-disqus for completed source code.

Hope this post is helpful for you. Thanks! :)

An Tran

An Tran

A passionate web developer, self-learner and music lover.

Read More