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

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 media queries, I've set the plugins to hide on low-res browsers (mobile, etc...). However, on desktop browsers, when the browser window is re-sized smaller, but not so small to hide the plugins, they break out of the layout.

Any way to set a fluid width for the Facebook social plugins?

Solution 1:

none of these methods worked but using this idea, the following worked for me:

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

Solution 2:

I found a solution using css. Inspiration came from this article http://css-tricks.com/2708-override-inline-styles-with-css/

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

Solution 3:

The correct working answer is a combination of things I found here. Mikel's answer is a good start:

Facebook Developers Platform link

This says:

We have pushed a fix for this. From now on, you can specify the width as 100% (e.g. data-width="100%") to get a fluid layout. Docs are updated too: https://developers.facebook.com/docs/plugins/comments Thanks for your patience.

But... This will load the width of what's available to the plugin at loading time. When you resize your page it will remain the same width it had when you loaded the page. To fix this - and make a true responsive version of the Facebook Social Plugin - Add the following in your CSS:

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

This will cause the plugin to resize to the available space as you resize the window.

If you want this code to work for the page plugin, change the class-name 'fb-comments' to 'fb-page':

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

(thanks for the addition Black_Stormy!)

Solution 4:

I managed to make it work by using this code:

.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
    width: 100% !important;

}

because in my html file I have this:

<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true"  data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>

Tip: You should change your css depending of the div class.

Solution 5:

Although it's an old question, this is now the top Google result for "facebook comment plugin responsive" so it's still relevant.

The workarounds in the other answers aren't needed anymore, as FB have recently (May 2014) fixed this at their end.

From https://developers.facebook.com/x/bugs/256568534516879/:

We have pushed a fix for this. From now on, you can specify the width as 100% (e.g. data-width="100%") to get a fluid layout. Docs are updated too: https://developers.facebook.com/docs/plugins/comments Thanks for your patience.

So now you can just update your HTML to e.g.

<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>

And don't need any extra CSS workarounds.

Edit: this will create the plugin to adapt it's width to the available space at load time. When you resize the browser window the plugin will remain at that initial width. To make it true responsive add this to your CSS:

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

This will cause the plugin to adapt to the currently availably space when you resize the browser