FacebookのLikeboxをコンテナ幅に合わせて可変にする方法。
要は無理矢理css上書きして幅100%にして、高さを微調整しています。
html5コード、2014/1/14現在での方法。
1.まずはFacebook Likeboxのコードを取得
下記Facebookページから、Likeboxのコードを取得
Like Box – Facebook開発者
必要な部分を埋めてGet Code
widthは後から上書きするので幅には影響しないが、表示するアイコン数に影響するみたい(幅が広いほどたくさんの人を表示)
取得できたら設置したい場所にコードを貼り付けます。
2. コード貼り付け、css調整
続いてcssで幅を上書きして、高さを微調整します。
.fb_iframe_widget {
width: 100% !important;
span, iframe {
width: 100% !important;
/* Extra small devices (phones, less than 768px) */
@media (max-width: $screen-xs-max) {
height: 300px !important;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
height: 400px !important;
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
height: 340px !important;
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {
height: 300px !important;
}
}
}
高さの調整は、良い感じに見えるよう調整してください。
(Extra small devices向けには画面幅によって細かく変わってしまうので、はみ出したものは隠すという残念対応でしのいでる)