1

Facebook コードのパーセント (80%) で幅を設定しようとしていますが、うまくいきません! 最初にcssを介して試しましたが、何も変わりませんでした。常にデフォルトの Facebook 幅 (約 500px) です。

<div id="fb-root" style="width: 80%"></div>
<script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script>
<fb:comments href="http://stackoverflow.com" num_posts="5" width="auto"></fb:comments>

そこで、ユーザーがブラウザのウィンドウのサイズを変更したときに、javascript を使用して幅を変更することにしました。したがって、画面の幅が 1000px の場合、1000px にする必要があります。しかし、ブラウザのウィンドウのサイズを 756px に変更すると、fb:comments の width="..." で Javascript を介して 756px に変更する必要があります。エラーは Firebug (Firefox 8) からのものです: box[0] is undefined -> var boxwidth = box[0].getAttribute("width");.

<script type="text/javascript">
    var box = document.getElementsByTagName("fb:comments");
    var boxwidth = box[0].getAttribute("width");

    alert("start...");
    alert("width of element 'box': "+boxwidth);
    alert("...end");

    /*resolution = screen.width;
    alert("Screen width: "+resolution);*/
</script>

fb:comments の幅を動的に設定する方法はありますか? 前もって感謝します。またね、ダビデ。

PS。私の英語の間違いで申し訳ありません。

4

4 に答える 4

5

fb:comments css 属性は明らかにサポートされていません!

fb:comments の幅は常にピクセル単位である必要があります。あなたが探しているものはよくわかりませんが、これがあなたの道を歩むのに役立つことを願っています.

html で、div を作成します。

<div id="fbcomment">
</div>

スクリプト タグの間で、この jquery コードを使用し、ボディセレクターを 80% オフを計算する要素に置き換えます。

$(document).ready(function(){

    width_percent = $('body').width() * 0.8;
    fbxml = '<fb:comments href="http://stackoverflow.com" num_posts="5" width="' + width_percent  + 'px"></fb:comments>';

    $('#fbcomment').append(fbxml);
});

これが実際の例です: http://jsfiddle.net/CZpx2/3

これは厄介な回避策であり、制限もありますが、状況によってはうまくいくことがあります。それがあなたのためになることを願っています！

于 2011-12-05T13:36:59.993 に答える
4

これはどうですか (最新の Facebook コメント コードを使用している場合):

.fb-comments iframe, .fb-comments, .fb-comments span { width:100% !important; }
于 2012-06-08T10:18:37.883 に答える
1

CSS で !important を追加してみることができます:

fb:comments {
  width:80% !important;
}

そしてjQueryで：

jQuery(document).ready( function () {
  $('fb:comments').css('width', '100%');
})
于 2011-12-03T00:32:04.357 に答える
0

簡単です。この質問は古い fb コメント プラグインに対して尋ねられたと思います。今data-widthでは、値の属性を追加100%して、親の幅を指定できます。

ステップ1

タグの後に、 fb docsbodyに記載されているように js コードを配置します

<div id="fb-root"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8appId=**YOUR_APP_ID**";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

YOUR_APP_ID を Facebook によって生成された appID に置き換えます

ステップ 2 ブロック タグの内側で、おそらくdivタグで幅を指定し、その中に入れます。

<div class="fb-comments" data-href="YOUR_URL" data-numposts="10" data-width="100%"></div>

YOUR_URL をウェブサイトのページの URL に置き換えます。表示される投稿の数を変更することもできます。

于 2016-10-21T16:36:36.180 に答える