36

Facebookのコメントウィジェットを流動的な幅にすることは可能ですか？彼らのドキュメントfb:commentsには、 xfbmlまたはiframeの幅フィールドが示されています。これは次のように指定されます。

  • width-プラグインの幅（ピクセル単位）。最小推奨幅：400px。

だから多分それは不可能です...

4

19 に答える 19

52

あなたのソリューションは機能していましたが、Facebookがプラグインを更新してスタイルを壊したようです。ユニバーサルセレクターを使用して、再び機能するようになりました。

.fb-comments, .fb-comments * {
    width:100% !important;
}
于 2012-04-18T15:29:04.160 に答える
42

cssを使用して解決策を見つけました。インスピレーションはこの記事から来ました http://css-tricks.com/2708-override-inline-styles-with-css/

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
于 2011-10-17T11:05:28.373 に答える
31

おそらく次のFBからの変更であり、今回はこれがより適切に機能します。


.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}
于 2012-10-31T17:03:28.473 に答える
16

2014年3月の時点で、CSSソリューションはどれも機能しませんでした。Facebookがプラグインを変更して、CSSでオーバーライドできないiFrame内のコンテナーに幅を設定するようになりました。

少し掘り下げてみると、コメントの幅が実際にはiframesrcの最後のパラメーターによって制御されていることに気付きましたwidth=XXX。それを念頭に置いて、これが私がそれを解決した方法です：

// ON PAGE LOAD
setTimeout(function(){
  resizeFacebookComments();
}, 1000);

// ON PAGE RESIZE
$(window).on('resize', function(){
  resizeFacebookComments();
});

function resizeFacebookComments(){
  var src   = $('.fb-comments iframe').attr('src').split('width='),
      width = $('#container').width();

  $('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}

#containerコメントプラグインを拡大して収まるようにするコンテナの幅です。これを必要なものに変更すると、このコードが機能するはずです。

iframeが読み込まれると起動できなかったため、タイムアウトを使用しています。それに関するどんな助けでもありがたいです、しかしタイムアウトは仕事をします。

編集：この解決策により、戻るボタンが壊れます。私は今この解決策を試しています、そしてそれはより良いようです：https ://stackoverflow.com/a/22257586/394788

于 2014-03-05T13:54:23.553 に答える
16

3月5日からのライアンの答えを少し改善する解決策があると思います。

遅延後にFacebookiframeを再読み込みするのではなく、次のようにすることができます。

通常のFacebookコメントタグを挿入しますが、Facebookがそれを検出しないように、クラスに余分なビットを追加しますが、検出できます。

<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>

次に、このdivを取得するJSを追加し、目的の幅に変更してから、Facebookのパーサーをトリガーします。

var foundFBComs = false;

$('.fb-comments-unloaded').each(function(){

    var $fbCom = $(this),
        contWidth = $fbCom.parent().width();

    $fbCom.attr('data-width', contWidth)
          .removeClass('fb-comments-unloaded')
          .addClass('fb-comments');

    foundFBComs = true;

});

if (foundFBComs && typeof FB !== 'undefined') {
    FB.XFBML.parse();
}
于 2014-03-11T14:33:25.227 に答える
11

この問題はFacebookによって対処されています。data-width="100%"これで、widthオプションを追加または設定して100%、必要に応じてクレイジーなjsハックを削除できます。

于 2014-05-16T14:12:03.237 に答える
4

私は通常、パフォーマンスを向上させるためにユニバーサルセレクターの使用を避けたいと思っています。あなたは同じ結果を得ることができるはずです

.fb-comments, .fb-comments span, .fb-comments iframe {width: 100% !important;}

Facebookのセレクターをチェックすれば、おそらくもっと改善されるかもしれません...

于 2012-05-30T11:16:39.410 に答える
4

Facebookプラグインを初期化する前にこのコードを挿入すると、流動的なfbコメントが表示されます:) :) :)

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $('.fb-comments iframe').attr('src').split('width='),
    width = $(".fb-comments").parent().width();

$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}
于 2014-03-14T14:15:42.697 に答える
2

Facebookがドキュメントを更新したようです。data-width="100％"またはwidth = "100％"を使用できるようになりました

https://developers.facebook.com/docs/plugins/comments/

于 2014-05-29T03:32:34.913 に答える
2

私の評判はまだ十分に高くないので、まだコメントすることはできませんが、2014年12月21日現在、これに対する解決策があります

