FacebookコメントプラグインをbaserCMSに導入する方法【ratio_3_2】｜カスタマイズ｜新着情報｜baserCMSテーマ ratio_3_2（レシオ３２）おすすめのカスタマイズ方法をご紹介します～カスタムスタイル～

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

作成 2017-02-14 18:30:00
更新：2018-05-06 13:09:00

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

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

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

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

デモページ（固定ページ）

→ デモページ

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

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

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

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

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

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

必要なもの

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

スポンサードリンク

設置手順

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

→ 開発者向けFacebook

１．新しいアプリを追加をクリック

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

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

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

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

６．コメントを選択

７．ウェブをクリック

８．あなたのサイトURLと＊投稿数を入力（＊後で変更できます）

９．コードを取得します。

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

ご覧のページ（Facebook）は閉じないでそのままにしておいて下さい。

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

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

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

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

②を下記の様に書き換えます。この作業でレスポンシブに対応させ※各ページ毎の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を出力する関数と使い方

書き換えた状態です。

これで保存します。

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

ブログに設置してみよう

single.php に移動します。

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

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

設置コード

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

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

表示結果

ブログ（記事）を更新して表示結果を確認してみます

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

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

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

ニーズがあれば固定ページへの設置方法もご紹介させて頂きます。このページのコメント欄 または お問い合わせからご連絡ください。

この段階でFacebookコメントプラグインは機能いたします。投稿・返信のやり取りも可能です。以降の設定で、コメントの通知やモデレーション（認証）の設定が可能になりますので、最後まで設定されることをオススメいたします。

スポンサードリンク

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

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

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

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

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

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

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

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

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

この様にコメント通知がきました。（画像はスマホです）

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

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

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

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

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

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

◆詳細はこちら
→ コメントプラグインモデレーションの設定

<meta property="fb:app_id" content="{YOUR_APP_ID}" />

これにあなたのアプリID を入れます。

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

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

当サイトではこの部分に記述しました。

｛　｝← 括弧の記述は不要です。

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

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

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

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

コメントプラグイン

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

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

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

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

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

最後に・・・

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

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

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

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

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