menu

Web制作のTipsとかアレコレ。

facebookやtwitterのウィジェットをレスポンシブにする。

2014.07.28

ってなわけで案件山積みで絶賛デスマ継続中(いいわけ)でブログに書きたいことは山ほどあるのに溜る一方・・・からの、忘却。

ということで今日は走り書き。

facebookページのウォールやtwitterのタイムラインをレスポンシブサイトに埋め込む際について。

これらウィジェットはオフィシャルから生成するときに横幅を決めて作る感じになってたと思うんですが、生成されたコードから、まずはwidth絡みの記述を削除します。
んで、CSS。

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

/* twitter */
#twitter-widget-1[style]{ 
  width: 100% !important;
}

こういう風にして、iframe内にスタイルを適用してやると幸せになれます。

なお、実際ちょっと困ってるんですけど、iphone5の実機(widthは320px)で見た時にどうしてもfacebookがはみ出してしまう。
正確に言うと、埋め込んでいるfacebookページのウォールに幅広(例えば320px以上とか)の画像が入ってると、どうしてもダメ。
これはどうやったらいいんでしょう?
とりあえず外側を囲んでいるdivに

@media screen and ( max-width: 767px ){
  #facebook-widget-outer{ overflow: hidden;}
}

でごまかしてるんですけど。

どなた様かご教授くださいませ。

2014-08-11 追記
どうやら、facebookのウィジェットの最低widthは292pxらしいです。
https://developers.facebook.com/docs/plugins/like-box-for-pages

“The width of the plugin in pixels. Minimum is 292.”

これをどうにか出来れば…

Comments

please leave your comment...

▲ Page Top