通過CSS或JS設置FB註釋的百分比％寬度：不工作

我試圖設置Facebook代碼的百分比（80％）的寬度。這不起作用！首先，我通過CSS嘗試，但沒有任何改變。它始終是默認的Facebook寬度（約500px）。通過CSS或JS設置FB註釋的百分比％寬度：不工作

<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時，它必須通過Javascript的寬度=「...」fb：comments來更改爲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。對不起，我的英語錯誤，如果我做了一些這樣....

來源

2011-12-02 Daddie

這是代碼..給我們打印出html .. –

的FB ：評論css屬性顯然是no longer supported！

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-05 13:36:59 Pascalculator

它不起作用！ ------------------------------------- – Daddie

@Daddie好吧，我的壞。我忘了提及你應該保留第一個$（document）.ready（...）不變。我重寫了這個例子，以便更清楚一點。 – Pascalculator

對不起，但它不起作用。它不顯示Facebook的評論框。我能做什麼？謝謝！ PS。你是否自己測試過它？ – Daddie

在CSS 你可以嘗試添加一個重要的！

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

和使用jQuery：

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

來源

2011-12-03 00:32:04 MCSI

雖然我把它放在css文件上，但沒有什麼改變。它的寬度始終是500px（Facebook的默認值！） – Daddie

這個怎麼樣（如果你使用的是最新的Facebook評論代碼）：

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

來源

2012-06-08 10:18:37 Jorre

容易，我覺得這個問題已經被問了老FB評論插件，現在ü可以只添加屬性data-width用值爲100%，給它父寬度。

步驟1

如fb docs

<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>

Remplace YOUR_APP_ID通過APPID被Facebook產生

步驟2discribed的body標籤放js代碼后里面一個塊標記可能是div標籤給它的寬度，並把它裏面：

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

通過您的網站頁面的網址替換YOUR_URL，你也可以改變後顯示的號碼。

來源

2016-10-21 16:36:36

通過CSS或JS設置FB註釋的百分比％寬度：不工作

回答

相關問題