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 some jquery that should persist across changes to the output markup as it uses a regex expression to rewrite the width only, leaving the rest of the style tag alone.

You need to specify the correct container id or selector, replacing my example of: #footer-last. The iframe is resized based on the changes in width to the container, which will need to be set up as responsive.

// Resize facebook window width
container_width = $('#footer-last').width();
$fb_iframe = $('.fb-social-like-plugin iframe');
fb_style = $fb_iframe.attr('style').replace(/width:\s*\d+px/i, 'width: ' + container_width + 'px');
$fb_iframe.attr('style', fb_style);