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

Answer 1

To make the new Facebook Page Plugin responsive on initial page load, you'll want to remove the data-width attribute and instead add

data-adapt-container-width="true"

This will make the Facebook Page Plugin responsive, but only on the initial page render, with a minimum width of 180px.

I'm still trying to figure out how to make it truly dynamically responsive, in spite of Facebook's caveat (I'll post an update if I ever find the answer).

No Dynamic Resizing

The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet:

The plugin will determine its width on page load. It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

Source: https://developers.facebook.com/docs/plugins/page-plugin

You could make it dynamically responsive by reinitializing the widget on browser resize, as Io Ctaptceb suggested, but by doing that you run the risk of eating up memory very quickly.

Yugal Jindle had a good answer, but I wanted to clarify that I have yet to find a way to make the plugin truly dynamically responsive.