React のサイトに、Disqus のコメント欄を設置したくなり、disqus/disqus-react: A React component for Disqus を使って設置してみました。 インストール、実施したことを記載します。

前提

  • OS 

    sw_vers 
ProductName:    Mac OS X
ProductVersion: 10.14.3
BuildVersion:   18D109

  • インストールしているパッケージ
    react@16.8.3 でインストールしたということが重要かと思います。 

    npm list --depth 0   
xxxxxxxxxxxxxxxxxxxx@1.0.0     
├── axios@0.17.1
├── babel-core@6.26.3
├── babel-loader@7.1.5
├── babel-plugin-transform-object-rest-spread@6.26.0
├── babel-polyfill@6.26.0
├── babel-preset-es2015@6.24.1
├── babel-preset-react@6.24.1
├── babel-root-import@4.1.8
├── clean-webpack-plugin@0.1.19
├── css-loader@0.28.11
├── disqus-react@1.0.5
├── es6-promise@4.2.6
├── eslint@4.19.1
├── eslint-loader@2.1.2
├── eslint-plugin-react@7.12.4
├── highlight.js@9.15.6
├── json-loader@0.5.7
├── lodash@4.17.11
├── material-components-web@0.41.1
├── mini-css-extract-plugin@0.5.0
├── moment@2.24.0
├── moment-locales-webpack-plugin@1.0.7
├── node-sass-chokidar@0.0.3
├── npm@5.10.0
├── npm-run-all@4.1.5
├── offline-plugin@4.9.1
├── optimize-css-assets-webpack-plugin@5.0.1
├── prop-types@15.7.2
├── react@16.8.3
├── react-adsense@0.0.5
├── react-cookies@0.1.0
├── react-dom@16.8.3
├── react-fontawesome@1.6.1
├── react-google-tag-manager@2.2.1
├── react-helmet@5.2.0
├── react-hot-loader@3.1.3
├── react-infinite-scroller@1.2.4
├── react-redux@5.1.1
├── react-router-dom@4.3.1
├── react-router-scroll-memory@1.0.4
├── redux@3.7.2
├── redux-beacon@1.2.1
├── redux-logger@3.0.6
├── redux-thunk@2.3.0
├── remarkable@1.7.1
├── remove-markdown@0.2.2
├── reqwest@2.0.5
├── rmwc@4.0.6
├── sass-loader@6.0.7
├── style-loader@0.19.1
├── urijs@1.19.1
├── webfontloader@1.6.28
├── webpack@4.29.6
├── webpack-bundle-tracker@0.4.2-beta
├── webpack-cli@3.2.3
├── webpack-merge@4.2.1
├── webpack-pwa-manifest@3.8.0
├── workbox-sw@3.6.3
└── workbox-webpack-plugin@3.6.3

事前に実施しておくこと

Disqus へサイト登録が必要になります。
私は 「shortname ってなんだっけ?」 になり以下の記事を参考にしました。
Kazunori Miura - TumblrにDisqusコメントを導入するメリットや設置方法など

インストール、設定

インストール、インストール後の実装と設定について記載します。

インストール

npm install disqus-react

実装

ブログっぽいサイトの記事に組み込みました。
Disqus.DiscussionEmbed がDisqus のコメントタグになります。

  • 組み込んだJavaScriptの抜粋 

    import siteConfig from "../data/siteConfig.js";
import Disqus from "disqus-react";
....

    render() {
        const {post} = this.props;
        if (!post) {
            return (
                <div></div>
            );
        }
        const disqusShortname = siteConfig.disqusShortName;
        const disqusConfig = {
            url: siteConfig.siteUrl + "/" + post.meta.slug,
            identifier: post.meta.slug,
            title: post.title,
        };
        return (
            <div key={post.id} className="mainContainer mt5rem">
                {this.renderMetaInfo()}
                {this.renderEditButton()}
                <Post title={post.title}
                    slug={post.meta.slug}
                    body={post.body}
                    published={post.published}
                    authenticated={this.props.authenticated}
                    tags={post.tags}
                    date={post.date}
                    category={post.category}/>
                {this.renderTags()}
                <Card key="adBottomDetail">
                    <AdSense.Google client={siteConfig.adClient} slot={siteConfig.adSlot} style={{display: "block"}}
                        format="auto"/>
                </Card>
                <Card key="disqus">
                    <Disqus.DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
                </Card>
                <RelatedPosts gistId={post.meta.slug}/>
            </div>
        );
    }

  • 補足1 Disqus config の設定
    Disqus タグには、以下の変数を渡しています。 

        // Disqus で作成したサイトのショートネーム
    const disqusShortname = siteConfig.disqusShortName;
    // コメントのスレッドになる
    const disqusConfig = {
        // サイトURL
        url: siteConfig.siteUrl + "/" + post.meta.slug,
        // 識別子
        identifier: post.meta.slug,
        // タイトル
        title: post.title,
    };

  • 補足2 siteConfig.js の記述
    siteConfig.js には以下のような実装をしており、Disqus タグ設定変数として利用しています。 

    /* eslint-disable no-undef */
module.exports = {
/* eslint-ensable no-undef */
    siteUrl: "https://www.monotalk.xyz", // Domain of your website without pathPrefix.
    disqusShortName: "your_shortname", // your shortname
}

  • 補足3 Disqus.CommentCount もある
    disqus-react/README.md at master · disqus/disqus-react に記載がありますが、Disqus.CommentCount タグで Config 設定に該当するスレッドのコメント数が取得できます。
    ブログの記事一覧でデータ取得したい場合は、記事ごとに Config 設定を変える必要があります。

感想

使った感想を記載します。

以上です。

コメント

カテゴリー

最近の投稿