Facebookのブログパーツ「コメント入力欄」を設置する

photo by Sean MacEntee

Facebook のブログパーツの一つである「コメント入力欄」。ブログには元々コメント/トラックバック機能があり、コメントをつけてもらうことができますが、最近はスパム行為に使われることがあります(実際にスパムコメントだらけのブログも見かける)。また匿名でつけられることから「通りすがり」「匿名」「メアドは公開」「名無し」等とハンドルになっていないハンドルで投稿されたり、ネガティブコメントをつけられることがあります。

Facebookコメントは、Facebookアカウントを持っていないとコメントを入力できないので、名前を名乗らない人のコメントを避けることができます。

Facebookコメント欄を個別ブログ記事に設置する

入力する項目は以下の通りです。

URL to comment on:表示するブログURL。

Width:コメント欄の横幅。特に指定しなくても問題ありません。

Number of Posts:コメントを最新のものから何件表示するか設定します。デフォルトは5件で、6件以前は「他****件」と表示され、これをクリックすると見ることができます。

Color Scheme:light/darkから選択。バックグラウンドカラーを青か黒から選択できる。

Get Codeを押すと、HTML5でJavaScript SDKコードとコメントタグのコードが出力されます。以前はXFBML/IFAMEコードも出力されましたが、現在は出力されません。

JavaScript SDKコード/コメントタグの埋め込み

コードの設置:Facebookボタンの設置でもそうでしたが、JavaScript SDK のコードを<body>タグより前に埋め込んでおきます。

<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>

Simplicity2やStinger系等すでに対応済みテーマを使用している場合は、JavaScript SDK のコードを埋め込む必要はありません。

あとは、コメント欄を設置したい位置にタグを埋め込めばよいのです。

Facebookコメント欄をレスポンシブに対応させる

PC/スマホ両用できるレスポンシブに対応する方法は以下のコードをCSSに書き加えます。

/********facebookコメントを可変幅に********/
 .fb-comments,
 .fb_iframe_widget,
 .fb_iframe_widget[style],
 .fb-comments iframe[style],
 .fb-social-plugin span,
 .fb-comments span {
 width: 100% !important;
 display: block;
 }

レイアウトや設置場所によっては幅を調整した方がいい場合もあるかもしれません。その場合は、max-widthに幅を設定します。以下は、最大幅を450pxとした場合です。

/********facebookコメントを可変幅に********/
 .fb-comments,
 .fb_iframe_widget,
 .fb_iframe_widget[style],
 .fb-comments iframe[style],
 .fb-social-plugin span,
 .fb-comments span {
 width: 100% !important;
 display: block;
 max-width:450px;/*最大幅450px*/
 }

参考サイト:http://shouken56.net/blog/wordpress/2957/

スパムコメントのほとんどは海外から来ており、国内ではあまり見かけませんが、名前を名乗らない人のコメントがつくことはよくあります。こういうことを避けるには、Facebookコメントを使うのが一つの方法で、中にはブログのコメントは無効にして、Facebookコメントだけを設置している例もよくあります。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする