Responsive width Facebook Page Plugin
this works for me (the width is forced by javascript and FB plugin loaded via javascript)
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=443271375714375";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
jQuery(document).ready(function($) {
$(window).bind("load resize", function(){
setTimeout(function() {
var container_width = $('#container').width();
$('#container').html('<div class="fb-page" ' +
'data-href="http://www.facebook.com/IniciativaAutoMat"' +
' data-width="' + container_width + '" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>');
FB.XFBML.parse( );
}, 100);
});
});
</script>
<div id="container" style="width:100%;">
<div class="fb-page" data-href="http://www.facebook.com/IniciativaAutoMat" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="http://www.facebook.com/IniciativaAutoMat"><a href="http://www.facebook.com/IniciativaAutoMat">Auto*Mat</a></blockquote></div></div>
</div>
This doesn't work too well when you have the plugin placed in a thin column, like a sidebar for example. On medium sized screens these typically run smaller than 280px in width.
.fb-page,
.fb-page span,
.fb-page span iframe[style] {
width: 100% !important;
}
This is the code I use to stop the plugin breaking outside of a wrapping container. Unlike the old like box which would tile, this one just overflows, hiding the overflowed content.
Facebook's new "Page Plugin" width ranges from 180px
to 500px
as per the documentation.
- If configured below
180px
it would enforce a minimum width of180px
- If configured above
500px
it would enforce a maximum width of500px
With Adaptive Width checked, ex:
Unlike like-box, this plugin enforces its limits by sticking to the boundary values if mis-configured.
For small screens / Responsive behaviors
When rendering on smaller screens, enforce desiered
width
on the plugin container and plugin would try to fit in.The plugin renders at a smaller width (to fit in smaller screens) automatically, if the container is of slimmer than the configured
width
.You can scale down the container on mobile and the plugin will fit in as long as it gets the minimum of
180px
to fit in.
Without Adaptive Width
- The plugin will render at the width specified, irrespective of the container width