小粋空間  -  a cheap joke and a play on words site

Facebookのコメントボックスを黒背景のブログで使えるようにする

Facebookのコメントボックスを、黒背景のブログで使えるようにする方法について調べました。2011年4月時点の調査結果です。

2011.04.16 追記
コメントボックス作成画面に「Color Scheme」が追加されました。

以前のコメントボックス作成画面

2011年4月16日現在のコメントボックス作成画面（「Color Scheme」が追加）

適用後のデザイン

よって以下の記事は不要となります。

１．問題点

Facebookのコメントボックスは白背景であれば次のように表示されます。

黒背景の場合、コメント本文などが見えなくなってしまいます。

コメントボックスの表示はfb:commentsタグを設定し、それがiframe要素として展開されます。iframe要素までは（そのページのCSSで）スタイルを設定できますが、iframe内の要素についてはスタイルが適用されません。

２．対処案１

本質的な解決ではありませんが、旧バージョンのコメントボックスにすることで黒背景でも見えるようになります。

背景を変更するには、fb:commentsタグに対して次の5つの変更を行います。

• css属性を追加（適用したいCSSのURLを指定）
• xid属性を追加（ページを一意に決めるための番号を指定）
• url属性を追加（href属性と同じ内容を指定）
• simple属性を追加（trueを指定することで不要な背景を削除）
• href属性を削除

WordPressの場合の設定例は次のようになります。

変更前（赤色部分を削除）

<fb:comments
 num_posts="2"
 width="500"
 href="<?php the_permalink(); ?>"
 ></fb:comments>

変更後（青色部分を追加）

<fb:comments
 num_posts="2"
 width="500"
 css="http://www.fileden.com/files/2006/10/3/258652/dark_comments.css"
 xid="<?php the_id(); ?>"
 url="<?php the_permalink(); ?>"
 simple="true"
 ></fb:comments>

ただし、旧バージョンに戻すと以下の制約が発生します。

• これまで使っていたコメント情報が（多分）引き継がれません
• コメントがスレッド表示されません
• いいね！がコメントボックスの先頭に表示されます。

参考サイトは以下です。

• Facebook Plugins Dark Background Tutorial
• [TLK] Dark Background Tutorial (Comments-Box & Like-Button)

参考サイトには、旧コメントボックスの「いいね！」ボタンを非表示にする方法が書かれていましたが動作しませんでした。また、css属性の末尾に「?数字」を付与することが記載されていましたが、付与しない場合との差分が分かりませんでした。

ちなみに、CSSの変更可能なセレクタは以下に限定されている可能性があります（下記以外のセレクタのCSSを変更しても反映されなかったため）。

/* Like button text color */
div.like span.connect_widget_text {color:#eee;}
div.like div.connect_widget_confirmation {color:#eee;}
div.like span.connect_widget_text a {color:#ffc6ff;}
 
/* Comemnts box text color */
div.comment_body div.composer div.connected {color:#eee;}
div.comment_body div.composer div.connected div.UIImageBlock_Content {color:#fff;}
div.comment_body div.composer div.connected span.namelink a {color:#ffc6ff;}
div.comment_body div.post_area div.connected label {color:#ccc;}
div.comment_body div.show_connected a.editsettings {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 {color:#eee;}
div.comment_body div.wallkit_postcontent h4 a {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 span.wall_time {color:#ccc;}
div.comment_body div.wallkit_postcontent div {color:#fff;}
div.comment_body div.wallkit_postcontent div a {color:#c4ffc4;}
div.comment_body div.wallkit_actionset a {color:#ffc6ff !important;}
div.comment_body div.wallkit_subtitle div.post_counter {color:#ccc;}
div.comment_body div.wallkit_subtitle div.pager a {color:#ffc6ff;}
div.comment_body div.wallkit_subtitle div.pager a:hover {color:#fff;}
div.comment_body div.connect_area div.or {color:#eee;}
div.comment_body div.connect_area div.connect_button_text {color:#eee;}
div.comment_body div.wall_captcha {color:#eee;}
div.comment_body div.wall_captcha h3 {color:#eee;}
div.comment_body div.wall_captcha a {color:#ffc6ff;}
div.comment_body div.wall_captcha label {color:#eee;}

３．対処案２

こちらも本質的な解決ではありませんが、以下のCSSをブログに追加することで現行バージョンのコメントボックスの背景を白くします。

.fb_ltr {
    background:#fff;
}

４．その他

「いいね！」ボタンやアクティビティフィードなど、他のソーシャルプラグインでは「colorscheme」とう属性が追加されているので、コメントボックスにもいずれ追加されると思われます。試しにfb:commentsタグに「colorscheme="dark"」を追加してみましたが動作しませんでした。

それまでは３項の対処を行っておくことを推奨します。