読者です 読者をやめる 読者になる 読者になる

P N R A

東京都中野区に所在を構えるウェブ制作会社PNRA DESIGN OFFICE

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

どーも@PNRAです!

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

f:id:PNRA:20140918123612p:plain

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

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

まずはFacebook開発者ページへ

f:id:PNRA:20140918123618p:plain

Like Box – Facebook開発者

f:id:PNRA:20140918123628p:plain

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

f:id:PNRA:20140918123623p:plain

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

Facebook like boxの設置が完了!でも…

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

CSSをいじってレスポンシブ対応させる。

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

CSS

div.fb-like-box, div.fb-like-box iframe[style], div.fb-like-box span { width: 100% !important; }

たったこれだけです。

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

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