Try putting the .fb-like
class into a div wrapper with style="width:100%;
. Now you could add something like a $(window).bind("load resize", function(){}
to get the actual width of the browser and resize the like button.
Edit:
<script>
var container_width_current = $('#WRAPPER-DIV').width();
$(window).bind("load resize", function(){
var container_width_new = $('#WRAPPER-DIV').width();
if (container_width_new != container_width_current) {
container_width_current = container_width_new;
$('#container').html('<div class="fb-like-box" ' +
'data-href="https://www.facebook.com/adobegocreate" ' +
'data-width="' + container_width_new + '" data-height="730" data-show-faces="false" ' +
'data-stream="true" data-header="true"></div>');
FB.XFBML.parse();
}
});
</script>
Edit #2:
This is a quick CSS approach:
#u_0_0 {
width: 100% !important;
}
.fb-like.fb_edge_widget_with_comment.fb_iframe_widget, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span, .fb-like.fb_edge_widget_with_comment.fb_iframe_widget > span > iframe {
width: 100% !important;
height: auto !important;
}