67

Facebook のコードをテキスト ウィジェットに貼り付けて、サイド バーで Facebook のようなボックス コードを使用しています。私のテーマはレスポンシブで、いいねボックスのサイズを正しく変更したいと考えています。私はこのチュートリアルを見つけましたが、彼のやり方は「完全に反応する」わけではないので、もっと良い方法があるかどうかわかりませんでした。

4

7 に答える 7

121

注：この回答は廃止されました。最新の解決策については、以下のコミュニティ wiki の回答を参照してください。

今日この Gist を見つけましたが、完全に機能します: https://gist.github.com/2571173

( https://gist.github.com/smerandaに感謝します)

/* 
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ 
*/

/* 
This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. 
*/

#fb-root {
    display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}
于 2012-05-23T19:23:20.810 に答える
28

私にとってのコリンの例は、いいねボタンと衝突しました。そのため、Like Box のみを対象とするように調整しました。

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

ほとんどの最新ブラウザでテスト済み。

于 2012-10-08T06:16:21.817 に答える
26

注: コリンの解決策はうまくいきませんでした。Facebook がマークアップを変更した可能性があります。使用*することで、より将来性のあるものになるはずです。

Like ボックスを div でラップします。

<div id="likebox-wrapper">
    <iframe src="..."></iframe> <!-- likebox code -->
</div>

これを css ファイルに追加します。

#likebox-wrapper * {
   width: 100% !important;
}
于 2013-02-27T16:18:33.620 に答える
7

2015 年 8 月 4 日の時点で、ネイティブ facebook のようなボックスには、Facebook 開発者ページで利用できるレスポンシブ コード スニペットがあります。

ここでレスポンシブな Facebook の likebox を生成できます

https://developers.facebook.com/docs/plugins/page-plugin

これは、CSS をハッキングするよりも、これまでで最高のソリューションです。

于 2015-08-04T12:22:13.393 に答える
0

CSSのトリックはどれもうまくいきませんでした（私の場合、fbのようなボックスは「float：right」で右に引っ張られました）。ただし、追加のトリックなしで機能したのは、ボタン コードの IFRAME バージョンです。すなわち:

<iframe src="//www.facebook.com/plugins/like.php?href=..." 
        scrolling="no" frameborder="0" 
        style="border:none; overflow:hidden; width:71px; height:21px;" 
        allowTransparency="true">
</iframe>

(スタイルのカスタム幅に注意してください。追加の JavaScript を含める必要はありません。)

于 2013-05-30T21:56:06.770 に答える