「Facebookのコメントボックス」
についてお話します。
フェイスブックのコメントボックスと言う物を見た事があるかと思います。
これ実は書き込んだ内容がそのまま、自分のタイムラインに表示されます。
つまり、外部で書いた内容が、そのまま自分の記事になる。
と言うモノです。
これをブログやニュース記事に連携させれば……
書き込みが、そのままFacebookで拡散されます。
ブログなどの場合は、専用のコメント欄よりもずっと効果的です。
しかも、書き込みをする事で【いいね】を押した事にもなり、良い事だらけです。
Facebookに対する有用性と言う意味では、いいねボタンの比ではありません。
上の画像は、Facebookのタイムラインの画像です。
書き込んだコメント内容が表示されていますね。
先日のブログで書いた、OGPタグがそのブログに設定されていれば、ご覧の様に、
画像・タイトル・説明
がきちんと表示されますので、見た目も綺麗です。こうして見ると、OGPタグって大事ですよね。もしOGPタグが無ければ、単純にページタイトルとリンクURLが表示されるだけです。それでは、見た目で損をしていると思いませんか？
OGPタグについてはこちらをご覧ください。
さて、ではどの様にコメントボックスを設置するかですが、基本的なお話だけにさせて貰います。
と言うのも、実はブログに設置する場合、それぞれのブログ用に若干カスタマイズが必要になります。
ですので、今回は基本的な設置方法のみと言う事で、ご勘弁を。
もし、どうしても知りたいという方は、具体的なブログ名（アメブロ・ライブドア等）をコメントしていただければ、対応したいと思います。
Comments
コメントボックス下のリンクからコメントコードを生成します。
https://developers.facebook.com/docs/reference/plugins/comments/
URL to comment on
コメント欄を設置したい、サイトのURLを入力します。
この時、入力するのはドメインまでとしてください。
Width
表示するコメント欄の横幅です。
Number of posts
コメントを何件表示するかです。
最後に【Det Code】を押して、ソースコードが表示されます。
通常のブログであれば、表示されているコードをそのままコピーしてOKです。
1.JavaScript SDKを設置
上にあるJavaScript SDKをHTMLの＜bode＞タグの直後に書き込みます。
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2.コメント欄の設置
コメント欄を表示したい場所に、このコードを設置します。
この時に、このままのコードで設置してしまうと、このコメント欄は【hon-web.blogspot.jp】のコメント欄となってしまいます。
<div class="fb-comments" data-href="http://hon-web.blogspot.jp" data-width="470" data-num-posts="10"></div>
例えば、コメント欄をブログの記事に設置して個別にコメントを貰いたい場合には、下記の様に変更します。
<div class="fb-comments" data-href="【ここにブログの独自タグを入れる】" data-width="470" data-num-posts="10"></div>
ページURLの箇所に、各ブログで使用するページ生成タグを挿入します。
このタグは、それぞれのブログによって違うので、利用しているブログの仕様を確認してください。
もし、このURL設定をしないとどうなるか……
先ほど言った様に、一つのドメインのコメント欄として、認識されてしまうので、全てのブログページで同じコメントが表示されます。
今回は、最低でもある程度HTMLの知識が必要になります。
まぁ、基本的にはコピー＆ペーストで作業自体は簡単なのですが、ソースコードの何処に貼りつけるか？とか、ブログの独自タグの追加などと言った、少々込入った内容ですが、設置出来れば、Facebookに対しての効果は絶大です。
チャレンジして損は無いと思います。
各ブログの具体的な設置例などは、
アメブロ Facebook コメント欄
などの検索項目で検索出来るので、チャレンジしてください。
どうしてもわからない場合はコメントを頂ければ、調べる程度の事はしたいと思います。
神奈川県を中心として主に横浜・川崎・東京23区西部の中小企業・個人事業主向けホームページを制作しております。 横浜本田WEB
横浜本田WEB Facebookページ
http://www.facebook.com/hondaweb?fref=ts
