Facebook like boxを一瞬でRWD(レスポンシブウェブデザイン)に対応させる方法！

どーも＠PNRAです！

今更ですがFacebook like boxを設置しました。
設置にあたって、微妙に手間がかかったため、忘備録とTipsを兼ねてFacebook like boxをRWD(レスポンシブウェブデザイン)に対応させる方法を簡単に説明したいと思います。

固定幅であるFacebook like boxをレスポンシブデザインに変えるにはCSSに細工をしてあげる必要があります。それでは順を追って説明していきましょう。

Facebook開発者ページからコードを取得して、like boxを作成

まずはFacebook開発者ページへ

任意の情報を入力したら「Get Code」でlike boxのプラグインコードを取得します。

上部のボックスに記載されているコードを<body>直下に、下部のブックスに記載されているコードをホームページの任意の場所に記載します。

設置はできたものの、これだけでは固定幅のままのため、デバイスによっては表示崩れを起こしてしまいます。

レスポンシブ対応するにはスタイルシートに以下のCSSを記述するだけです。

CSS

div.fb-like-box,

div.fb-like-box iframe[style],

div.fb-like-box span {

    width: 100% !important;

}

たったこれだけです。

是非試してみて下さいね！

Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)