facebook-social-plugins

Responsive width Facebook Page Plugin


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?


Solution

  • Facebook's new "Page Plugin" width ranges from 180px to 500px as per the documentation.

    With Adaptive Width checked, ex:

    enter image description here

    Unlike like-box, this plugin enforces its limits by sticking to the boundary values if mis-configured.

    For small screens / Responsive behaviors

    Without Adaptive Width

    enter image description here