facebook logo
Photo by marcopako 

Facebook 形式のコメントを設置して、ブログを通して意見交換をしたりフィードバックを得たりしましょうー。


ブログでは通常のコメントではなく、Facebook 形式のコメントを置いたほうが、以下の面でメリットがあります。

  • 実名のコメントなので、荒らされたりネガティブなコメントがつきにくい
  • コメントされることで、その友達にウェブページの情報が届きブログの情報を広げることができる

でも、通常のコメントの匿名性もなかなか捨てがたく、気軽にコメントされるという点では、通常のコメントも良いですよね!
最近は、通常のコメント + Facebook コメント の2つを設置しているサイトも良く見ます。


いずれにしても、ウェブサイトをさらに知ってもらうために、見ている方と楽しくコミュケーションをする場として、Facebook のコメントを設置しましょう!


スポンサーリンク

Facebook コメント HTMLコードの取得

まず、Facebook にログインしていない場合はログインします。


http://developers.facebook.com/docs/reference/plugins/comments/ に移動し、以下のボックスに必要事項を記入します。


fb_comment01

それぞれの設定値は以下となります。


  • URL to Comments on
  • ウェブサイトの URL を記入します。
    ブログの各記事にコメントを設置するケースがほとんどだと思いますので、とりあえずここにはダミー (http://example.com とか) を入力し、あとから運営しているブログにあわせて値を設定します。


  • Number of posts
  • コメントが表示される数を記入します。
    コメントに返信がつくと、その返信は1つのコメントとしてはカウントされないようです。


  • Width
  • コメント全体の幅を指定します。 (単位: ピクセル)
    体裁が崩れないよう、400 以上の値が推奨されています。設置するウェブサイトのレイアウトも参考にして決定しましょう。


  • Color Scheme
  • "light" と "dark" が選択できます。
    一般的に見かけるのは "light" ですが、設置するウェブサイトの背景色との折り合いで選択しましょう。


以上を設定したら、"Get Code" をクリックして HTMLコードを入手しましょう。


このコード生成画面で、 [Facebookとブログ連携はじめの一歩!] ウェブページ・アプリケーションの作成 | C-through the Mac で作成したアプリケーションの "Display name" および "App ID" が表示されていることを確認します。


fb_comment02

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&amp;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 の設置方法はこちら。


[Facebook] いいね!ボタンを設置してサイトの情報をみんなに拡げる | C-through the Mac


[Facebook] Like Box を設置して ウェブサイトのファンを増やす | C-through the Mac

++++++

ライブドアブログに Facebookパーツを設置する方法 | C-through the Mac

スポンサーリンク