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 don't know about the comments, but with the link box, all you have to do is use the iframe option direct from Facebook and switch out the width in pixels with a percentage, and it'll change depending on the width of the column it's in.

Answer 2

Create an empty div where you want the facebook like box to be (or other social plug-in, works universally) with a class 'fb-container', then add the following jQuery:

$(document).ready(function(){
    $('.fb-container').replaceWith('<div class="fb-comments" data-href="https://WWW.YOURSITEHERE.COM/" data-width="' + $('PARENT DIV').width().toFixed(0) +'" data-numposts="5" data-colorscheme="light"></div>');
});

p.s. you can replace PARENT DIV with any other element you want the comment box to match and WWW.YOURSITEHERE.COM with your site

Answer 3

Here's a small work around that appends the HTML5 Facebook LikeBox Plugin into the DOM with a response height or width.

        $(document).ready(function(){      
            var height = $(window).height();
            var width = $(window).width();

            var widget_height = parseInt((height)*0.9);
            var widget_width = parseInt((height)*0.3);
            var page_url = "http://www.facebook.com/Facebook";

            $(".fb-plugin").append("<div class='fb-like-box' 
                                         data-href='"+page_url+"' 
                                         data-width='"+widget_width+"' 
                                         data-height='"+widget_height+"' 
                                         data-colorscheme='dark' 
                                         data-show-faces='true' 
                                         data-border-color='#222' 
                                         data-stream='true' 
                                         data-header='true'>
            </div></div>");
        });

Answer 4

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;}

Answer 5

For those who prefer using the HTML5 code for Facebook plugins like the Activity Feed or Like Box:

/******* IPHONE PORTRAIT MODE (480px or less) *******/
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .fb_iframe_widget span[style], .fb_ltr[style] {
    width:420px !important;
    }
}

• Doesn't work with comments or percentage-based width; stick to the iframe code if you need pure fluidity.
• H/T to Alan for the css-tricks link at the top of this page. (: