通過CSS或JS設置FB注釋的百分比寬度百分比：不起作用

Question

我正在嘗試以Facebook代碼的百分比（80％）設置寬度，這是行不通的！ 首先，我通過CSS進行了嘗試，但沒有任何改變。 它始終是默認的Facebook寬度（約500像素）。

<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並在用戶調整瀏覽器窗口大小時更改其寬度。 因此，如果我的寬度屏幕為1000像素，則必須為1000像素。 但是，當我將瀏覽器的窗口大小調整為756px時，必須通過fb：comments的width =“ ...”上的Javascript將其更改為756px。 錯誤來自Firebug（Firefox 8）：box [0]未定義-> 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。 對不起，我的英語錯誤，如果我這樣做的話。

Answer 1

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

這是一個令人討厭的解決方法，它有其局限性，但在某些情況下可以解決問題。 希望對您有幫助！

Answer 2

怎么樣（如果您使用的是最新的Facebook評論代碼）：

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

Answer 3

在CSS中，您可以嘗試添加！important：

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

並使用jQuery：

jQuery(document).ready( function () {
  $('fb:comments').css('width', '100%');
})

Answer 4

容易，我認為這個問題已經被要求使用舊的fb注釋插件，現在您只需添加值為100% data-width屬性，即可為其設置父級寬度。

第1步

在body標簽之后，將fb文檔中描述的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>

用facebook生成的appID替換YOUR_APP_ID

第2步在一個block標簽內，可能是一個div標簽給它一個寬度，然后放在里面：

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

用您的網站頁面網址替換YOUR_URL，您也可以更改顯示的帖子數。