WordPressで「いいねボタン」のコメント投稿用パネルが途中で見切れてちゃんと表示されない

WordPress Twenty Twelve 1.1 に Facebook いいねボタン(XFBML版、HTML5版) を設置すると、コメント投稿用のパネルがうまく表示されません。そのままだと、いいねボタンのサイズでパネルの端が切れてしまい、残念な感じになります。

こんな感じ。

2013-05-31_3.40.39_facebooklikebuttonerror

これは、HTML5版 でも XFBML版 でも同じ。

Layout Style が button_count でも box_count でも同じ。(試してないけど standard も?)

 ちゃんと表示されない原因は iframe に対するCSS

調べてみると、いいねボタンのコメントのバネルが表示されない原因として、以下の CSS が影響しているのが原因のようなので、、、

/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
	max-width: 100%;
}

いいねボタンを設置している HTML にクラスをふって、以下のような CSS を追加しました。

.social-media iframe {
	max-width: none !important; /* for Facebook Like button */
}
20140915追記

iframe に元々クラスがふってあるようなので、以下のようにするほうがいいですかね。

.fb_iframe_widget_lift {
  max-width: none !important; /* for Facebook Like button */
}

これでちゃんと表示されるようになりました。

↓試してみて下さいw

東京都内で仕事をしています。猫飼いたいです。30歳からピアノ始めたおじさんです。盆栽にも興味が出てきました。
最近ブログ用のTwitterアカウントを作成したので、是非フォローをしてください。@zakkiboooks

 コメントをどうぞ

  • 入力いただいたメールアドレスは公開されませんが、このブログが置いてあるサーバーに保存されます。
  • 入力いただいた情報の他に、WordPress の機能により IPアドレス を取得させていただきます。取得した IPアドレス はスパムコメントの対処ために利用され、公開することはありません。
  • 個人情報などを記入された場合、投稿いただいたコメントを表示しないか、該当箇所を編集して公開する可能性があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。