How to make Facebook comments widget a fluid width?

Question

Is it possible to make Facebook\'s comments widget a fluid width? Their documentation shows a width field for the fb:comments xfbml or iframe which is specifie

Answer 1

This worked for me, but I need to add span tag to work correctly:

.fb-comments, .fb-comments iframe[style], .fb-comments span { width: 100% !important; }

Answer 2

spent some time investigating this issue. Though FB proposes to specify absolute width in pixels, looks like it works if you just set it to '100%'. Note data-width below.

<div class="fb-comments" data-width="100%" data-href="http://www.sample.com/" data-numposts="5" data-colorscheme="light"></div>

Yeah yeah, that's easy, no onresize callbacks no iframe src modifications.

Answer 3

No need to override the css, Use data-width="100%"

<div class="fb-comments" data-width="100%" data-href="yourURL"></div>

Answer 4

I think I have a solution which improves a little on Ryan's answer from March 5th.

Rather than re-loading the Facebook iframe after a delay, you could do the following.

Insert a regular Facebook comments tag, but append an extra bit to the class, so that Facebook doesn't detect it, but you can.

<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>

Then add some JS which picks this div up, modifies it with the desired width, then triggers Facebook's parser.

var foundFBComs = false;

$('.fb-comments-unloaded').each(function(){

    var $fbCom = $(this),
        contWidth = $fbCom.parent().width();

    $fbCom.attr('data-width', contWidth)
          .removeClass('fb-comments-unloaded')
          .addClass('fb-comments');

    foundFBComs = true;

});

if (foundFBComs && typeof FB !== 'undefined') {
    FB.XFBML.parse();
}

Answer 5

insert this code before initialize facebook plugin and you will have fluid fb comments :):):)

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on('resize', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $('.fb-comments iframe').attr('src').split('width='),
    width = $(".fb-comments").parent().width();

$('.fb-comments iframe').attr('src', src[0] + 'width=' + width);
}

Answer 6

looks like facebook updated their documentation..you can now use data-width="100%" or width="100%"

https://developers.facebook.com/docs/plugins/comments/