固定ページトップ画像

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

は 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

disqus1.png

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

おすすめ参考ページ

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

→ 少し前の記事ですが、基本的に登録方法は同じです。細かい部分まで日本語訳されています。

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

→ SNS(Twitter)のアカウントで実際にコメントをする方法が書かれています。

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

https://disqus.com/

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

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

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

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

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

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

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

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

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

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

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

set4.png

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

エレメントを呼び出す関数を使っています。実際のコードがこちら
<?php $this->BcBaser->element('disquscom') ?>

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

設置はこれで完了です。

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

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

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

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

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

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

disqus13.png

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

Site configuration をクリックします。

disqus14.png

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

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

disqus15.png

続いて General に移動します。

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

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

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

Advanced に移動します。

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

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

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

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

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

Email Notifications の設定

disqus19.png

Web Notifications の設定。

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

Moderation の通知設定

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

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

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

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

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

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

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

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

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

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

内容はこんな感じになってます。
disqus26.png
モデレーションパネルへのリンクがありますので、ここから移動できます。

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

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

再度ログアウトしてコメントしたページを見てみます。(ゲストとして)
disqus28.png
無事に表示されています。また、左下の「更新を受け取る」に、ゲストの方がメールアドレスを入力することで更新(返信)が通知されます。

→ 実際のページはこちら

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

DISQUS 公式サイト

https://disqus.com/

https://help.disqus.com/

参考ページ

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

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

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

最後に・・・

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

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

お役に立てましたら、いいね!&シェアして頂けると幸いです。
ご覧頂きありがとうございます。
 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング人気ブログをblogramで分析

月別アーカイブ一覧


新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介します!https://ratio32.msstyle.jp/s...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL化に完全には対応できていない様です。当サイトは3系で運営して...

【mixhost・ミックスホスト へサーバー変更】baserCMS ホームページのプチリニューアルとSSL(暗号化通信)化を行いました。

2017-06-19

いつもご覧頂きありがとうございます。ホームページのリニューアルを行いましたのでお知らせ致します。大きな変更点は、ページ全体の暗号化通信(SSL)化を行いました。それに伴い、URLの変更がございます。 ...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。

2017-06-19

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介します!https://ratio32.msstyle.jp/s...

【ratio_3_2】ブログ記事下の次のページへのリンクを入れ替える方法【baserCMS】

2017-02-25

ブログ記事下の隣接ページへのリンクを入れ替える方法ご質問を頂きましたのでご紹介させて頂きます。 説明が難しいので要約させて頂いておりますm(_ _)mご質問ブログ記事の下部分の次のページへのリンクを入...

baserCMS

CakePHP(tm) : Rapid Development Framework