Is it possible to set a fluid width for Facebook&#

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

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

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 3

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

Answer 4

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 5

An important note about this resize stuff: If the Facebook comment script detects that you're on a mobile device it breaks this. But, if you make the <fb:comments> tag contain the attribute value mobile="false" then (for now) Facebook's scripts will respect your CSS.

Answer 6

If you are using the official wordpress facebook plugin due to the mobile sniffing facebook do.

The mobile version will automatically show up when a mobile device user agent is detected. You can turn this behavior off by setting the mobile parameter to false. Please note: the mobile version ignores the width parameter, and instead has a fluid width of 100% in order to resize well in portrait/landscape switching situations. You may need to adjust your CSS for your mobile site to take advantage of this behavior. If preferred, you can still control the width via a container element. http://developers.facebook.com/docs/reference/plugins/comments/

You will need to change the facebook/social-plugins/fb-comments.php on line 35.

<div class="fb-comments fb-social-plugin" ' . $params . ' data-mobile="false"></div>

This will allow you to style with the below.

.fb-social-plugin {
    width:98%!important;

}

.fb_iframe_widget span {
    width:100%!important;
}

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

It would be nice if they could either fix their mobile version or put a setting on their plugins GUI.