これがCSSで機能するためには：

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]  {width: 100% !important;}

FBプラグインコード内でdata-width=""セクションを100％に設定する必要があります。

<div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

流体運動の実例：http：www.unitedbiker.org

これがすべての人に役立つことを願っています。アイデアは、iframeスタイルをオーバーライドして親要素の100％にし、実際のFBプラグインをiframeの100％に設定することです。これが私の回避策でした。

于 2014-12-21T20:14:29.143 に答える
1

これは私にとってはうまくいきましたが、正しく機能するためにスパンタグを追加する必要があります：

.fb-comments, .fb-comments iframe[style], .fb-comments span { width: 100% !important; }
于 2013-08-30T04:11:12.947 に答える
1

これは誰にとってもうまくいくと思います。2013年12月26日http://eddie11.com/dj-eddie-talks/で私のために働きます

#fbSEOComments, 
#fbSEOComments span,
#fbSEOComments div,
#fbSEOComments iframe,
#fbSEOComments iframe[style],
#fbSEOComments .fb_iframe_widget,
#fbSEOComments .fb_iframe_widget span,
#fbSEOComments .fb_iframe_widget iframe
{
    width: 100% !important;
}

以下のどれも私にはうまくいきませんでしたが、とにかくそこに残しました。

.fb-comments,
.fb-comments *,
.fb-comments iframe[style],
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe,
.fb_iframe_widget iframe[style],
.fb-comments span,
.fb-comments iframe,
于 2013-12-26T18:42:13.670 に答える
1

これは古い質問ですが、これは誰かに役立つかもしれません。

次のコードを使用して、コメントを流動的にすることができます


.fb-comments、.fb-comments iframe [style]、.fb-like-box、.fb-like-box iframe [style] {幅：100％！重要;}
.fb-comments span、.fb-comments iframe span [style]、.fb-like-box span、.fb-like-box iframe span [style] {width：100％！important;}

ここのpre関数はいくつかのものを削除するので、ここでコードをチェックできます。私はここで新しいです。よろしく

FacebookコメントFluid

于 2013-12-29T22:27:04.223 に答える
1

この問題の調査に時間を費やしました。FBは絶対幅をピクセル単位で指定することを提案していますが、「100％」に設定するだけで機能するように見えます。以下のデータ幅に注意してください。

<div class="fb-comments" data-width="100%" data-href="http://www.sample.com/" data-numposts="5" data-colorscheme="light"></div>

ええ、それは簡単です。onresizeコールバックも、iframesrcの変更もありません。

于 2014-08-04T13:56:48.187 に答える
1

かなり長い間これに取り組んだ後、私はあなたがこのページのどのCSSトリックがあなたの特定のサイト/バージョン/Facebookのコメントプラグインの年に役立つかを理解するのに役立つはずのちょっとした情報を見つけました。ブラウザでサイトを見て、Facebookコメントプラグインの周りの要素を調べます。追加したスニペットが見つかり、Facebookのjavascriptウィジェットで次のように装飾されています。

<fb:comments href="http://mywebpage.com" 
    fb-xfbml-state="rendered" class="fb_iframe_widget">

次の部分に注意してください。

class="<whatever class your version is using>"

これは使用するクラスです。したがって、上記の例では、次のスタイルを追加する必要があります。

<style>
    .fb_iframe_widget,
    .fb_iframe_widget iframe[style],
    .fb_iframe_widget span[style],
    .fb_iframe_widget *  {
        width: 100% !important;
    }
</style>
于 2015-08-12T22:28:56.757 に答える
0 
.fb-comments, .fb-comments iframe[style],  .fb-comments > span {width: 100% !important;}
于 2013-08-21T23:52:24.970 に答える
0

Facebookコメントプラグインのコードが（XFBML）のようになっている場合：

<fb:comments href="{URL_HERE}" numposts="5" colorscheme="light"></fb:comments>

次に、次のCSSで作業を完了します。

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe {
     width: 100% !important;
}
于 2013-12-17T17:14:32.510 に答える
0

これは私にとって正しく機能した唯一のものです！

$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $('.fb-comments iframe').attr('src').split('width='),
width = $(".fb-comments").`enter code here`parent().width();

$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}
于 2014-05-16T19:07:41.123 に答える
0

cssをオーバーライドする必要はありません。data-width="100%"

<div class="fb-comments" data-width="100%" data-href="yourURL"></div>
于 2017-02-09T09:13:08.740 に答える