※こちらの記事は2019年12月のバグですが、11/24現在、Facebookいいね!ボタンが途中で切れて表示されてしまうというバグが発生しているようです。こちらのバグの経験からすると1週間程度で修正されると思います。下手に修正すると、Facebook側でバグを修正した際に再度調整が必要となってくるため、バグが修正するまで耐え忍ぶのも一つの手かと思います。大規模なサービスの場合そのコストをさいて一時的に手を加えるのもありだと思いますが、そこは現場でご判断ください(2020/11/24追記)※こちらの記事に載っているバグは修正されたようです。自分のブログでもいいね!ボタンが崩れていましたが、直っています。こちらの記事内容で対策されてしまった場合は、バグが直った事による崩れが発生してしまってますので元のコードに直す作業が必要となります。手間が掛かりますが、対応お願いします。同様のバグが発生する確率は低いですが、またなんらかのバグで崩れた場合の対応方法としてこちらの記事は残しておきます。(2020/01/06追記)Facebookのいいね!ボタンの崩れバグが発生しています。この問題は公式の方にも報告されていますが、まだ対策は進んでいないようです。https://developers.facebook.com/support/bugs/1194214784101513/https://developers.facebook.com/support/bugs/704278380100535/#=バグだと思うので(もしかして仕様変更?)そのうち改修されると思いますが、ディレクターに突っつかれてめんどくさいとか、暫定でもいいので対策を取りたい、という方のために解決法と試行錯誤を共有します。大きな問題としてはいいね!ボタンの横幅が225pxに固定されちゃっているのが問題です。自分の管理しているサイトの表示としては、こんな感じで崩れています。問題のhtmlはこんな感じ。</span></div>iframeの中も225px前提で要素が作られてしまっていますが、そこはこちらではコントロールできないため、あくまでこちら側でコントロールできる部分に対してアプローチしていきます。次に問題はどのlayoutで起きているか。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です。対処1.data-size、data-widthを設定してみるサイズの設定がおかしくなったのかなと思って、data-size、data-widthを見てみたんですが、関係なさそうです。data-sizeはデフォルトの設定がsmallだし、smallを明示的に設定しても変わりません。data-widthもbox_countの仕様だとデフォルトの値が55pxで、data-sizeと同じく明示的に設定しても変化なし。対処2.CSSで強制的に横幅を設定する以下のようなコードで強制的にwidthを固定してしまえばどうにかなるかなと思って試してみました。以下のコードはbox_countの例なので、その他のレイアウトはwidthの値が違います。表示される領域が狭くなっただけで崩れは直りません。ボタンの一部が表示されるだけ、よってこの方法はボツです。対処3.layoutをbutton_countにしてCSSで調整する2でやったように横幅を制限しつつ、マイナスのmarginで位置を調整してみました。}}結果これは良さそうですね。button_countはいいね!テキストの横側に数値のカウントが並んでいるのでいいね!数が増えるたびに横幅が広がっていく仕様です。横幅を固定にするといいね!の桁が増えた時にフレキシブルに広がらなくなってしまいます。結論:layoutをbuttonにしてCSSで調整する自分が今日の試行錯誤で至った結論はこちらです。layoutをbuttonにするといいね!数が表示されなくなります。それは別の問題にもなりますが、レイアウトが大きく崩れるよりはマシかなと。以下のようなコードで横幅を制限して、マイナスのmarginで位置を調整します。}}buttonレイアウトのいいね!ボタン自体は横幅80pxなんですが、位置調整の計算上80pxだと表示が合わない、いいね!後に横幅が変わる、などの理由により82pxにしてあります。こちらのコードでこのようになります。いいね!数は表示されませんが、いい塩梅になったんじゃないでしょうか。レイアウト崩れで困っている方は試してみてください。BookmarkPocketLINEカテゴリーバグ対応ヒハラTwitterフリーランスのフロントエンドエンジニア。ココナラの立ち上げや、あそびゅーのリニューアルなどスタートアップを中心に開発に関わってきました。最近はなぜか漢方に目覚めて出雲漢方クリニックというクリニックのお手伝いをしてます。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。