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

Here is what I ended up with:

(function() {
    window.addEventListener('load', updateWidth);
    window.addEventListener('resize', debounce(function () {
        updateWidth();
        if (window.FB && FB.XFBML && FB.XFBML.parse) {
            FB.XFBML.parse();
        }
    }, 1000));

    function updateWidth() {
        $('.fb-like, .fb-comments').each(function () {
            var el = $(this);
            var width = el.parent().width();
            el.attr('data-width', width);
        })
    }

    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }
})();

Answer 2

Facebook made some changes to the outputted markup from the comments plugin. I am using the HTML5 version. This amended CSS from what was shared above did the trick.

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

Answer 3

That's how it works: just add this data-width="100%" Here is an example:

<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>

Answer 4

This is JQuery and might be part of the answer to your question. I am using the HTML5 version of the like button:

<div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"></div>

The "div.main-content" element is the element that the like button must fit into in my design. The resizing works until to the div gets so small that the data-layout attribute in the div.fb-like needs to be changed from "standard" to an alternative that takes up less horizontal space. I am new at this, so I am not sure if this is the most elegant solution to making the like button repsonsive. I would like to see an answer to this question from somebody that is more of an expert on this subject.

$(window).resize(function() {
  var computed_width = $('div.main-content').width();    
  $('div.fb-like iframe').attr('style', 'border: medium none; overflow: hidden; height:  24px; width: ' + computed_width + 'px');
});

Answer 5

This works for me:

 $('.fb-comments').attr('data-width', '100%');

Answer 6

I think max-width is better than width in this case, and it works for me:

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