Wednesday, September 23, 2015

Steps on How to make Facebook Page Plugin Responsive

Quick Overview

The Facebook Page Plugin is by default not responsive even if you click the option "Adapt to plugin container width". The purpose of "Adapt to plugin container width" is to fit the plugin perfectly in any container such as sidebar, footer and so on; however, in mobile devices everything becomes smaller and Facebook page plugin has a minimum of 180 pixels width. The plugin will overlap if you view your website on mobile devices with a screen less than 180 pixels width such as iphone 4s and so on which has 58.6 mm (2.31 in) screen width dimension.

Result:

Steps on How to make Facebook Page Plugin Responsive

You can see on the overlap area on the right side. Now to fix this issue all you need to do is follow the simple steps below:

1. Integrate your Facebook Page plugin anywhere on your website. Make sure to check "Adapt to plugin container width" before installing your Facebook page plugin.

Steps on How to make Facebook Page Plugin Responsive
Click the image to view original size


2. Copy the code below.

<link href="http://webtester.acoxi.com/widgets/fblikebox.css" rel="stylesheet">

3. Paste the code just below the <head> tag of the page where you installed the Facebook Page Plugin.

4.  Save the changes and done.

Result after adding it:

Steps on How to make Facebook Page Plugin Responsive

No matter how small the screen you have, the plugin will automatically adjust.

For Blogger users please see screenshot below:

Steps on How to make Facebook Page Plugin Responsive
Click the image to view full size

Hope this helps.