通过CSS或JS设置FB注释的百分比%宽度:不起作用

Question

我正在尝试设置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时,它必须通过jb在fb:comments的width ="..."上更改为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

这是一个讨厌的解决方法,它有它的局限性,但在某些情况下它可以解决问题.希望它能帮到你!