CODEWITHSUNDEEP
jquerycssasp.net-mvcfacebookasp.net-mvc-3
ChevCast
ChevCast

Reputation: 59213

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

Upvotes: 2

Views: 4808

Answers (3)

JaxomLOTUS
JaxomLOTUS

Reputation: 11

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

Upvotes: 1

hunter
hunter

Reputation: 63522

try attaching a load event to the facebook frame:

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

Upvotes: 1

AlfaTeK
AlfaTeK

Reputation: 7765

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;

Upvotes: 3

Related Questions