WP Responsive FB iframes

Category: ,

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

In Desktop the widget is smaller and the Facebook widget does not resize
Facebook like box in iPhone 7 with width set at 480px
Facebook like box in iPhone 7 with width set at 480px

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

In mobile it shows small
Whilst in desktop it shows ok

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.

In Mobile it shows great
And in desktop it is also excellent

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.

    Plugin Info

    WordPress 6.4 or higher
    Tested up to
    WordPress 6.5.3
    Minimum PHP version
    Current Version
    Last Update
    First Released