Facebook いいね！ボタンのコメント欄が表示されない問題2大パターンと解決方法

Facebook 外部サイトに置かれた「いいね！」ボタンを押すと
コメント欄が出てきますね。
お試し用のボタンを置いときますからお気軽にどうぞ。

そこにコメントを入れて Facebook に投稿ボタンを押すと
コメント付きで「いいね！」ができるしくみ。

ところが、このコメント欄が途中で切れてしまって
全体が表示されなくなってるのをよく見ます。

こうなるのにはいろんな原因があると思うんだけど、
見てるとだいたいこの2つのどっちかになってるので書いてみます。

これは他のウィジェットと並べてる場合に多い気がします。

ものすごく大雑把に書きますけどこんな感じで並んでて

いいねボタンの外側が overflow: hidden; の要素で括られてる。

これ、float: left; の回り込みを解除するためによく使われるやつですね。

この場合は li 要素を横に並べるために float: left; してあって
そのままでは float が生きたままになってるから overflow: hidden; で解除。

ところがこうなってると、
いいねコメント欄はオーバーフローするからヒドゥンにされちゃいます。

親要素に overflow を指定することで float の解除をしてもいいんだけど
clearfix を定義して ul に適用するとか

そもそも li を float: left; するのをやめて
代わりに display: inline-block; にするとかでいいんじゃないでしょうか。

これもよく見ますね。
埋め込んだ要素が枠からはみ出さないようにつけるやつ。

WordPress のデフォルトテンプレートでも
Twenty Eleven に始まって Twenty Fourteen に至るまで全部についてます。

ところがこうなっていると、Facebook のいいねウィジェットにまで影響してしまいます。

埋め込まれたウィジェットタグの中はこんなふうに展開されて

この iframe の max-width が 100% になっていると
iframe の幅の上限が親要素の span の幅になってしまうため
その幅の外側を表示することができません。

対象となる Facebook の iframe だけは
max-width の指定が適用されないようにするのがいいと思います。

Facebook ウィジェットの書式はどんどん仕様が変わっていくんだけど
いまここの公式ページで取得できるタグについていえば

class="fb-like" がついているはずなのでそれをセレクト。
その子要素である iframe を対象に

こんな具合でいけるんじゃないでしょうか。

もっと前に作ったタグや他の埋め込み方法をしていてこれが効かない場合は
実装に合わせて CSS の記述を変える必要があるかもしれませんが。

思う存分いいねコメントをどうぞ！