Facebookのコメント欄を自分のブログの最後に設置する方法

WordPressで作成している、自分のブログにFacebook(以下FB)のコメント欄を載せる方法を紹介します。

作成までの大きな流れ

  1. アプリケーションIDを取得する為にFBにログインしている状態で、「facebook for developers」にアクセス
  2. アプリケーションIDを取得・・・・・★
  3. コメントプラグインでコードを取得
  4. 作成したコメントプラグインと★で作成したアプリケーションIDを紐付ける
  5. 自分のブログに設置する

1. アプリケーションIDを取得する為にFBにログインしている状態で、「facebook for developers」にアクセス

facebook for developers

2. アプリケーションIDを取得

スクリーンショット_052716_035619_PM

(1) 新しいアプリを追加ボタンをクリック

スクリーンショット_052716_035703_PM

(1) basic setupをクリック

スクリーンショット_052716_035726_PM

必要事項を入力

(1) 表示名:一覧で表示される名前です
(2) ネームスペース:他の作成されているアプリケーションと同じ名前では作成できません
(3) いいえでOK
(4) 連絡先メールアドレス:自分のメールを入力(5) カテゴリ:アプリケーションに合ったカテゴリを選択してください

3. コメントプラグインでコードを取得

コメントプラグインを作成する為に以下のURLにアクセス

https://developers.facebook.com/docs/plugins/comments

スクリーンショット_052716_040013_PM

(1) コメントするURL:コメントを掲載する投稿や固定ページのURLを入力
(2) 幅:表示する横幅を指定
(3) 投稿数:表示するコメントの数を指定

入力が完了後に「コードを取得」をクリック

4. 作成したコメントプラグインと★で作成したアプリケーションIDを紐付ける

スクリーンショット_052716_040133_PM

スタップ1:アプリIDと言語を選択します
ドロップダウンで、1.で作成したアプリケーションを選択。言語も併せて選択。

ステップ2:
ステップ3:
上記で取得したHTMLのコードをコピーする

5. 自分のブログに設置する

スクリーンショット_052716_040220_PM
自分の投稿ページや固定ページの本文の部分に上記でコピーしたコードを貼り付ける。
※ 同じ本文の部分にステップ2とステップ3を貼り付けてもほぼ動きます。

実際にコメントをする

スクリーンショット_052716_040536_PM

コメントをする際に、Facebookにも投稿をチェックした場合のみ自身のウォールに表示されます。

実際に貼り付けた記事

http://blog.dreamhive.co.jp/kenta/archives/5649


You may also like...