Ghostにコメント機能(Disqus)を追加する

by zienchan

Ghostにはデフォルトでコメント機能がないのでコメント機能を追加する方法についてまとめます
この記事にテスト目的でコメントしても構いません

目的

Ghostにコメント機能を追加する

背景

誤った記事を放置するのはよくないので少なくとも指摘などを受け付ける窓口が欲しい

前提条件

Ghost v1.x系

選択肢

コメント機能といっても実際にはいくつかの選択肢がある
ぱっと調べた感じでは少なくとも下記は実際にGhostに実装可能のようです

サービス名 コメントデータの場所
Disqus 外部
NodeBB 内部(?)
Facebook 外部
Livefyre 外部

解決策

ここでは利用者も多く簡単で見た目もよいDisqusで実装します
但し、上位5%くらいのサイトには広告が表示されるようで、これを非表示にするには課金が必要です
不満点はありますが、大規模になってきて広告が邪魔になってきたら乗換えを検討することとします

Disqusの登録

Disqusでアカウントを作成します
外部プロバイダに対応しており、Google/Facebook/Twitterでログインできます
私はGoogleアカウントでログインしましたがDisqusアカウントの新規発行もできます

必要事項の入力

アカウント作成後、"install Disqus on a website."を選択して必要事項を入力していきます
特に気をつける必要はありませんが、disqusは管理画面にサブドメインを割り当てており、これがshortnameに該当します

プランとプラットフォームの選択

プランはBasic(無料)、プラットフォームはGhostを選択します

組み込み用コードの入手

"Universal Code install instructions"のリンクを押して、埋め込みコードを入手します

Ghostへの導入

直接テーマを変更するなどいくつか方法がありますが、ここでは管理画面から編集するためにcasperから派生させた独自テーマを用意することとします

casperのダウンロード

派生元となるcasperテーマをダウンロードします
githubからでもOKですがビルドするのが面倒なので、管理画面の[Design]から現在のCasperテーマをダウンロードします

zipの展開

ダウンロードしたcasperを展開します

post.hbsの編集

post.hbsファイルに、ご丁寧に下記のようなコメントがあるのでそれに従って組み込み用コードを貼り付けます

{{!--
<section class="post-full-comments">
    If you want to embed comments, this is a good place to do it!
</section>
--}}

貼り付けるとこんな感じになります
※これをコピペしても動きません。必ず自身で生成した埋め込みコードをコピペしてください

<section class="post-full-comments">
    <div id="disqus_thread"></div>
    <script>

    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://***.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>

このままでは動かないので、PAGE_URLとPAGE_IDENTIFIERをそれぞれ下記の値に置換します

  • PAGE_URL
    • "{{url absolute="true"}}"
  • PAGE_IDENTIFIER
    • "ghost-{{comment_id}}"

zipにまとめる

展開時と同じ階層のまま全体をzipします

ファイル名を変更する

zip化したファイル名はテーマ名になるので、ファイル名を変更します
なお同一のテーマ名は管理画面からアップロードできないので上書きするつもりでcapser.zipにしてもエラーになります(casperテーマのみで、カスタムテーマは上書きできます)
ここでは仮にcasper-custom.zipとします

テーマファイルをアップロード

管理画面から[Design]->[Upload theme]ボタンを押して作ったzipをドロップしてアップロードします

この時、テーマがACTIVEになっていることを確認しておきます。

確認する

記事のページを開いてコメントが表示されているのを確認します

参考

Ghost公式ドキュメント