Facebook comments plugin

I'm using the Facebook XML to load a Facebook comments plugin in my MVC 3 app, like this:

<fb:comments href="@Request.Url.AbsoluteUri" num_post开发者_如何转开发s="15" width="900"></fb:comments>

The problem is that the width property only renders out in pixel value. I would like to specify a percentage width instead. I examined the HTML generated when Facebook's JavaScript renders out the XML tag to full-qualified HTML. It spits out an iframe with inline css specifying the width. The iframe has a class "fb_ltr" and I tried doing a CSS rule for .fb_ltr to change the width, but because the css is inline as a style="" attribute this rule is overridden.

I then tried using jQuery:

$(function()
{
    $('.fb_ltr').css('width', '100%');
});

But that didn't work either because the Facebook JavaScript takes a while to do its job and render the content. Has anyone worked with the Facebook plugins before? Customizing seems kind of convoluted. Is there a way to tie some jQuery on after the Facebook script renders out the comments iframe?

if you can do it via css why not do it? just add !important and it will override everything. But I doubt that you can do it via css. Example css:

width: 100% !important;

try attaching a load event to the facebook frame:

$("#comments").load( function() {
    $('.fb_ltr').css('width', '100%');
});

I changed this:

<fb:comments href="http://whatever.com" 
num_posts="10" width="500"></fb:comments>

to this:

<fb:comments href="http://whatever.com" 
num_posts="10" width="100%" style="width:100%"></fb:comments>

and also set the following css:

iframe.fb_ltr { width:100% !important; }

It worked...