Facebookコメント欄を導入してみました。公式プラグインや、コメントアプリの作成フローについて。

会員制サイトを作るにあたり、不特定多数をユーザーにしようとすると、様々な壁にぶつかります。
コメントもその一つです。

icins-facebook

スパム対策はもちろんですが、
・ユーザー同士のコメント承認をどうするか
・他人のコメントやアドレス・IP情報が見れたり
・他人のコメントを編集できたり

等々。
権限を細かく設定し、検証を行う必要がありそうなので、結局コメントはFacebookを導入します。
プラグインについてや、アプリ作成のフローを記録しておきます。

まずはFacebookのデベロッパー登録

すみません、これは以前やってたので今回は割愛。。
電話番号の認証が上手くできなかったりと、意外と苦労した記憶はあります。

Facebook developers アプリ作成フロー

調べながら行ったので順序が前後した部分もありますが、恐らく下記フローで問題ないと思います。

新しいアプリを作成

デベロッパー登録完了後、
https://developers.facebook.com/
にアクセスします。

facebook-comment-app_03

「Apps」をクリックすると、Create New App が現れるのでクリック。

facebook-comment-app_07

Display Name ・・・管理画面に表示される名前。何でも良いかと。

Namespace・・・こちらは他のアプリとも区別させるものなので、かぶらないものじゃないといけません。

いいえ・・・恐らく、テストアプリかどうかだと思います。そのままで大丈夫かと。

カテゴリ・・・任意で決めましょう。

Dashboardメニュー

facebook-comment-app_11

後述のFacebook公式 wordpressプラグインを使う場合、App ID と App Secretが必要です。

Settingメニュー

facebook-comment-app_15

この辺が調べながらだったので前後した部分がありました。

App Domains(使いたいドメイン名httpなし) と Contact Email を入力します。

facebook-comment-app_18

+Add Platform をクリックすると、

facebook-comment-app_10

各種プラットフォームが選択できるのでサイトで使いたい場合はWeb Site をクリックします。

facebook-comment-app_19

site URL と、モバイルサイトもある場合はURLを入力します。
(今回はレスポンシブだったので、その場合は同じでOKでした。)

Status & Review メニュー

facebook-comment-app_31

ボタンをクリックすると、Publicにする?と聞かれます。

facebook-comment-app_35

設定は後からでも変えられますが、最終的にYESにすればOKだと思います。

Facebook公式 wordpressプラグインを試してみる。

facebook のダウンロード

プラグイン名:
Facebook
サイトリンク:
https://wordpress.org/plugins/facebook/

プラグイン>新規追加>Facebook検索で出てきます。
有効化にしてみます。

コメント機能を使うには、AppIDとApp Secretが必要。

facebook-comment-app_31

有効化しただけで、管理画面にFacebookメニューが出てきますが、AppIDを入力しないとコメントメニューは現れません。

Facebook>一般 で作成したアプリのAppIDとAppSecretを入力しましょう。

Facebook Comments Box の設定

facebook-comment-app_38

post・・・投稿
page・・・固定ページ
attachment・・・画像
となりますので、任意でチェックします。その他の設定も任意で!

「変更を保存」でいざFacebookのコメントを有効に!!!

なん・・・だと・・・・・

サイトが激重ぷんぷん丸に。

一応、P3という計測ツールをわざわざインストールして計測してみましたが・・・

facebook-comment-app_34

こんなことに。。。他の重そうなプラグイン切ったりもしてみたんですが同じ状態。
wordpress4.0でテストはされてないみたいでしたが(記事作成時点)・・・

全部のプラグイン切ったわけでもないので原因はわかりません。
管理し易いのはもちろんプラグインの方なので、試す価値はアリです!!

というわけでコードを取得してテーマファイルにブチこみます。

コメント欄のコード取得

まずはコードを取得します。

http://developers.facebook.com/docs/reference/plugins/comments/

facebook-comment-app_51

URL to comment on にサイトのURLを入力します。
wordpressの場合はとりあえずTOPページのアドレスで大丈夫です。

Get Code を押したとき、
facebook-comment-app_46
このアラートがでる場合はStatus & Review がPublicになっていない時ですね。

公開設定にしていると表示されません。

テーマファイルの編集については超分かり易い記事紹介。

いっちばん大事な部分ですが、こちらの記事より分かり易い内容は書けません(笑)
下記サイト様を見て下さい(笑)

参考記事:
【WordPressのコメント欄をデフォルトからFacebookに変更してみた】
サイトリンク:
http://www.32style.com/fb-comments/

モバイル振り分けの方法も書かれています。超親切!!!!

僕はcomments.phpの内容をまるっとFB仕様にしちゃいました。

無事反映!

facebook-comment-app_54

確認しましたが、問題なさそうです。

ちなみに、レスポンシブにならないじゃん!!!と思ったら、スマホ用は最適化されたアプリが生成されるので問題ありません。

↓スマホ表示
facebook-comment-app_51

CSSを加えてレスポンシブに~~というのはやったことありましたが、今は仕様が変わってできなくなってるみたいですね。
無事、コメントをFacebookに連動できました!!

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • 具体的なエラー画面などがある場合は添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)