2019.05.12

GatsbyJS製ブログにコメント欄を表示する方法【Disqus】

gatsby

今回はDisqusを使ってGatsbyJSで作ったブログにコメント欄を表示させる方法の紹介です。

Disqusについて

Disqusとは多機能なコメントツールです。アカウントを作ることで他の人のブログにコメントをしたり、自分のブログにコメント欄を表示させることができます。

多機能と紹介した理由ですが、コメントだけでなくメディア（写真など）を載せたりリアクション（顔文字）をとることができるためです。またコミュニティーとしての機能もあるようです。

今回アカウントの作り方は省きますが、公式サイトから簡単に作ることができます。後でコメント欄の表示に使うので、アカウントを作っておいてください。メアドだけでなくFacebook・Twitterなどでもアカウントを作ることができます。

Disqus

必要な環境

プラグインのインストールにコマンドプロンプト・ターミナルからyarnを使うので、パソコンに入っていない人はHomebrewと一緒にインストールする必要があります。どちらもパッケージマネージャーの1つで、公式サイトからインストールすることができます。

方法1 （yarn もしくはnpm）

プラグインをインストール

先程紹介したyarnかnpmを使ってGatsbyJSブログのフォルダーにプラグインをインストールします。

cd フォルダー名

yarn add gatsby-plugin-disqus

もしくは

npm install -S gatsby-plugin-disqus

gatsby-config.jsに書いてみる

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-disqus`,
      options: {
        shortname: `yourdisqusshortname`
      }
    },
  ]
}

yourdisqusshortnameの部分を自分の名前に変えてください。

blog-post.jsに書いてみる

src/templates/blogpost.jsに下のコードを追加します。色々と省略している理由ですが、人によってファイル名やクラスが違うためです。・・・の部分が省略している場所です。

・・・

import Disqus from 'gatsby-plugin-disqus'

・・・

const PostTemplate = () => (
  <>
    /* Page Contents */
    <Disqus 
      identifier={post.id}
      title={post.title}
      url={this.props.location.href}
    />
  </>
)

・・・

export default PostTemplate

エラーが出る場合はurlを${config.siteUrl}${location.pathname}に当てはめて変えてみてください。

方法2 （yarnのみ）

プラグインをインストール

yarnを使ってGatsbyJSブログのフォルダーにプラグインをインストールします。

cd フォルダー名

yarn add disqus-react

blogpost.jsに書いてみる

src/templates/blogpost.jsに下のコードを追加します。

・・・

import { DiscussionEmbed } from "disqus-react";

・・・

  render() {
    const disqusShortname = "yourdisqusshortname";
    const disqusConfig = {
      identifier: post.id,
      title: post.frontmatter.title,
    };
    
・・・

<DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
</div>

yourdisqusshortnameの部分を自分の名前に変えてください。

最後に

ブログを見るとコメント欄が表示されているはずです。デザインやスパムなど詳しい設定はDisqusの設定ページから行います。

【2019年最新版】Disqusのおすすめ設定

参考

@Flower71418279