2019.06.05

GatsbyJSで構築したブログにDISQUSのコメントフォームを設置する方法

今回はGatsbyJSで構築したブログにDISQUSのコメントフォームを設置する方法をまとめます。

GatsbyJS

フロントエンド

[ 目次 ]

はじめに
DISQUSとは
gatsby-plugin-disqusインストール
gatsby-config.jsのplugin設定を追加
DISQUSコンポーネント読み込み
DISQUSの表示について
最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はGatsbyJSで構築したブログに、DISQUSのコメントフォームを設置する方法をまとめます。GatsbyJSのプラグインが用意されていますので、そちらを利用しましょう。

gatsby-plugin-disqus

DISQUSとは

Disqusとは、ブログのコメント機能を拡張し、該当エントリーに関して議論するコミュニティ（フォーラム）として活用可能にするシステムの名称である

Disqus を参照

DISQUSは、FacebookやTwitterのユーザーアカウントを利用してコメントの投稿が可能です。
今回は既にDISQUSのアカウントを所有している前提とし、新規登録の方法は省きます。

gatsby-plugin-disqusインストール

■ npmを利用する場合

$ npm install gatsby-plugin-disqus --save

■ yarnを利用する場合

$ yarn add gatsby-plugin-disqus

gatsby-config.jsのplugin設定を追加

gatsby-config.jsに設定を追加します。shortnameは、DISQUSのダッシュボードから確認できます。

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-disqus`,
      options: {
        shortname: `your-disqus-shortname`
      }
    },
  ]
}

DISQUS shortname

私は、環境変数を利用して設定できるようにしています。

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-disqus`,
      options: {
        shortname: process.env.DISQUS_SHORTNAME
      }
    },
  ]
}

DISQUSコンポーネント読み込み

コメントフォームを表示させる為、gatsby-plugin-disqusを読み込みます。

import Disqus from 'gatsby-plugin-disqus'

そしてタグを設定します。

const ArticleSection = ({ location, post, previous, next}) => {
  const articleUrl = location.href
  return (
    ・・・
    {process.env.DISQUS_SHORTNAME && (
      <Disqus 
      identifier={post.id}
      title={post.frontmatter.title}
      url={articleUrl}
      />
    )}
    ・・・
  )