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

Accepted answer did not work for me.

I found this by Craig Bailey in the comments here:

http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress

which is perfectly fluid (tested in osx ff & safari, ios6).

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

Answer 2

An important note about this resize stuff: If the Facebook comment script detects that you're on a mobile device it breaks this. But, if you make the <fb:comments> tag contain the attribute value mobile="false" then (for now) Facebook's scripts will respect your CSS.

Answer 3

I've just tried this and it appears there is now a <div> within the iframe that has a fixed width, meaning you now actually need to remove the style tag with javascript to make it fluid.

EDIT: You can't access the iframe content with JS because it's coming from another domain

Answer 4

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();

});

Answer 5

Looks like this post is not very old but the answer wasn't working for me. I had to add this to my stylesheet...

#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}

The .fb_iframe_widget and .fb_iframe_widget[style] both seemed to be important.

Answer 6

I've got this working using this simple script (see code in link).

https://gist.github.com/2111366

You have to make a few changes to the information so that you are using your Facebook App ID and your page URL.

This solution is using jQuery so you'll have to understand how that work but once you get the script to execute your responsive design will work on page load or when resizing the page.