※こちらの記事は2019年12月のバグですが、11/24現在、Facebookいいね！ボタンが途中で切れて表示されてしまうというバグが発生しているようです。こちらのバグの経験からすると１週間程度で修正されると思います。下手に修正すると、Facebook側でバグを修正した際に再度調整が必要となってくるため、バグが修正するまで耐え忍ぶのも一つの手かと思います。大規模なサービスの場合そのコストをさいて一時的に手を加えるのもありだと思いますが、そこは現場でご判断ください（2020/11/24追記）
※こちらの記事に載っているバグは修正されたようです。自分のブログでもいいね！ボタンが崩れていましたが、直っています。
ですが、こちらの記事内容で対策されてしまった場合は、バグが直った事による崩れが発生してしまってますので元のコードに直す作業が必要となります。手間が掛かりますが、対応お願いします。
同様のバグが発生する確率は低いですが、またなんらかのバグで崩れた場合の対応方法としてこちらの記事は残しておきます。（2020/01/06追記）
Facebookのいいね！ボタンの崩れバグが発生しています。
この問題は公式の方にも報告されていますが、まだ対策は進んでいないようです。
https://developers.facebook.com/support/bugs/1194214784101513/
https://developers.facebook.com/support/bugs/704278380100535/#=
バグだと思うので（もしかして仕様変更？）そのうち改修されると思いますが、ディレクターに突っつかれてめんどくさいとか、暫定でもいいので対策を取りたい、という方のために解決法と試行錯誤を共有します。
目次
ざっくりと問題の把握
大きな問題としてはいいね！ボタンの横幅が225pxに固定されちゃっているのが問題です。
自分の管理しているサイトの表示としては、こんな感じで崩れています。
問題のhtmlはこんな感じ。
<div class="fb-like fb_iframe_widget" data-href="https://sekokan-navi.jp/magazine/31430" data-layout="box_count"
data-action="like" data-size="small" data-show-faces="false" data-share="false" fb-xfbml-state="rendered"
fb-iframe-plugin-query="action=like&app_id=384461551924495&container_width=125&href=https%3A%2F%2Fsekokan-navi.jp%2Fmagazine%2F31430&layout=box_count&locale=ja_JP&sdk=joey&share=false&show_faces=false&size=small">
<span style="vertical-align: bottom; width: 225px; height: 40px;">
<iframe name="f1c9553af36372" width="1000px"
height="1000px" title="fb:like Facebook Social Plugin" frameborder="0" allowtransparency="true"
allowfullscreen="true" scrolling="no" allow="encrypted-media"
src="https://www.facebook.com/v2.8/plugins/like.php?action=like&app_id=384461551924495&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D45%23cb%3Df23a775891f864%26domain%3Dsekokan-navi.jp%26origin%3Dhttps%253A%252F%252Fsekokan-navi.jp%252Ffe87a0925d2124%26relation%3Dparent.parent&container_width=125&href=https%3A%2F%2Fsekokan-navi.jp%2Fmagazine%2F31430&layout=box_count&locale=ja_JP&sdk=joey&share=false&show_faces=false&size=small"
style="border: none; visibility: visible; width: 225px; height: 40px;" class=""></iframe>
</span>
</div>iframeの中も225px前提で要素が作られてしまっていますが、そこはこちらではコントロールできないため、あくまでこちら側でコントロールできる部分に対してアプローチしていきます。
次に問題はどのlayoutで起きているか。facebook likeには以下のlayoutが存在します。
https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP#faqlayout
そのうちのbox_count、button_count、buttonで起きています。すべて225pxに固定されます。
もしかするとstandardでも起きているかもしれませんが、面倒くさいので調査は端折ります。
対処方法
layoutのうちどのレイアウトを使ってるかで対処方法が違います。
ですが、今回自分の管理しているサイトがbox_countだったので、box_countでの対処方法の試行錯誤を記述します。その他のレイアウトを使っている場合でも参考になると思います。
ちなみに対処法の中に書いてあるcssは全てscssです。
対処１.data-size、data-widthを設定してみる
サイズの設定がおかしくなったのかなと思って、data-size、data-widthを見てみたんですが、関係なさそうです。
data-sizeはデフォルトの設定がsmallだし、smallを明示的に設定しても変わりません。
data-widthもbox_countの仕様だとデフォルトの値が55pxで、data-sizeと同じく明示的に設定しても変化なし。
対処２.CSSで強制的に横幅を設定する
以下のようなコードで強制的にwidthを固定してしまえばどうにかなるかなと思って試してみました。以下のコードはbox_countの例なので、その他のレイアウトはwidthの値が違います。
.fb-like{
> span{
width: 55px !important;
iframe{
width: 55px !important;
}
}
}結果
表示される領域が狭くなっただけで崩れは直りません。
ボタンの一部が表示されるだけ、よってこの方法はボツです。
対処３.layoutをbutton_countにしてCSSで調整する
2でやったように横幅を制限しつつ、マイナスのmarginで位置を調整してみました。
.fb-like{
overflow: hidden;
width: 91px;
> span{
margin-left: -67px;
}
}結果
これは良さそうですね。ただここで問題が。button_countはいいね！テキストの横側に数値のカウントが並んでいるのでいいね！数が増えるたびに横幅が広がっていく仕様です。
なので、横幅を固定にするといいね！の桁が増えた時にフレキシブルに広がらなくなってしまいます。
結論：layoutをbuttonにしてCSSで調整する
自分が今日の試行錯誤で至った結論はこちらです。layoutをbuttonにするといいね！数が表示されなくなります。それは別の問題にもなりますが、レイアウトが大きく崩れるよりはマシかなと。
以下のようなコードで横幅を制限して、マイナスのmarginで位置を調整します。
.fb-like{
overflow: hidden;
width: 82px;
> span{
margin-left: -72px;
}
}buttonレイアウトのいいね！ボタン自体は横幅80pxなんですが、位置調整の計算上80pxだと表示が合わない、いいね！後に横幅が変わる、などの理由により82pxにしてあります。
こちらのコードでこのようになります。
いいね！数は表示されませんが、いい塩梅になったんじゃないでしょうか。
レイアウト崩れで困っている方は試してみてください。