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

Answer 2

Use the inspect element to see what code is being generated. In some cases like Wordpress Facebook plugins they use different "ids" and once you find the id being used adding

 #fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}

This doesnt always do the trick im learning. While you can change colors and some sizing making it responsive is still very buggy. It doesnt seem to like percentages and doesnt see the size of the box it's in so this isnt working. im toying with doing @media queries to resize it depending on the size of browser window.

It would be nice if it recognized the width but the @media seems to be the only way.

Answer 3

Here is some jquery that should persist across changes to the output markup as it uses a regex expression to rewrite the width only, leaving the rest of the style tag alone.

You need to specify the correct container id or selector, replacing my example of: #footer-last. The iframe is resized based on the changes in width to the container, which will need to be set up as responsive.

// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);

Answer 4

This works for me

/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
    display: inline !important;
}

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

Answer 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

Answer 6

Just put this either in your CSS file or in your html code with style tags !!!

<style>
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style]{width:100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe     span[style]{width: 100% !important;}
</style>

Ref: http://dwij.co.in/making-facebook-comments-responsive