スタッフブログ

リアライズ
リアライズ
リアライズ
リアライズ

自分のブログにFacebookコメントを実装してみよう!

TAG with ,,,

表題の通り、自分のブログにFacebookコメントを実装する手順を説明したいと思います!
なお、このパーツ(Facebookコメント)を導入するには、当然ですがFacebookのアカウントが必要になりますのでご注意を!また、私のブログはMovableTypeで構築されてますので、あくまでもMovableTypeに実装する場合の手順となりますで、ご了承くださいね。

  1. Facebookにログインしてからフッターのナビゲーションにある「開発者」を選択します。
  2. 下記画像の画面に遷移するので緑色ボタンの「サイトにFacebookを統合」を選択します。
    20110411_WS000002.jpg
     
  3. 左のナビゲーションメニューから「Core Concepts」を選択した後、「Social Plugins」を選択します。
  4. 右のリストの中に色々なパーツが表示されるのでその中から「Comments」を選択します。
  5. 下記画像のような、ソース生成ツールが表示されます。
    20110411_WS000003.jpg

    「URL to comment on」
    コメントを受け付ける当該ページのURLを指します。まずはデフォルトの「example.com」でソースを出力します。

    「Number of posts」
    受け付けたコメントの一覧件数の値を入力します。表示させたい件数を入力します。

    「Width」
    貼りつけるコメント部分の横幅の値です。
    自分のブログの貼りつけたいカラムの横幅と揃えます。
     
  6. 「Get Code」を選択して生成されたソースをメモ帳などに一旦コピペします。
  7. MovableTypeでは個々の記事(エントリー)ページにこのパーツを組み込みたいので値を変更する必要があります。コピペしたソースの「example.com」の部分を「<$MTEntryPermalink$>」に書き換えます。
    例<fb:comments href="<$MTEntryPermalink$>" num_posts="5" width="460">
  8. アプリIDを取得したいので、下記URLにアクセスします。
    https://www.facebook.com/developers/createapp.php
  9. アプリケーション名を任意の名称にて記入し、「同意する」にチェックして「アプリケーションを作成」を選択します。
    20110411_WS000004.jpg
     
  10. さらにセキュリティチェックのページに遷移するので表示されている文字列を記入して送信します。セキュリティチェックが通れば、アプリの詳細な仕様が設定できる画面に遷移します。
  11. 左のナビゲーションより「Web Site」を選択します。
  12. 選択した後に表示される右側のステータスより「アプリケーションID」の値を、【6】の工程で取得したソースの「appId=●●●」の値とコピペなどで入れ替えます。
  13. 【6】で取得したソースは英語表記となっているので「src=http://connect.facebook.net/en_US/」の末尾「en_US」を「ja_JP」に変更して日本語表記にします。
  14. MovableTypeの管理画面にログインし、テンプレートモジュールの「コメント」を取得したソースに置き換えて再構築を実施します。
  15. 以上で作業は完了です。実際に表示されるか確認してみましょう!


ちなみにこのブログもFacebookコメントにしてみました。
「組み込み出来た!」などなどお便りなどお待ちしております!

 


現在コメントは受け付けておりません。ご了承ください。