Blog» How to make the Facebook Page Plugin fully responsive

How to make the Facebook Page Plugin fully responsive

By Carlos Mauri  | August 02, 2017  |  User experience, Web solutions

Adding the Facebook Page Plugin to your website is a great way to feature your community's activity on the world's largest social network. In most cases, adding the plugin isn't difficult, but if you need to make it responsive, a little extra work is required.

The problem

Recently we had to integrate the Facebook Page Plugin for one of our clients. The plugin width had to be responsive according to the size of the user's screen (smartphone, tablet, desktop...) but, at the same time, it also needed to have a dynamic height based on the tallest adjoining column because all the columns needed to have equal heights. Let's illustrate this with an image:

Social grid with fully responsive Facebook page plugin

Facebook provides a few options to customize the Page Plugin, like using a small header, hiding the cover photo, or adapting the width of the plugin to its container, but unfortunately none of these options make it fully responsive.

The solution

We had to find a way to dynamically change the default height of the plugin once the page was loaded. After some research we found that the Page Plugin is represented by an XFBML object, and its function FB.XFBML.parse() allows you to re-render the Page Plugin on the fly. Using this function with some jQuery events, we were able to update the plugin size whenever the screen dimensions got modified.

The implementation

The idea is really simple. Once the page has been loaded or the window resized, we trigger the function that will render the plugin with the new box dimensions. To do that we used the on() method provided by jQuery.

$(window).on('resize', function() {
   setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 500);
});
 
$(window).on('load', function() {
   setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 1500);
});

Then, in the main function we first calculate the new width and height, then we set the plugin with these values using the jQuery attr() method, and finally we call the FB.XFBML.parse() to render it again in the page.

CMSSpace.changeFBPagePlugin = function () {
   //getting parent box width
   var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
   //getting parent box height
   var container_height = (Number($('.fb-column').height()) - (Number($('.fb-column-header').height()) + Number($('.fb-column-   header').css('margin-bottom').replace("px", "")) + Number(($('.fb-column').css('padding-top').replace("px", "")*2)))).toFixed(0);
   if (!isNaN(container_width) && !isNaN(container_height)) {
      $(".fb-page").attr("data-width", container_width).attr("data-height", container_height);
   }
   if (typeof FB !== 'undefined' ) {
      FB.XFBML.parse();
   }
}

We also recommend adding a tiny timeout to be sure that the plugin is being rendered with the desired values. For us it was mandatory because our framework needed some extra time to calculate the new column height. Otherwise, you may not need to set up a timeout.

The end result

The end result is a fully responsive Facebook Page Plugin. No matter your container dimensions or the size of the user's screen, the plugin will expand or reduce in size according to its parent box, providing a seamless user experience for your visitors.

Alberta Gymnastic Federation social section

Want to see this in action? Visit the Alberta Gymnastics Federation website.

Need help adding a third-party plugin to your site? Reach out to discuss your specific needs. We’re happy to chat anytime!


Related Blog Posts

Getting started with Facebook Comment Mirroring

We recently migrated a client to Facebook comments and enabled Comment Mirroring. Though the process is simple, it’s poorly documented and a little...

Read more »

Is it time to upgrade your website’s event calendar? Try our eZ Publish calendar extension

Using a calendar to track events dates back to ancient times, long before the advent of digital media. But five thousand years after stone tablet calendars...

Read more »

A simple Sass integration for eZ Publish

Working with CSS preprocessors like Sass or Less is much more fun than working with pure CSS. Here's a simple shell script to integrate Sass into your...

Read more »

Comments

blog comments powered by Disqus

Hi, we're Mugo Web - Nice to meet you!

We're a group of web experts who solve complex web problems.

Learn more about us »

Search


Categories


Yes - we can do that.

We can do that

Many years of experience with complex websites allows us to offer total solutions.

Learn more about what we can do »

We love our clients (and they love us too)

Collage of logos : American express, Habitat, Car and Driver, Rasmussen, and American museum of Natural History

We've solved problems across North America and around the world.

Learn more about what we've done »

We tweet too

Follow us on Twitter for the latest Mugo happenings

mugo twitter page @mugo

© 2008 - 2017 Mugo Web. All rights reserved.