0

nbglive.com用に作成したlikeboxは、どの方法を使用してもサイズ変更できないため、ラジオプレーヤーと重ならないようにサイトと統合する方法に大きな問題を引き起こしています。

ページのサイズが変更されたときに、いいねボックスのサイズを変更することはできますか？twitter-bootstrapを使用しています。

4

3 に答える 3

1

次のように、FB ウィジェット (likebox とコメント) を Bootstrap のグリッドに配置しています。

<div class="span4">
  <div style="text-align: center;">
    <div class="fb-like-box" data-href="{url}" data-width="234" data-show-faces="true" data-stream="false" data-border-color="#007Db7" data-header="false"></div>
  </div>
</div>

ここurlで、FB ページの Web URL を含む変数です。

CSSで：

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

widthFacebook は、 data 属性に従って設定されたスタイルを使用して、そのコンポーネントを非同期的に読み込みます。私はそれをいくつかの安全な値に設定しました。見た目は悪いですが、異なるビューポートの他の要素にオーバーフローしません。私の CSS は、ウィジェットのサイズを変更するために必要なすべての FB の幅設定をオーバーライドします (私は を設定100%したので、含まれる div に合わせて調整されます)。文書化されておらず、FBがデザインを変更すると機能しなくなる可能性があるため、デフォルトの幅を（234px私にとっては）賢明に選択してください;）

右側のサイド パネルの下部とサイドバーに LikeBox がある例。ブラウザー ウィンドウのサイズを変更したときの応答性の高い動作に注意してください。

于 2013-03-18T08:41:55.960 に答える
1

以下のようにCSSに従ってコーディングを行います

<div class="comment-box">
      <div class="fb-comments" data-href="site_url" data-width="100%" data-numposts="5" data-colorscheme="light" data-mobile="auto-detected"></div>

</div><!--comment-box-->

fbがヘッダーで提供するように、Javaスクリプトを切り取ってコピーします

于 2014-08-14T12:03:46.377 に答える
0

簡単な方法は次のとおりです。

    $(".fb-like-box").attr("data-width", $(document).width());
于 2013-03-18T02:17:42.203 に答える