Current version (WP2.5+ Only): 1.01 (5th June 2008) | Read The Changelog

IFrameWidgets allows you to place javascript widgets in an IFrame, so they won’t stop the rest of the page from loading if they load slowly or hang.

Features

The plugin creates IFrame widgets, which are similar to Text Widgets, except output is created in an IFrame (in the sidebar).

The benefit of placing slow loading widgets in an IFrame is that IFrames load in parallel to the rest of the page. If the widget loads slowly or hangs, it won’t stop the rest of the page from loading. Other features include:

• Widgets remain hidden until they are completely loaded, then appear in whole. If they don’t load, they won’t take up any space on your sidebar.
• Up to 9 IFrame widgets can be enabled, but you don’t have to use them for all your widgets, just the ones that are loading slowly.
• Caters for the BUMPzee widget php code (other php code won’t work).

Want to see it in action? You can, right here on my site. The BUMPzee, MyBlogLog and BlogCatalog widgets are all running in IFrame Widgets.

Note: although the rest of your page will continue loading and will not be held up by slow widgets (meaning it shouldn’t break the display), your browser will not say the page is Done until the slow widgets have finished loading (or given up).

Limitations

There are two limitations to the plugin:

• Referrer Information: If the widget service website records which pages the widget is loaded on, it will receive inaccurate information (it will think the widget is on the IFrame page, not your actual post). This does not appear to be a problem for most widgets. See the Compatibility section below for any known issues.
• XHTML Transitional Validation: The plugin will cause two validation errors: one because it uses allowtransparency=”true” to get a transparent background in IE; the other because it uses onload (in the IFrame) to change the IFrame height when it’s loaded (so you don’t have to specify the height in pixels).

Browser Support

Tested in Firefox, Internet Explorer 6 and 7, Opera and Safari.

There is one issue in Opera: The IFrames are supposed to appear when the content in them has fully loaded. Opera does not recognise the IFrame onload attribute as it’s not valid XHTML. As a result, if something holds up the page, none of the IFrame widgets will appear until everything has loaded or given up (then they will all appear).

Compatibility

This is a list of widgets known to have been used with the IFrameWidgets plugin and any issues encountered. Other widgets will be added to the list as I become aware of their status. If you use the plugin with a widget not on the list, please give me some feedback (via a comment), so I can update this.

• BUMPzee: Accurately shows who has been visiting your site, but doesn’t record page view stats properly (the figures for This Page and Blog Total will be the same). This does not affect your visitors, only your stats. Scott from BUMPzee is looking into a way to address this.
• BlogCatalog: There are no known issues. BlogCatalog report that they do not use the referrer information (see limitations) at this time.
• MyBlogLog: Accurately shows who has been visiting your site. There should be no issue relating the use of http_referer IF you get the Stats Tracking Script from the Widgets section of the MyBlogLog website and enter it in the Tracking Code option in the IFrame widget.
• Blogrush: There are no known issues.
• Alexa: Displays correctly. However, no one is sure if the Alexa Widget records traffic to your site. If it does, then it may not record traffic properly if its in an IFrame.

Requirements

This version only works on WordPress 2.5 and above. For previous versions of WordPress (with support for WordPress widgets), please use IFrameWidgets 1.0. Downloads links are available from the top of this page.

Installation

• Download the plugin (links available from top of this page) and unzip it.
• Upload the iframewidgets folder to your site’s wp-content/plugins folder.
• Activate the plugin within WordPress.

Upgrade

To upgrade simply follow points 1 and 2 from the installation instructions.

Usage – Version 1.01 (WP2.5+ only)

Once the plugin has been activated, go to the Widgets page on the Design menu. Select the sidebar you want in the Current Widgets area, then click Add next to the IFrameWidget entry in the Available Widgets area.

Once on the sidebar, click the Edit link to set the widget up. You can define the following:

• Title: This is optional. You probably don’t want this for most widgets.
• Width: This can be left blank for most widgets (the IFrame’s width will be 100% of the sidebar’s width).
• Alignment: Choice of Your Theme’s Default, Left, Center or Right.
• Tracking Code: This is optional and is meant to negate the http_referer issue (see Limitations section). This will come from the site who created the widget. At present only MyBlogLog offer a tracking code.
• Widget Code: This is where you enter the code for the widget you are trying to add. This will come from the site who created the widget (eg BUMPzee, MyBlogLog, BlogCatalog, etc).

When you’ve finished entering the data, close the widget setup screen, then click Save Changes.

If you need more IFrame widgets, you can add more by clicking Add in the Available Widgets area.

Usage – Version 1.0 (WP2.3.x and below)

Once the plugin has been activated, go to the Widgets page on the Presentation menu. There will be a widget called IFrame 1 in the Available Widgets area. Drag this onto the sidebar where you want it to appear.

Once on the sidebar, the widget will have icon on the right hand side (a blue line with three black lines underneath it). Click this to set the widget up. You can define the following:

• Title: This is optional. You probably don’t want this for most widgets.
• Width: This can be left blank for most widgets (the IFrame’s width will be 100% of the sidebar’s width).
• Alignment: Choice of Your Theme’s Default, Left, Center or Right.
• Tracking Code: This is optional and is meant to negate the http_referer issue (see Limitations section). This will come from the site who created the widget. At present only MyBlogLog offer a tracking code.
• Widget Code: This is where you enter the code for the widget you are trying to add. This will come from the site who created the widget (eg BUMPzee, MyBlogLog, BlogCatalog, etc).

When you’ve finished entering the data, close the widget setup screen, then click Save Changes.

If you need more IFrame widgets, you can add more (up to 9) in the IFrameWidgets area near the bottom of the page. Simply set how many you want and click Save.

Support

This plugin is not supported.

Acknowledgements

A big thanks to Scott Jangro from Bumpzee and Daniel from BlogCatalog for getting involved and quickly making changes which have made this plugin feasible. Also a big thanks to Andy Beard for getting involved and making things happen.

The code to register and setup the widgets is based on the Executable PHP widget plugin by Otto from http://ottodestruct.com/. Thanks to Otto for his many contributions to the WordPress world, especially this one.

IFrames are not new to me, but I wasn’t sure if social widgets would run in them. Earl Moore’s Keeping javascript widgets from controlling your blog post told me they could.

To provide software, you need people willing to bravely step in and test the beta version. Thanks go to the following people for their valuable feedback:

• Eaglehawk from Flight of The Eaglehawk (site no longer there)
• Chris from Blog-Op (site no longer there)
• K-IntheHouse from http://www.shankrila.com
• RT from Untwisted Vortex (site no longer there)