DISQUS コメントシステムを baserCMS に導入する方法【ratio_3_2】

2017-02-20 16:30:00

前回は Facebook コメントプラグインを設置する方法をご紹介いたしました。

→ Facebookコメントプラグインを ratio3_2 に導入する方法

今回は、DISQUS コメントシステムを ratio_3_2 に導入する方法をご紹介いたします。

ratio_3_2 は、コメントフォーム機能があえて排除されています（少しの作業で簡単に呼び出せるがレスポンシブ非対応）。そこで、コメント機能を使いたい方は、レスポンシブに対応させるべく CSS の知識が必要になってきます。

DISQUS コメントシステムは、後付けのコメントフォームですので、他のテーマや他のCMSにも設置できる優れたコメントシステムです。もちろん、baserCMS にも設置できますので、現在のコメントフォームに物足りない方へもおすすめできるシステムです。

DISQUSコメントシステムを ratio_3_2 に導入する方法

DISQUS に触れてみる

当サイトの全ページに採用しておりますが、変更する可能生もありますので、デモページをご用意いたしました。（SNSのアカウントが無くても投稿が出来るように設定しています。テストOK）

→ デモページ

スポンサードリンク

DISQUS の特徴とメリット

簡単に設置できる

→ ページのURLやタイトルを取得する関数などの設定が不要です。また、特別な設定なしでレスポンシブデザインに対応しています。

投稿時にSNS等のアカウントを必要とするかしないかの選択が出来る。

→ 匿名や通りすがりの方のコメントを受け付ける設定ができます。

投稿通知がある

→ 訪問者からコメントがあると通知がメールアドレスに届きます。訪問者もそのコメントに返信があれば通知を受け取ることが出来ます。

モデレーション機能がある（要設定）

→ コメントの公開設定ができます。コメントに URL や禁止用語が含まれているかどうかで公開するか一時保留にするかも設定できます。

画像の投稿が出来る。（要設定）

→ SNSやDISQUS等のアカウントでログインすれば、画像が投稿できます。

共有機能など拡散力がある。

マネタイズできる。（要設定）

などなど、様々な設定が可能です。

DISQUS のデメリット

英語表記。

→ 基本的に英語表記ですので登録や設定に苦労するかもしれません^^; しかしながら、日本語で訳してくれている便利なサイトが多数あります。

DISQUS に登録する

必要なもの。

メールアドレス（コメント通知が来ます）

設置するサイト・ブログのURL

DISQUS 公式サイト

→ DISQUS

日本語でわかり易く解説してくださっているサイトがありますので参考に登録してみて下さい。

アカウントが作成できたら

https://disqus.com/

ホーム画面から「GET STARTED」にアクセスします。

「I want to install Disqus on my site」をクリックします。

サイト名を適当なローマ字で入力します。（アカウントURLになります）カテゴリーと言語を選択して「Create Site」をクリック。

同様に「Got it.Let's get started!」をクリックします。

What platform is your site on? という、設置するサイトのプラットフォームを選ぶ画面になりますので、一番下の「Universal code」を取得するリンクをクリックします。

あなた専用のユニバーサルコードが発行されますので、両方ともにメモ帳などにコピーしておきます。

ここから baserCMS 側の設定です。

ダッシュボード → レイアウトテンプレート一覧 → エレメント一覧 → エレメントファイル新規作成

disquscom という名前のエレメントファイルを作成しました。

内容欄に先程コピーしておいたコードを２つとも貼り付けます。

disquscom.php（サンプル）

<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 = '//あなたのID.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>

<script id="dsq-count-scr" src="//あなたのID.disqus.com/count.js" async></script>

ファイルを保存します。これで好きな場所にコメントフォームを呼び出す準備が出来ました。

ブログに設置してみよう。

single.php に移動します。

レイアウトテンプレート一覧 → コンテンツ一覧 → Blog/ → default/ → single.php

single.php の下記の部分に設置してみました。

エレメントを呼び出す関数を使っています。実際のコードがこちら

<?php $this->BcBaser->element('disquscom') ?>

保存してブログ記事を更新（再読込）して確認しましょう。この様に表示されると思います。

設置はこれで完了です。

続いて先程のユニバーサルコードを取得した画面に戻り「Configure」をクリックします。

サイトURLと説明を入力します。後から変更できます。

「Complete Setup」をクリックします。

これでセットアップが完了しました。

続いてモデレーション等の各種設定をしていきます。

Learn how to~ をクリックします。

この様なページに移動すると思います。（複数のコメントフォーム持っていると選択画面が出ます。）URLを参照してください。
admin/moderate/#/pending

Site configuration をクリックします。

自動的に Community の設定画面に移動します。

基本項目に解説を付けてありますので参考にして下さい。

続いて General に移動します。

サイト登録情報が変更できます。

私は、Discovery のチェックを外してます。（コメントフォーム内にリンクが表示されて見難い気がするので…）

また、アバターも出来れば設定されることをおすすめします。

Advanced に移動します。

ここで収益化の設定が出来ますが、通常のコメント機能だけ使いたい場合は、チェックを外しておきましょう。※私自身も活用したことが無いのでですが、英語圏の広告が表示されるようです。詳しくは検索してみて下さいm(_ _)m

これでコメントフォームの設定は終了です。

続いて通知メールの設定を行います。

画面右上のプロフィール画像をクリックして、Settings を選択します。

この様な画面になります。

Email Notifications の設定

Web Notifications の設定。

何らかのアクションがされた時に知らせるかどうかの設定です。

Moderation の通知設定

サイトごとにコメントフォームを複数作成出来るので、全て選択しています。

お疲れ様でした。以上でコメントフォームとモデレーション・通知の設定が完了しました。

スポンサードリンク

実際にコメントしてみよう。

一旦ログアウトして、設置したコメントフォームを見てみます。

コメント欄をタップするとこの様な入力欄が出てきます。※Guest Commenting の設定を許可にしていると、ゲストとして投稿が可能になります。

ゲストにチェックを入れると名前（ニックネーム）とメールアドレスだけで投稿が可能です。（画像の添付はログインが必要）

登録時とは別のメールアドレスを入力して送信してみます。

Pre-moderation → All にチェックを入れているので承認待ちになりました。この文章は他の方からは見えません。

アカウント主のメールアドレスを見てみましょう。

ページのタイトルの返信が件名になって届きます。

内容はこんな感じになってます。

モデレーションパネルへのリンクがありますので、ここから移動できます。

ログインするとこのページが開きます。コメントにチェックを入れると、承認・スパム・削除が行なえます。ここでは承認してみます。

Approve をクリック。その後OKをクリックします。これでコメントを承認しました。

再度ログアウトしてコメントしたページを見てみます。（ゲストとして）

無事に表示されています。また、左下の「更新を受け取る」に、ゲストの方がメールアドレスを入力することで更新（返信）が通知されます。

→ 実際のページはこちら

実際にテストして頂いてOKです。

DISQUS 公式サイト

https://disqus.com/

https://help.disqus.com/

参考ページ

「DISQUS」で高機能コメント欄にレベルアップ！wordopress導入編

そういえば使ったことがなかったので自分のブログのDISQUSで実際にコメントしてみた

Disqusの設定について（CSSでデザインの設定方法もあり）

最後に・・・

disqus は一度アカウントを取得すると、複数のコメント欄（複数サイト）を作成できます。html サイトにも簡単にコメント欄を導入できます。

今回は、ブログ記事に設置しましたが、レイアウトテンプレートの default.php に設置することで、固定ページにも呼び出すことができます。

お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。

新着情報