Facebookいいね!ボタンのレイアウト崩れ対策(暫定)

Facebookいいね!ボタンのレイアウト崩れ対策(暫定)
2020-01-06

※こちらの記事に載っているバグは修正されたようです。自分のブログでもいいね!ボタンが崩れていましたが、直っています。
ですが、こちらの記事内容で対策されてしまった場合は、バグが直った事による崩れが発生してしまってますので元のコードに直す作業が必要となります。手間が掛かりますが、対応お願いします。
同様のバグが発生する確率は低いですが、またなんらかのバグで崩れた場合の対応方法としてこちらの記事は残しておきます。

Facebookのいいね!ボタンの崩れバグが発生しています。
この問題は公式の方にも報告されていますが、まだ対策は進んでいないようです。

https://developers.facebook.com/support/bugs/1194214784101513/
https://developers.facebook.com/support/bugs/704278380100535/#=

バグだと思うので(もしかして仕様変更?)そのうち改修されると思いますが、ディレクターに突っつかれてめんどくさいとか、暫定でもいいので対策を取りたい、という方のために解決法と試行錯誤を共有します。

とりあえず、解決法を知りたい方はこちら

ざっくりと問題の把握

大きな問題としてはいいね!ボタンの横幅が225pxに固定されちゃっているのが問題です。
自分の管理しているサイトの表示としては、こんな感じで崩れています。

Screen Shot 2020-01-06 at 14.05.12.png

問題の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です。

対処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の値が違います。

.fb-like{
    > span{
        width: 55px !important;

        iframe{
            width: 55px !important;
        }
    }
}

結果

Screen Shot 2020-01-06 at 14.04.33.png

表示される領域が狭くなっただけで崩れは直りません。
ボタンの一部が表示されるだけ、よってこの方法はボツです。

対処3.layoutをbutton_countにしてCSSで調整する

2でやったように横幅を制限しつつ、マイナスのmarginで位置を調整してみました。

.fb-like{
    overflow: hidden;
    width: 91px;

    > span{
        margin-left: -67px;
    }
}

結果

Screen Shot 2020-01-06 at 15.00.06.png

これは良さそうですね。ただここで問題が。button_countはいいね!テキストの横側に数値のカウントが並んでいるのでいいね!数が増えるたびに横幅が広がっていく仕様です。
なので、横幅を固定にするといいね!の桁が増えた時にフレキシブルに広がらなくなってしまいます。

結論:layoutをbuttonにしてCSSで調整する

自分が今日の試行錯誤で至った結論はこちらです。layoutをbuttonにするといいね!数が表示されなくなります。それは別の問題にもなりますが、レイアウトが大きく崩れるよりはマシかなと。

以下のようなコードで横幅を制限して、マイナスのmarginで位置を調整します。

.fb-like{
    overflow: hidden;
    width: 82px;

    > span{
        margin-left: -72px;
    }
}

buttonレイアウトのいいね!ボタン自体は横幅80pxなんですが、位置調整の計算上80pxだと表示が合わない、いいね!後に横幅が変わる、などの理由により82pxにしてあります。
こちらのコードでこのようになります。

Screen Shot 2020-01-06 at 15.16.54.png

いいね!数は表示されませんが、いい塩梅になったんじゃないでしょうか。
レイアウト崩れで困っている方は試してみてください。