ratio_3_2 のカスタマイズ方法

FacebookコメントプラグインをbaserCMSに導入する方法【ratio_3_2】

FacebookコメントプラグインをbaserCMSに導入する方法【ratio_3_2】

フェイスブックコメントプラグインを ratio_3_2 に導入する方法

今日は ratio_3_2 にコメント欄を設置する方法の第一弾(全3回を予定)として、フェイスブックコメントプラグインを設置する方法をご紹介いたします。

元々、このテーマでは通常のコメント欄は排除されています。これを解除して呼び出すことも簡単に出来るようになってますが、レスポンシブ化されておりません。

そこで、外部のコメントプラグインを設置することで、コメント欄を追加する方法をご紹介いたします。

デモページ(固定ページ)

→ デモページ

フェイスブックコメントプラグインのメリット

実名登録されていることが多いのでコメントが荒れにくい。

比較的簡単に設置できる。

ブログ記事だけでなく固定ページにも設置できる。

コメントの通知機能がある※要設定

コメントの一括管理ができる※要設定

必要なもの

フェイスブックアカウント


スポンサードリンク

設置手順

フェイスブックにログインした状態でこちらにアクセスします。

→ 開発者向けFacebook  

1.新しいアプリを追加をクリック

step1.png
 

2.それぞれ記入・選択し右下の アプリIDを作成してください をクリック。

step2.png
 

3.セキュリティチェックを入力し送信をクリック

step3.png
 

4.うまく行くとこの様なページになります。

step4.png
 

5.一番下のソーシャルプラグインの横「ドキュメントを読む」をクリック

fbcom01.png
 

6.コメントを選択

fbcom02.png
 

7.ウェブをクリック

fbcom03.png
 

8.あなたのサイトURLと*投稿数を入力(*後で変更できます)

fbcom04.png
 

9.コードを取得します。

fbcom05.png
 

10.アプリIDと言語を確認し、それぞれのコードをメモ帳などにコピーしておきます。

fbcom06.png
ご覧のページ(Facebook)は閉じないでそのままにしておいて下さい。

エレメントとして登録する

レイアウトテンプレート一覧 → エレメント一覧 → 新規作成
set1.png

右下の新規作成をクリックします。
set2.png

※ファイル名を入力し、コピーしておいたコードを2つとも貼り付けます。※適当な半角英数字で
set2.2.png

を下記の様に書き換えます。この作業でレスポンシブに対応させ※各ページ毎のURLを指定します。
 
<div class="fb-comments" data-href="http://ratio32.msstyle.jp<?php echo $this->BcBaser->getHere(); ?>" data-width="100%" data-numposts="10"></div>

ドメインの部分をあなたのURLに変えてください。

注意: .com/ .net/ .jp/ など、最後のスラッシュ「/」は不要です。

※参考
現在のページの純粋なURLを出力する関数と使い方​

書き換えた状態です。
set3.png

これで保存します。
 
これでFacebookコメントを呼び出せる状態になりました。エレメント(パーツ)として作っておけば、一括表示させたりまとめて変更することが出来ます。
 

ブログに設置してみよう

single.php に移動します。

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

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

設置コード
<?php $this->BcBaser->element('fbcom') ?>

エレメントを呼び出す関数になります。このコードを表示させたい箇所に入れるだけでコメントを表示できます。

表示結果

ブログ(記事)を更新して表示結果を確認してみます
set6.png

この様に表示されていると思いますが、正しく機能するかこのページのソースを見てみます。「Ctrl + U 」でソースを開いて該当部分をチェックしましょう。下記のように正しく現在のページのURLが出力されていないと機能しません。
set7.png

URLが正しく出力されていればOKです。気になる方は、各記事ごとにソースを開いてこの部分のURLを確認してみて下さい。

固定ページにも設置できますので、やってみたい方はレイアウトテンプレート(default.php)に呼び出すコードを設置してみて下さい。(バックアップは忘れずに)

ニーズがあれば固定ページへの設置方法もご紹介させて頂きます。このページのコメント欄 または お問い合わせからご連絡ください。
この段階でFacebookコメントプラグインは機能いたします。投稿・返信のやり取りも可能です。以降の設定で、コメントの通知やモデレーション(認証)の設定が可能になりますので、最後まで設定されることをオススメいたします。
スポンサードリンク

コメントの設定・管理方法

コメントの通知設定を行う

通知設定をしないとコメントが来たことが分からないので、設定されることをおすすめします。

こちらにアクセスします。
→ コメントモデレーションツール – Facebook開発者

作成したアプリ名を確認し設定をクリックします。
fbcoms1.png

通知を有効にするを ON 設定。他の項目も任意で設定できます。
fbcoms2.png

画面が閉じますので、再度 設定 をクリックしてモデレーターを選択します。
fbcoms3.png

こちらに通知したい人(あなた)の名前を入れます。候補が出てきますので選択して保存します。
fbcoms4.png

これでコメントが通知されるようになりました。
※自身でコメントした場合は通知されませんので、別のアカウント(家族や友人など)でテストしてみて下さい。

この様にコメント通知がきました。(画像はスマホです)
fbcoms5.png

これでコメントを見落とすことが無くなると思います^^ (登録メールアドレスにも通知がきます)

開くと、コメントされたページへのリンクがありますので確認できます。
fbcoms6.png

コメントのモデレーション(承認・公開)の設定。※オプション

同様に設定からモデレーションの設定が可能です。
fbcoms7.png
 

コメントの一括管理の設定※オプション

『モデレーションツールを使用するには、FacebookアカウントかFacebookアプリのいずれかをコメントプラグインの実装と連携させる必要があります。』とありますので、推奨に従って下記を設定します。

◆詳細はこちら
コメントプラグインモデレーションの設定
 
<meta property="fb:app_id" content="{YOUR_APP_ID}" />
これにあなたのアプリID を入れます。 fbcoms8.png

あなた様に書き換えたコードをブログに設置しますので、blog.php に移動します。

レイアウトテンプレート一覧 → blog.php

当サイトではこの部分に記述しました。
fbcoms9.png
{ }← 括弧の記述は不要です。

※固定ページにもコメントプラグインを設置する場合は、default.php にも記述しましょう。

正しく設定できるとコメント欄に下記のリンクが表示されます。(管理者のみ)
fbcoms10.png

また、設定で「添付ファイルを有効」にしていると、カメラ(画像)リンクが表示され画像の添付が可能になります。(Facebookにログイン時)
 

コメントプラグインに関する公式ページのリンク

コメントプラグイン

コメント-ソーシャルプラグイン

コメントモデレーションツール

コメントモデレーションツール 開発者向けFacebook

コメントプラグインに関する詳細が記載されていますので、ブックマークしておくことをオススメいたします。
 

その他 おすすめ・参考ページ

最後に・・・

フェイスブックコメントプラグインは、拡散力もありますのでおすすめのコメントプラグインの1つです。しかしながら、実名で登録されている分、コメントするのに躊躇してしまう方もおられると思います。これがデメリットになるかもしれません。

気軽にニックネームで投稿出来るものでは無いので、あなたのサイトにあったコメントプラグインを探してみて下さい。

次回は、コメント欄を設置する方法第二弾として、DISQUS コメントフォームを設置する方法をご紹介したいと思います。

DISQUS コメントフォームを設置したデモページ

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

にほんブログ村 デザインブログ Webデザインへブログランキング

月別アーカイブ一覧


新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

2019-05-23

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

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

2019-05-23

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

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

2019-05-23

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

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

2017-06-25

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

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

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

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL...

baserCMS

CakePHP(tm) : Rapid Development Framework