スタッフブログ
Staff Blog
Staff Blog
表題の通り、自分のブログにFacebookコメントを実装する手順を説明したいと思います！
なお、このパーツ（Facebookコメント）を導入するには、当然ですがFacebookのアカウントが必要になりますのでご注意を！また、私のブログはMovableTypeで構築されてますので、あくまでもMovableTypeに実装する場合の手順となりますで、ご了承くださいね。
- Facebookにログインしてからフッターのナビゲーションにある「開発者」を選択します。
-
下記画像の画面に遷移するので緑色ボタンの「サイトにFacebookを統合」を選択します。
- 左のナビゲーションメニューから「Core Concepts」を選択した後、「Social Plugins」を選択します。
- 右のリストの中に色々なパーツが表示されるのでその中から「Comments」を選択します。
-
下記画像のような、ソース生成ツールが表示されます。
「URL to comment on」
コメントを受け付ける当該ページのURLを指します。まずはデフォルトの「example.com」でソースを出力します。
「Number of posts」
受け付けたコメントの一覧件数の値を入力します。表示させたい件数を入力します。
「Width」
貼りつけるコメント部分の横幅の値です。
自分のブログの貼りつけたいカラムの横幅と揃えます。
- 「Get Code」を選択して生成されたソースをメモ帳などに一旦コピペします。
-
MovableTypeでは個々の記事（エントリー）ページにこのパーツを組み込みたいので値を変更する必要があります。コピペしたソースの「example.com」の部分を「<$MTEntryPermalink$>」に書き換えます。
例<fb:comments href="<$MTEntryPermalink$>" num_posts="5" width="460"> -
アプリIDを取得したいので、下記URLにアクセスします。
https://www.facebook.com/developers/createapp.php -
アプリケーション名を任意の名称にて記入し、「同意する」にチェックして「アプリケーションを作成」を選択します。
- さらにセキュリティチェックのページに遷移するので表示されている文字列を記入して送信します。セキュリティチェックが通れば、アプリの詳細な仕様が設定できる画面に遷移します。
- 左のナビゲーションより「Web Site」を選択します。
- 選択した後に表示される右側のステータスより「アプリケーションID」の値を、【６】の工程で取得したソースの「appId=●●●」の値とコピペなどで入れ替えます。
- 【6】で取得したソースは英語表記となっているので「src=http://connect.facebook.net/en_US/」の末尾「en_US」を「ja_JP」に変更して日本語表記にします。
- MovableTypeの管理画面にログインし、テンプレートモジュールの「コメント」を取得したソースに置き換えて再構築を実施します。
- 以上で作業は完了です。実際に表示されるか確認してみましょう！
ちなみにこのブログもFacebookコメントにしてみました。
「組み込み出来た！」などなどお便りなどお待ちしております！
現在コメントは受け付けておりません。ご了承ください。