Is it possible to set a fluid width for Facebook's social plugins?

Question

I\'m developing a site around the \"responsive design\" concept, but the facebook social plugins are static width and \"break\" the layout when it\'s re-sized.

Using

Answer 1

I got it working using a little jQuery and setting the "data-width" attribute when the page loads and on window resizing. Problem I ran into with all the CSS approaches is that some of the comments and buttons were hidden outside the container's margins or overflowing.

Here's my $0.02, hope it helps. Also, just set the #content selector to whatever you want the comment box to match such as a container div...

jQuery(document).ready(function() {

//check for device width and reformat facebook comments
function fbCommentWidth() {
    jQuery('.fb-comments').attr('data-width',jQuery('#content').width());

}
//run on resize, and reparse FB comments box    
jQuery(window).on('resize',function() {
    fbCommentWidth();
    FB.XFBML.parse();
});
//run on document ready
fbCommentWidth();

});