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

Joining the uninformed masses with my own solution to this problem, as of September, 2015:

Facebook provides an option to the fb-page widget called adapt-container-width, which (according to the docs,) should track the parent's width (up to a maximum width of 500px). When rerendering with FB.XFBML.parse(), the widget seems to get stuck on a strange value for the parent's container width, despite what you set on the actual widget itself. For now, this works well enough:

1. Create element using FB's code generator (at the top of this page)
2. Bind an event to window's resize method, (optionally using _.debounce with a sensible limit to prevent overloading the browser with the intermediate requests

3. Wait for Facebook to expose more of the widget API so we can see what the hell is going on

   
       data-href="https://www.facebook.com/yourpage"
       data-show-posts="true"
       data-small-header="true"
       data-width="100%"
   >
       
   
           
   Like YourPage on Facebook!
       
   
   

combined with the following javascript:

    // FB Resize
    $(window).bind('resize', _.debounce(function() {

        if (window.FB && FB.XFBML && FB.XFBML.parse) {
            var el = $('.fb-page');
            var width = el.parent().width();
            el.attr('data-width', width);

            FB.XFBML.parse();
        }
    }, 1000)); // Debounce until 1000ms have passed