Facebook introduced a new Page Plugin to replace the Like box plugin.
Documentation: https://developers.facebook.com/docs/plugins/page-plugin/
I'm replacing the Like Box plugin with this new plugin. On some websites I've used this CSS code to make the plugin responsive inside a element:
.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] {width: 100% !important;}
Replacing this with this code doet not work:
.fb-page, .fb-page span, .fb-page span iframe[style] {width: 100% !important;}
My Page plugin code looks like this (not providing a data-width attribute):
<div class="fb-page" data-href="https://www.facebook.com/MyFacebookPage" data-height="1200" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"></div>
It looks like Facebook has added a div element with a inline style element within the DOM loaded by the iframe:
<div style="min-width: 280px; width: 340px;" id="u_0_0">
...content of the plugin...
</div>
When I adjust this width to 100%, every element is aligned at the full width except the cover photo.
It is possible to give this new Page plugin a responsive behavior just like with the Like box plugin?
Facebook's new "Page Plugin" width ranges from 180px
to 500px
as per the documentation.
180px
it would enforce a minimum width of 180px
500px
it would enforce a maximum width of 500px
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