We built WP Responsive FB iframes for 2 reasons.

Reason #1. On all of our client sites we use the Facebook page plugin to create the facebook fan page gadget.

The issue is that the iframe embed is not responsive. We use it mostly in WordPress Widgets. The issue is that when creating the widget we want to set it at 480px wide so that it shows good in larger mobile phone. If set it at that – most sidebars are smaller than that – so we end up with this

If we reduce the width of the widget to 320px this is what we would see.

So we built a plugin WP Responsive FB iframes that you just install and activate and it resolves the issue. There are no settings it just adds the code code to your site.

Reason #2. We want to use the iframe embed because if the iframe is loaded below the viewport we can use the free a3 Lazy Load plugin to lazy load the facebook JavaScript. If the facebook like box with iframe is embedded below the viewport then Lazy Load will be used. This is important as the facebook like box with profile thumbnails is a real page load speed killer.

Here is a test with the facebook like box in the viewport

Push the facebook like box below the viewport and it is lazy loaded – below is the test result after doing that (a3 lazy Load is a great plugin for speeding up you sites page load). Virtually cuts the page load time in half. See it saves 9 facebook JavaScript calls and reduces the page weight by 300KB, giving a load time of just 849 milliseconds.