ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

CSSのみでFacebookのLike Boxをレスポンシブ対応にする方法

July 17 2014

Facebookのプラグインである「Like Box」はWebサイトとFacebookページを
両方運用している所にとってはかなり使う頻度の高いものですけど
Facebookから発行されたコードをそのまま貼り付けると、
横幅が固定されてしまうので、レスポンシブサイトにはちょいと不格好。

なので、横幅を100%にすればいいやんとCSSに下記を加えればOKです。

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

普通、レスポンシブ対応サイトに貼り付けようとしているのならば
Like Boxのコード発行の際にはHTML5を選んでいるだろうという前提なので
上記のCSSはiframeやXFBMLでコード発行した場合には使えません。

ちなみにXFBMLの場合はこうすればOK。

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{ width: 100%!important; }

えーい、じゃあiframeの場合も書いておきましょう。

iframeの場合は発行されたコードをdivで囲ってやって
そのdivのクラス名が例えば「fb-likebox」とすると下記でOK。

.fb-likebox iframe{ width: 100%!important; }

このやり方だけはエントリー題名である「CSSのみ」ではなくなります(笑)
さすがにレスポンシブサイトでiframeを使うのはあまりないとは思いますが念のため。

| Posted in CSS, ソーシャルメディア | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jul 2017 August 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31