Search code examples
javascriptcsswidthfacebook-comments

Setting percent % width of FB comments via CSS or JS: not working

I'm trying to set the width in percent (80%) of the Facebook code.This doesn't work! First I tried via css but nothing has changed. It's always of default Facebook width (500px about).

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

So, I decided to use javascript and change it width when the user resizes the browser's window. So, if my width screen is 1000px, it has to be 1000px. But when I resize the browser's window to 756px, it has to change to 756px via Javascript on the width="..." of fb:comments. The error is from 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>

Is there a way to set dynamically the width of fb:comments? Thanks in advance. See you, Davide.

PS. Sorry for my English mistakes, if i did some so....

Solution

  • the fb:comments css attribute apparently is no longer supported!

    The width of the fb:comments always has to be in pixels. I'm not really sure what you are looking for, but I hope this might help to get you on your way.

    in your html, create a div:

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

    between your script tags, use this piece of jquery code and replace the body selector with the element you want to calculate the 80% off.

    $(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);
});

    Here is a working example: http://jsfiddle.net/CZpx2/3

    It's a nasty workaround and it has it's limitations, but it does the trick in some situations. Hope it does for you!