Daddie Daddie - 3 years ago 93
CSS Question

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=""></script>
<fb:comments href="" 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("width of element 'box': "+boxwidth);

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

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

Answer Source

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

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.


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


Here is a working example:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download