会員制サイトを作るにあたり、不特定多数をユーザーにしようとすると、様々な壁にぶつかります。
コメントもその一つです。
スパム対策はもちろんですが、
・ユーザー同士のコメント承認をどうするか
・他人のコメントやアドレス・IP情報が見れたり
・他人のコメントを編集できたり
等々。
権限を細かく設定し、検証を行う必要がありそうなので、結局コメントはFacebookを導入します。
プラグインについてや、アプリ作成のフローを記録しておきます。
目次
まずはFacebookのデベロッパー登録
すみません、これは以前やってたので今回は割愛。。
電話番号の認証が上手くできなかったりと、意外と苦労した記憶はあります。
Facebook developers アプリ作成フロー
調べながら行ったので順序が前後した部分もありますが、恐らく下記フローで問題ないと思います。
新しいアプリを作成
デベロッパー登録完了後、
https://developers.facebook.com/
にアクセスします。
「Apps」をクリックすると、Create New App が現れるのでクリック。
Display Name ・・・管理画面に表示される名前。何でも良いかと。
Namespace・・・こちらは他のアプリとも区別させるものなので、かぶらないものじゃないといけません。
いいえ・・・恐らく、テストアプリかどうかだと思います。そのままで大丈夫かと。
カテゴリ・・・任意で決めましょう。
Dashboardメニュー
後述のFacebook公式 wordpressプラグインを使う場合、App ID と App Secretが必要です。
Settingメニュー
この辺が調べながらだったので前後した部分がありました。
App Domains（使いたいドメイン名httpなし） と Contact Email を入力します。
＋Add Platform をクリックすると、
各種プラットフォームが選択できるのでサイトで使いたい場合はWeb Site をクリックします。
site URL と、モバイルサイトもある場合はURLを入力します。
（今回はレスポンシブだったので、その場合は同じでOKでした。）
Status & Review メニュー
ボタンをクリックすると、Publicにする？と聞かれます。
設定は後からでも変えられますが、最終的にYESにすればOKだと思います。
Facebook公式 wordpressプラグインを試してみる。
facebook のダウンロード
- プラグイン名：
- サイトリンク：
- [browser-shot width=”600″ url=”https://wordpress.org/plugins/facebook/”]
プラグイン＞新規追加＞Facebook検索で出てきます。
有効化にしてみます。
コメント機能を使うには、AppIDとApp Secretが必要。
有効化しただけで、管理画面にFacebookメニューが出てきますが、AppIDを入力しないとコメントメニューは現れません。
Facebook＞一般 で作成したアプリのAppIDとAppSecretを入力しましょう。
Facebook Comments Box の設定
post・・・投稿
page・・・固定ページ
attachment・・・画像
となりますので、任意でチェックします。その他の設定も任意で！
「変更を保存」でいざFacebookのコメントを有効に！！！
なん・・・だと・・・・・
サイトが激重ぷんぷん丸に。
一応、P3という計測ツールをわざわざインストールして計測してみましたが・・・
こんなことに。。。他の重そうなプラグイン切ったりもしてみたんですが同じ状態。
wordpress4.0でテストはされてないみたいでしたが（記事作成時点）・・・
全部のプラグイン切ったわけでもないので原因はわかりません。
管理し易いのはもちろんプラグインの方なので、試す価値はアリです！！
というわけでコードを取得してテーマファイルにブチこみます。
コメント欄のコード取得
まずはコードを取得します。
http://developers.facebook.com/docs/reference/plugins/comments/
URL to comment on にサイトのURLを入力します。
WordPressの場合はとりあえずTOPページのアドレスで大丈夫です。
Get Code を押したとき、
このアラートがでる場合はStatus & Review がPublicになっていない時ですね。
公開設定にしていると表示されません。
テーマファイルの編集については超分かり易い記事紹介。
いっちばん大事な部分ですが、こちらの記事より分かり易い内容は書けません（笑）
下記サイト様を見て下さい（笑）
- 参考記事：
- 【WordPressのコメント欄をデフォルトからFacebookに変更してみた】
- サイトリンク：
- [browser-shot width=”600″ url=”http://www.32style.com/fb-comments/”]
モバイル振り分けの方法も書かれています。超親切！！！！
僕はcomments.phpの内容をまるっとFB仕様にしちゃいました。
無事反映！
確認しましたが、問題なさそうです。
ちなみに、レスポンシブにならないじゃん！！！と思ったら、スマホ用は最適化されたアプリが生成されるので問題ありません。
↓スマホ表示
CSSを加えてレスポンシブに～～というのはやったことありましたが、今は仕様が変わってできなくなってるみたいですね。
無事、コメントをFacebookに連動できました！！