Facebook のいいねボタンで表示崩れが起きた結果…

h2ham

6年前

先日の仕様変更が入る前までは、ボタンの表示はインライン（inline）だったため、何もせずとも他のソーシャルボタンと並んで表示ができていました。

ところが先日の仕様変更によって、vertical-align: bottom; が入っているために、単純に aタグのまま羅列して並べているだけのブログでは、縦方向にずれてしまう現象が起きてしまうサイトが幾つか見られました。

まだ現在も対応を入れていないサイトやブログは、ずれたままになっている状況です。~~例えば某サーバーのスタッフブログとか。~~

リストなどでボタンごとにブロックで囲い、 float させている場合は問題ないのですが、インラインのまま入れて横並びにしている場合はずれてしまっているところが多いのではないでしょうか。

この縦方向の問題については、先日のエントリーで修正方法を記載入れておいた通りです。

しかし、先日の修正で崩れの原因を起こしている要因はそれだけではなかったのです！

みてもらうのが早いでしょう、インラインで並んでいたはずのボタンが、縦に並んでしまっています。

これまでは横にならんでしたソーシャルボタン、なんと、先日の仕様変更によって、スマートフォンで閲覧した時のみ、Facebook のいいねボタンが width: 100%; かつ display: block; の表示になるようにスタイルが変更されていました。

この変更のため、インラインで横に並んでいたボタンが縦に並ぶようになってしまっていたのです。

この問題はスマートフォン＆タブレットで見た時のみに入ってくるスタイルによる問題なので、スマホ対応されていない人は崩れていても問題ないかもしれないです。

スマホ対応といっても、PCと同じデザインを表示している場合でも、いいねボタンだけ block になるため、PCのみのデザインの人もスマホでみたら同様にずれてしまっている状態です。

解決方法としては、ブロック要素で囲って float させておくか、スタイルに inline-block をいれて再び横に並べるかです。

これまでインラインだった人に問題が起きているはずなので、インラインに戻す方法の対処法を書いておきます。

.fb_iframe_widget {
  width: auto !important;
  display: inline-block !important;
}

スマホで見た時にずれている方は参考にしてください。

前回の最後にも書いたのですが、 Facebook の仕様はちょくちょく変わるため、これらの変更を入れずに並ぶ時がくるかもしれないです。しかし、 2014年2月11日現在は必要なため、もしインラインのまま並べていて、ズレてしまった方は参考にしてください。