はてなブログにFacebookのコメント欄を設置する方法
スポンサードリンク
Facebookのコメント欄
このブログにFacebookのコメント欄をつけてみました。それぞれの記事の下の方に表示しています。
ただし、設置したばかりなので正しく動作するかどうかまだわかりません。なので、この記事は後で修正するかもしれませんが暫定的に設定方法を公開しておきます。皆さんからのアドバイスをお待ちしております。
Facebook Developersに自分のサイトのURLを登録する
コメント欄に限らず、Facebookに関連するものを他のWebサイトで利用したい場合は、Facebook Developersを開きます。
デベロッパーアカウントの登録方法は省略しますが、簡単な英語で表示されるので流れに沿って入力します。
自分のサイトのURL登録
まず、Facebookコメント欄を設置したいWebサイトのURLを登録します。
画面上部の[My Apps]メニューから[Add a New App]を選びます。*1
[新しいアプリを追加]画面で[ウェブサイト]を選びます。
コメント欄用のコード取得
画面遷移方法が複数あるので、この記事ではコメント欄設定ページに直接アクセスできるURLを紹介します。
https://developers.facebook.com/docs/plugins/comments/?locale=ja_JP
大まかな分類としては、[シェア]-[ソーシャルプラグイン]-[コメント]となります。ソーシャルプラグインにはコメント欄の他に「いいね！」ボタンや「送る」ボタンなどがあります。
上記のURLにアクセスすると、コメント欄の表示方法をカスタマイズできる画面が表示されますが、ひとまずデフォルトのまま[Get Code]をクリックします。
- 「Initialize the JavaScript SDK using this app:」欄にアプリ登録したURLが表示されていることを確認します*2
- 「Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.」欄に表示されているコードをコピーして、はてなブログの<body>タグの内側に貼り付けます。
- 「プラグインを表示したい場所にプラグインのコードを配置します。」欄にあるコードをコピーします
- コピーしたコードをテキストエディタなどで開き、以下のように変更して、はてなブログコメント欄を設置したい場所に貼り付けます。
変更前
<div class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-numposts="5" data-colorscheme="light"></div>
変更後
<div class="fb-comments" data-href="{Permalink}" data-numposts="5" data-colorscheme="light"></div>
▼Facebook Developers側のコード取得画面
はてなブログ側で2.と4.のコードを貼り付ける場所ですが、私は[デザイン]-[カスタマイズ（ドライバのアイコン）]-[記事]-[記事下]にしました。
4.で書き換えた{Permalink}はこの画面の[使用可能な変数]をクリックすると「記事URL」として表示されるので、これを確認してコピーした方が確実です。
もしかすると、もっと適切なコード入力欄があるかもしれないのでご存知の方は教えてください。
今後の課題
以上がはてなブログにFacebookのコメント欄を設置する手順でした。以下は今後の課題を自分の備忘録的に追記しておきます。
投稿されたコメント内容の確認
コメント欄に投稿された内容を確認する場合は、
https://developers.facebook.com/tools/comments/
を開けばよいようなのですが、なにぶんまだコメントがつかないのでわかりません。
コメント投稿欄の日本語表示
設置したコメント投稿欄のユーザインターフェースが英語のままなので、これを日本語に変更したいです。
ソースコードの入力
これは、Facebookコメントと関係ありませんが、はてなブログでソースコードを表示する際は「はてな記法モード」または「Markdownモード」にしなければいけないのでしょうか？
いつも、「編集見たままモード」で記事を書き始めて、[HTML編集]欄で<code>タグが使えないことを思い出して後悔します。
詳しい方からの助言をお待ちしております。
