HugoにDisqusでコメント欄を導入する方法

プログラミング HugoGo言語

本ブログにコメント欄をDisqusを使用して導入をしましたので、紹介をしたいと思います。

Disqusとは

Disqusは様々なブログやWebサイトに導入できる高機能なコメントサービスです。2017年3月現在では以下のプラットフォームが対応しています。

  • WordPress
  • Blogger
  • Tumblr
  • Squarespace
  • TypePad
  • Movable Type
  • Drupal
  • Joomla
  • Wix
  • Weebly
  • Strikingly
  • Jekyll
  • Ghost
  • HubSpot
  • Shopify
  • Adobe Muse
  • Jimdo
  • Postach.io
  • Pattern

また、対応一覧にない場合でもタグを直接埋め込むことでの導入が可能です。本ブログでも直接埋め込んでいます。

Disqusに登録

Disqusを使用するには英語のサイトから登録する必要がありますので、画像を交えながら登録の仕方を紹介したいと思います。

Disqus公式サイト

Get Started

まずはじめにDisqus公式サイトを開いてGet Startedをクリックしましょう

Disqus GET STARTED

サインアップ

ソーシャルメディアのFacebook、Twitter、Google+またはEmailでの登録が可能です。お好きなもので登録をしてください。

Disqus Signup

サイト登録

Signupをすると、2つのボタンがありますが、下の「I want to install Disqus on my site」をクリックしてください。

Disqus Install my site

クリックをすると入力項目がありますので、以下の内容を入力してください。

  • Website Name :
    Discusを導入するWebサイト名を入力してください。
  • Category :
    Webサイトの内容にあったカテゴリーを選択してください。
  • Language :
    言語を選択してください。
Disqus Create a new site

プラン選択

無料のBasicで進めていきますので、「Continue on Basic」をクリックしてください。

Disqus Select a plan

プラットフォーム選択

沢山のプラットフォームがありますので、ご自身のサイトに合ったプラットフォームを選択してください。
今回は、手動で導入しますので、一番下にある「I don’t see my platform listed, install manually with Universal Code」を選択してください。

Disqus Platform

ユニバーサルコード

ユニバーサルコードの導入は後で解説しますので、2つのコードをテキストファイルなどにコピーして保存をして次に進んでください。

Disqus Universal Code

Disqusの設定

  • Appearance :
    見た目の設定ができます。
    • Color scheme :
      色合いをライトとダークまたはオートから選べます。
    • Typeface :
      フォントをセリフとサンセリフまたはオートから選べます。
  • Website Name :
    Webサイト名を入力してください。
  • Website URL :
    WebサイトのURLを入力してください。
  • Category :
    Webサイトの内容に近いカテゴリーを選んでください。
  • Description :
    Webサイトの説明を入力してください。
  • Language :
    Webサイトの言語を選択してください。
Disqus Conimg Disqus

設定完了

お疲れ様です。これでDisqusでの設定が終わりました。

Disqus Setup Complete

ブログに導入

お次はブログへの導入を解説します。

コメント欄を表示させたい場所に、先程コピーをした以下のようなコードを貼り付けてください。
これだけで表示をさせることができます。

<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://hogehoge-1.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>

また、以下のコードもコピーを下かと思いますが、こちらを</body>の直前に挿入する事でコメント数を表示させることができます。
必要がなければ書く必要はありません。

<script id="dsq-count-scr" src="//hogehoge-1.disqus.com/count.js" async></script>

まとめ

いかがでしたでしょうか。とてもかんたんに導入ができたと思います。コメントの閲覧&管理はDisqusで一括でできますので管理がとても楽になりますので、まだ導入をしていない方はすぐに導入することをオススメします。

comments powered by Disqus