Blog » Making the Facebook Page Plugin Responsive

Making the Facebook Page Plugin Responsive

Blog » Making the Facebook Page Plugin Responsive

Making the Facebook Page Plugin Responsive

Posted on 31 August 2015 in Development Process
facebook-widgets.png

On the left, the older Like Box, and on the right, the new Page Plugin.

With the release of their Graph API 2.3 in March this year, Facebook have deprecated their "Like Box" widget and have replaced it with a new "Page Plugin" widget.  It's essentially the same thing but with a fresh new look and a couple of new features.  The Like Box and now the Page Plugin are probably Facebook's most commonly used widgets.

These are great tools for engaging users from social media, and they provide a direct link between the social networking behemoth, your followers, and your website. However, what Facebook are not so good at is making their widgets responsive, which quite frankly in 2015 is unacceptable.  They do have an option called "adapt-container-width", which will make the plugin automatically fit to the width of its column, but only on page load.

Thus, if you have the plugin sitting in a sidebar column that resizes (aka, a grid, aka, almost every responsive website these days), when the user resizes their browser you'll end up with the edges of the plugin either overlapping into the neighbouring column, or being clipped so that the edge of the plugin is chopped off:

This is bad.

...and so is this.

Mobile users are not immune either, as when they rotate their device, the plugin will stay at the original width when the grid resizes to either the portrait or landscape orientation. I cannot fathom in my wildest dreams why Facebook thinks this behaviour is acceptable or well designed, but there you have it.

How to fix it

Clearly overflow is not an option, and although clipping looks tidier, it's silly as the box is chopped in half. There must be a better way, and there is! A workaround is to use JavaScript to redraw the plugin after the window is resized, as others have noted. The idea is to set up a jQuery event handler for the resize of the window, grab the width of the plugin's container, update the plugin's markup with the new width, and re-render the plugin.

This works reasonably well, but there's a problem if you simply change the "data-width" attribute of the XBFML. The plugin redraws, but sometimes the width will not change as the iframe seems to maintain the previous width.

We needed to completely regenerate the markup, via AJAX in our case, and then parse it. We also set up a "resizeEnd" JS event which only triggers after a delay in resizing the window. This prevents the code from being triggered repeatedly as the user resizes the window.

Event Trigger

$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});

Event Handler

$(window).bind('resizeEnd', function() {
var url = $('#$WrapperID').data('refresh');
$('#$WrapperID').fadeOut("slow", function() {
$('#$WrapperID').load(url, { width: $('#$HTMLID').width() },
function() {
FB.XFBML.parse(document.getElementById('$WrapperID'),
function() {
$('#$WrapperID').fadeIn("slow");
});
})
});
});

The event handler is a JavaScript template for SilverStripe, with $WrapperID and $HTMLID replaced with values from our Facebook Page Plugin component. We also added in some fade in and out events to make the whole process more pretty.

And here it is in action:

Much nicer, I think you will agree!