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=".js#xfbml=1"></script>
<fb:ments href="" num_posts="5" width="auto"></fb:ments> 

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:ments. 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:ments");
    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:ments? Thanks in advance. See you, Davide.

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

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/it_IT/all.js#xfbml=1"></script>
<fb:ments href="http://stackoverflow." num_posts="5" width="auto"></fb:ments> 

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:ments. 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:ments");
    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:ments? Thanks in advance. See you, Davide.

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

• javascript
• css
• width
• facebook-ments

• this is the code.. give us the print out html.. – Sagive Commented Dec 3, 2011 at 1:18

4 Answers 4

the fb:ments css attribute apparently is no longer supported!

The width of the fb:ments 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="fbment">
</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:ments href="http://stackoverflow." num_posts="5" width="' + width_percent  + 'px"></fb:ments>';

    $('#fbment').append(fbxml);
});

Here is a working example: http://jsfiddle/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!

How about this (if you're using the latest Facebook ments code):

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

in css you can try adding an !important:

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

and with jQuery:

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

Easy, i think this Question has been asked for old fb ments plugins, now u can just add data-width attribute with a value of 100%, to give it the parent width.

Step 1

After the body tag put js code as discribed in 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/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 by appID generated by facebook

Step 2 Inside a block tag probably a div tag give it a width, and put inside it:

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

Replace YOUR_URL by the your website page url, you may also change the number of post showing.