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

Like others, I've found that the plugin can be made (via JS) to shrink when the container shrinks, but afterwards will not grow when it expands.

The issue is that the original FB.XFBML.parse() creates a set of child nodes with fixed styles in the document tree, and later invocations will not properly clean out the old nodes. If you do it yourself in your code, all is well.

Facebook HTML (I merely added ID elements to what Facebook provided, to avoid any selector accidents):

    

        Your Site
    

...JQuery code to resize the widget to 500px and preserve the inner fallback element:

var bq = $('#bqNoFeed').detach();
var fbdiv = $('#divFacebookFeed');

fbdiv.attr('data-width', 500);
fbdiv.empty();
fbdiv.append(bq);
FB.XFBML.parse();