プラグインを使わずにWordPressにFacebookコメントを設置

WordPressで運用している本Blogに、プラグインを使わずにFacebookコメント欄を設置してみたので、コメント欄設置方法のメモ。

  1. Facebbok開発者ページでFacebbokアプリを登録する
  2. Facebookにログインした状態で、Facebookアプリを新規登録する。
    Facebookアプリを新規登録する

    ■Facebookアプリの新規登録
    Facebook Developers

    アプリ名:アプリケーションを識別する名称
    アプリの名前空間:Facebook上で識別されるアプリの名称
    アプリのカテゴリ:カテゴリ

    FacebookアプリのApp IDは、最後に設定する管理用のコードを設置する際に必要になるのでメモしておくとベター。

  3. Facebookコメントの設定ページにアクセスしてコードを取得する
  4. Facebookコメントの設定ページにアクセスしてコードを取得する。

    Facebookコメントの設定ページは以下より。

    Comments – Facebook開発者

    Comments Facebook開発者

    URL to comment on:とりあえずそのまま
    Width:Facebookコメントの幅、好みで設定する
    Number of Posts:表示するコメントの数
    Color Scheme:カラーカスタマイズ、light/darkから設定可能

    設定が完了したら、同ページ内にある『Get Code』からコメント欄設置用のコードを取得する。

  5. WordPressテンプレートにコードを挿入する
  6. コメント欄設置用のコード取得が完了したら、WordPressのテンプレートにコードを挿入する。

    ■コード出力内容
    Comments Facebook Developers

    ①はテンプレートのheader.phpに挿入する。
    ②はコメント欄を表示する箇所(自分の場合はsingle.php)に挿入する。

    この時、②のURL部分(http://exsample.com)を、閲覧中のエントリのURLを示すWordPressのコード内容(以下)に差し替えるする。

    ■変更する内容


    ■差し替えた後のコード内容②

    この部分の変更は、設定画面で変更すると何故かエラーになるので、コードを取得してから編集する必要がある。少々手間(^ ^;

    この二つのコードの設置が終わると、コメント欄が表示されるようになる。

    ■Facebookコメント欄が表示される
    Facebookコメント欄が表示

  7. 管理用のコードを埋め込む
  8. 最後に、コメントを管理するためのタグを埋め込む。

    コメントを管理するためのコードは以下。


    上記コードを、header.phpに挿入して、コメントモデレーションツールのURL(以下リンク)にアクセスすると、投稿されたコメントを管理することが可能となる。

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

今回、Facebookコメントを設置したのは、コメントを集めて交流したい。
というよりも、閲覧者がFacebookでカンタンにサイトを共有するためのフローとして設置した意味合いの方が強いので、BlogエントリがFacebookへ共有してもらえるようになったら嬉しいなと。