FadebookのLikeboxをBootstrapでレスポンシブ対応する

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向けには画面幅によって細かく変わってしまうので、はみ出したものは隠すという残念対応でしのいでる)