Responsive width Facebook Page Plugin

Question

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?

Answer 1

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 of 180px
• If configured above 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

• The plugin will render at the width specified, irrespective of the container width

Answer 2

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.