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_posts="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?