Photo by marcopako
Facebook 形式のコメントを設置して、ブログを通して意見交換をしたりフィードバックを得たりしましょうー。
ブログでは通常のコメントではなく、Facebook 形式のコメントを置いたほうが、以下の面でメリットがあります。
- 実名のコメントなので、荒らされたりネガティブなコメントがつきにくい
- コメントされることで、その友達にウェブページの情報が届きブログの情報を広げることができる
でも、通常のコメントの匿名性もなかなか捨てがたく、気軽にコメントされるという点では、通常のコメントも良いですよね！
最近は、通常のコメント ＋ Facebook コメント の2つを設置しているサイトも良く見ます。
いずれにしても、ウェブサイトをさらに知ってもらうために、見ている方と楽しくコミュケーションをする場として、Facebook のコメントを設置しましょう！
Facebook コメント HTMLコードの取得
まず、Facebook にログインしていない場合はログインします。
http://developers.facebook.com/docs/reference/plugins/comments/ に移動し、以下のボックスに必要事項を記入します。
それぞれの設定値は以下となります。
- URL to Comments on
- Number of posts
- Width
- Color Scheme
ウェブサイトの URL を記入します。
ブログの各記事にコメントを設置するケースがほとんどだと思いますので、とりあえずここにはダミー (http://example.com とか) を入力し、あとから運営しているブログにあわせて値を設定します。
コメントが表示される数を記入します。
コメントに返信がつくと、その返信は１つのコメントとしてはカウントされないようです。
コメント全体の幅を指定します。 (単位: ピクセル)
体裁が崩れないよう、400 以上の値が推奨されています。設置するウェブサイトのレイアウトも参考にして決定しましょう。
"light" と "dark" が選択できます。
一般的に見かけるのは "light" ですが、設置するウェブサイトの背景色との折り合いで選択しましょう。
以上を設定したら、"Get Code" をクリックして HTMLコードを入手しましょう。
このコード生成画面で、 [Facebookとブログ連携はじめの一歩！] ウェブページ・アプリケーションの作成 | C-through the Mac で作成したアプリケーションの "Display name" および "App ID" が表示されていることを確認します。
HTMLコードをウェブサイトにコピペする
実際に取得したコードを設置するウェブサイトに貼り付けます。
<body> タグのすぐ後ろに以下をコピペします。
※「いいね！」ボタンや Like Box の設置のため既に貼付けている場合は不要です。
<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&appId=406xxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
コメントを設置したい箇所に以下をコピペします。
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
「data-href」の URL は、設置する各記事の URL にする必要があります。運営されているブログで指定する値が異なるので、それぞれ確認しましょう！
また、コードの 「data-width="470"」の数値を変更することで、横幅を変更できます。これを変更して実際の貼り付けた外観を確認しながら、ベストなサイズを決めましょう。
以上で終了です！ 「いいね！」ボタン、Like Box、そしてこの コメント を設置すれば、ブログでの Facebook 設定は十分でしょう！
Facebook を通して、情報を拡げて色んな人とコミュニケーションをして楽しみましょう！
「いいね！」ボタンと Like Box の設置方法はこちら。
++++++
コメント