【Facebook】「いいね!」ボタンのコメント欄が隠れる(切れる)表示されない場合の修正方法3種類

「いいね!」ボタンのコメント欄
「いいね!」ボタンでコメント入力欄を表示させたい場合、HTML5版、もしくはXFBML版の「いいね!」ボタンのプラグインコードを使用しますが、HTML5版のプラグインコードを使用した際に「いいね!」ボタンのコメント欄が隠れる(切れる)場合があります。

「いいね!」ボタンのコメント欄
このようにコメント欄が隠れる(切れる)

「いいね!」ボタンのコメント欄
これが理想の表示

そこで、隠れたコメント欄を修正する3つの解決方法をご紹介します。

1.「いいね!」ボタンと同じ横幅で切れる場合の修正方法
2.他のコンテンツの下に隠れる場合の修正方法
3.上下左右の一部が切れる場合の修正方法

1.「いいね!」ボタンと同じ横幅で切れる場合の修正方法

「いいね!」ボタンのコメント欄

「いいね!」ボタンの iframe に max-width: 100%; が設定されていますので、それを解除するため下記CSSを追加します。

.fb-like iframe {
    max-width: none!important;
}

max-widthとは→

2.他のコンテンツの下に隠れる場合の修正方法

「いいね!」ボタンのコメント欄

z-indexを指定して大きな数字を設定することで、隠れている部分を上に表示させます。

.fb-like iframe {
    z-index: 9999;
}

z-indexとは→

3.上下左右の一部が切れる場合の修正方法

「いいね!」ボタンのコメント欄

「いいね!」ボタンのコードが記述されている親の<div>に overflow: hidden; が指定されている場合があります。これを overflow: visible; に変更します。

overflow: visible;

overflowとは→

まとめ

今回ご紹介した [ 1 ] [ 2 ] [ 3 ] のいずれかの1つだけの修正で解決する場合もありますが、 [ 1 ] [ 2 ] [ 3 ] を全て指定して解決する場合もありますので、サイトに合わせて試行錯誤してください。

上記の方法でも解決しない場合は、Google先生に質問してください。

リンクが古い。等の問題をポチッと報告→