Is it possible to set a fluid width for Facebook's social plugins?

user_61320 0
Viewed 95338

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?

facebook-social-plugins responsive-design
29 Answers

I've got this working using this simple script (see code in link).

https://gist.github.com/2111366

You have to make a few changes to the information so that you are using your Facebook App ID and your page URL.

This solution is using jQuery so you'll have to understand how that work but once you get the script to execute your responsive design will work on page load or when resizing the page.

user_12870470

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

user_17852090

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.

user_12581500

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

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);
        };
    }
})();
user_16424770
Related