WordPress Plugin – IFrameWidgets

(Please wait)

Current version (WP2.5+ Only): 1.01 (5th June 2008) | Read The Changelog
Download 1.01 (downloaded 2924 times) | RSS feed icon Subscribe To Plugin News

For WordPress 2.3.x and below, use IFrameWidgets 1.0 (Download 1.0)

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 officially not supported (due to my time constraints), but if you leave a comment below or contact me, I should be able to help.

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:

Like the plugin? Buy Me A Drink! Make a donation and get your link listed below.

Like this article? Plus One it!

65 Responses to “WordPress Plugin – IFrameWidgets”

  1. Eaglehawk says:

    So far so good, and it works on 2.3.

  2. Ty Hurd says:

    Hey Man,

    I have to say I really like you blog – as a blogger myself I read a LOT of blog, and yours has really caught my eye. Keep up the good work!

    I’m going to try this plugin – sounds great to me. While we’re on the topic of plugins, your poll (don’t know if this is for you or a sponsor), but the answer I would choose is; if the plugin is free than it’s fine to have a link and name- -why would you expect to get something for free without giving something back? If it was a full priced plugin, then it should be your option to remove external links (publisher name could be hard coded, just as the Audi symbol is on your car, or Oreo is on your box of cookies).

    And lastly, just a suggestion – I tried to subscribe to your feed via email (I get a lot of my content on my phone, no RSS reader), and couldn’t – wasn’t presented the option – and if it’s there, I didn’t see. I clicked the “dual feeds” banner top right. You should add email as an option – don’t wanna miss out on any potential readers…

    Bookmarked your page – I’ll be back!

    Ty

    • Stephen Cronin says:

      Hi Tye,

      Thanks! I just had a quick look at your blog and it looks pretty good. I’ll be back over there when I’ve caught up on my comments here.

      Thanks for the feedback on the poll – it’s an old one I added when I was considering adding links to one of my plugins (DualFeeds). In the end I didn’t, but that was more for design reason than ethical ones. I need to get a new poll as that one’s been there for ever…

      At the moment, I don’t have a subscribe via email option. It’s been on my list to do for a long time, but I’m really busy at the moment. I’m planning to add the link to the DualFeeds plugin at some point too, but I’ll probably add a separate link on my blog first.

  3. DeadRooster says:

    Thanks for this great plugin. I was just about to remove several widgets because they hung-up my site. This couldn’t have come at a better time for me.

    I just uploaded and am using it. It works GREAT!

  4. Stephen Cronin says:

    Hi DeadRooster, Thanks – I hope it keeps working great!

  5. Louis Liem says:

    Lots of useful plugins you’ve created here! I’m trying out dual feed and this one.
    I’m sure it’ll be great!

    • Stephen Cronin says:

      Hi Louis, Thanks. And can I just say, that the icons you use for full and partial feeds are just fantastic!

  6. Ty Hurd says:

    This plugin ROCKS! what an improvement I’ve seen using it… Great post!

  7. Eaglehawk says:

    Stephen,
    FYI this does not work with wordpress 2.5

    • Stephen Cronin says:

      Hi Eaglehawk,

      Thanks for letting me know. I knew there was a chance it wouldn’t work because the way widgets work has changed in 2.5. I was planning to look into it earlier, but I’ve just moved country and I am so busy as a result.

      I’ll try to get this fixed in the next week or so..

      • Eaglehawk says:

        Stephen,
        Not trying to rush you or anything, but any update for 2.5?

        • Stephen Cronin says:

          Hi Eaglehawk,

          Feel free to chase me! I’ve been very busy, so this had slipped to the back of my mind. It’s now at the fore front and I’m hopeful of a new version by the end of the week (sooner if possible). Sorry!

  8. Igor The Troll says:

    This is great stuff but how do we fix the DOM attribute? When one size widget loads and then resized on some JavaScript event!

    Like the famous Seesmic fiasco on Michael Arrington blog.

    The video screen is small but when you click to watch it expands!

    Or should we should we just let The Michael Troll lose money is his Seesmic investment? LOL

    Just joking, let’s see if we can find a hack for this.

  9. Stephen Cronin says:

    For those people who need a version which works with WP 2.5, I’ve written one, but don’t have time to package it up yet. It should be done by mid next week. If you need it quicker, leave a comment and I’ll email it to you…

  10. Chris@Cheap Digital Cameras says:

    Hi Steve,

    Is this plugin tested on Wordpres 2.5.1 or have anyone else tested it on that version? I don’t seem to get it to work but it could be some of my other plugins messing with it. I have like almost 30 plugins running.

    • Stephen Cronin says:

      Hi Chris,

      There is a problem with IFrameWidgets in WordPress 2.5x. I’ve fixed it, but have had time to package it up yet. I can email the new iframewidgets.php file if you like (you just copy it over the top of the old one).

  11. Chris@Cheap Digital Cameras says:

    Hi Steve,

    Thanks for quick answer and I would be really grateful if you could email it to me.

    BR,
    Chris

    • Stephen Cronin says:

      Hi Chris,

      I sent it not long after I made the previous comment. Hope you got it! Let me know if you didn’t…

      Steve

  12. Telephone Gal says:

    Works good on my test site for me. I have seen the rest of the page load OK even when the whole thing runs slow. I am still updating my main site but I can focus on other thing and not have to abandon javascript (I was going to focus on PHP only). Many thanks Karen

    LINK REMOVED: because of failure to use KeywordLuv syntax (name@keywords)

  13. Robin@Dental Practice Marketing says:

    Hey Stephen,

    Just downloaded the WP 2.50 + version and it works like a charm. I was looking for something like this but couldn’t exactly place what I was looking for as I had no idea widgets could be omitted while loading. The BlogRush widget (developed by John Reese) occasionally hangs and that really irritates me, yet it is a major traffic driver as are all of Reese’s programs.

    Thanks
    Robin

  14. luxury guy says:

    WP2.5+ Only ?
    Well… It’s seems it’s to upgrade my wordpress engine …

    LINK REMOVED: because of failure to use KeywordLuv syntax (name@keywords)

  15. Amadeus@Science Diary says:

    My blog is working on WP2.5.1. I hope will work fine…

  16. Dragomir@All Of Star Wars says:

    Just the question if all Internet browsers supports the IFRAME? Is it possible if someone can’t see the widget?

    • Stephen Cronin says:

      Dragomir,

      All modern browsers support IFrames. If they have browsers old enough to not support IFrames, the missing widget would be the least of your problems, believe me!

  17. Dinesh B@Busby SEO Challenge says:

    Pity about the referrer information but then I guess there is nothing you can do about it. I wish the browsers were smart enough to do this inherently and make it part of the iFrame feature.

    • Stephen Cronin says:

      Dinesh,

      I agree with you on this – it’d be great if the browsers could pass the master page’s referrer information for IFrames. For most widgets, referrer info isn’t important, but for a few it’s very important.

  18. Ilya@Rap Battle says:

    This sounds great, but from what I’ve heard Iframe causes all kinds of trouble with advertising impressions…?

    I currently use WP-SUPER CACHE which is freaking amazing for speeding up WP.

  19. Alias says:

    Hello,
    How to use this plugin for a non-widgetized Theme ?
    thanks !

  20. Lee Doyle says:

    This is a really nice plugin!

    I have one question though. Are there any tags for this? I have some themes in development and would like to use this but without the widgets enabled. Am I able to save the widgets but use a tag code to bring them up on a theme with no widgets?

    Thanks again,
    Lee

  21. Eva White says:

    This seems to be a good plugin. I had removed some widgets from my site as they had made the site load very slow, but now I guess I can put them back with this plugin. I am surprised that their are plugin’s to solve all problems.

  22. Tom @ funny mpeg videos says:

    I’ll second Lee’s question. Is there a way to put widgets in an iframe if your theme doesn’t support widgets?

  23. Simon@Make Money Online says:

    Looks alright
    1 question though – I thought iframes are bad for seo?

  24. m coles@st albans offices says:

    Not sure about SEO, but are iframes still bad from an accessibility point of view? If you search google, most of the dicsussion seems to be from 2004 or 2005! Have thigns improved, or is it still an accessibility problem to use iframes?

  25. Steven says:

    How about a plugin for using javascript in a text widget? I tried the iFrames plugin for this and it didn’t work with my Linkshare code for an Orbitz ad. The reason we need it is because dynamic ads work better for conversions. Code starts like this:

  26. Soufulow @ Bluehost Review says:

    Stephen, this is a great plugin.

    The iFrames is, especially useful, for blog readers who’re surfing with a lousy ISP (like me in Malaysia!) There were many times that I gave up reading a blogpost as the page takes forever to load – I guess the problem can be solved (at least) by now with your plugin.

  27. irene says:

    Thanks…thanks alot.
    That’s great and helpful plugin.
    Ready to subscribe for another updated.

    Thanks for your hardwork.

  28. irene@natural skin care says:

    My previous iframe plugin need to add target=”_blank”
    If not, then stuck nowhere. Or maybe something wrong in my installation, but i think it is ok.
    I hope this plugin work well in mysite.

    Thanks

  29. Susan@Free ISP says:

    @irene agreed, great plugin!

  30. chris@Digital camera tips says:

    I think search engines still do not like iframes. I do not think i would use the plugin in one.

  31. dave@awesome says:

    any issues running this on 2.7?

  32. Ladie Golf Pro says:

    Haven’t had any problems with 2.7

    LINK REMOVED: because of failure to use KeywordLuv syntax (name@keywords)

  33. Abdul@Make Money on the Internet says:

    I think that the IFrameWidget has more advantages than the drawbacks, anyways a few XHTML errors will not hurt. I hope this plug-in will also improve loading times!

  34. Kirk M@Just Thinkin" says:

    Found one small problem when using with WP 2.7. When you open an active iFrame widget for checking the code and then clicking on “Cancel” to collapse the widget without saving any changes, the iFrame widget is removed from the sidebar which obviously should not happen. Could you possibly look into this?

    The only other minor caveat that I’ve found is that a styling height statement must be present within the widget code before the iFrame widget will display the widget in the sidebar correctly (it’s too short vertically without the height being defined). For example:

    The new Google Friend Connect Members gadget (and the “Wall” gadget as well) only defines the width within the code:

    style=”width:260px;border:1px solid #cccccc;”

    I had to manually define the height myself:

    style=”width:260px;height:300px;border:1px solid #cccccc;”

    Once that was done the widgets in the sidebar displayed as they should.

    My AdSense code already has the height defined so it was no problem loading that into an iFrame widget as is.

    Would it be possible to modify your plugin to include and optional field for defining widget height? I don’t mind doing it manually but it would save a bit of time.

    And thanks for this fine plugin.

    • Stephen Cronin says:

      Hi Kirk,

      Thanks for letting me know of this. I’ll look into it as soon as I get a chance. As for the height, it should autodetect it, but I’ll have a look into this as well. I can probably add a height feature at some point in the future as a failsafe.

      I’ll let you know when I’ve looked into these item (but it may take a while). Thanks for using the plugin and for the feedback!

  35. Marcin@Tech Gadgets says:

    But the drawback to this is that Google don’t read iFrames

    • Kirk M@Just Thinkin" says:

      Hi Marcin,

      I’ve been checking my AdSense ad units and search widgets and most recently my Google Friend Connect widgets and these Google powered items (in my sidebar) seem to be reading my site just fine.

      The contextual powered ads in my AdSense widget reflect whatever the post content is and it’s racking up clicks and impressions just like it always does. The Friend Connect widgets also appear to be tracking user sign ups without a problem.

      Could you possibly elaborate a bit on what you mean by Google not tracking iFrames? Perhaps I’m missing something.

      • Stephen Cronin says:

        Hi Kirk,

        I think what Marcin means is that the Googlebot doesn’t spider the contents of IFrames, so that content won’t be indexed and therefore won’t appear in Google searches.

        It’s a bad idea to put your core content in an IFrame as you want it to appear in Google searches. However, for most of the things you put in widgets (ie Adsense, Blog Catalog widgets etc), you don’t really want Google to index your site against these.

        Hope that makes sense.

        • Kirk M@Just Thinkin" says:

          Hi Stephen,

          On the height auto detect; Does the auto detect work by picking up a height statement within the code? If so, that would explain why it didn’t for the Friend’s. Connect widget. As soon as I added one manually it picked it up with no problem.

          And not putting your core content in an iFrame makes perfect sense. It seems I misunderstood what Marcin was saying then. For myself it was only the data from 3rd party sources keeping my site from fully loading that made me dump my social type widgets in the first place.

          I’m glad I stumbled across your your plugin (found it by Googling for the problem of 3rd party widgets choking down websites…go figure).

          • Stephen Cronin says:

            Hi Kirk,

            The autodetect is done by JavaScript. It shouldn’t need the height to be defined in the code, the browser should tell it! Which browser are you using?

            I guess this is a good excuse for me to sign up to Google Friend Connect! I’ll do some further testing in the coming days. Thanks for helping me with this.

            As an aside, I’ve been to your blog a few times, although I think I only commented once, way back in July 2007 on your SEO related post.

          • Stephen Cronin says:

            Hi Kirk,

            As it turns out, I don’t need to join Google Friend Connect, I can replicate the problem using the Blog Catalog widget. I’m still not clear on all the details, but here’s what I’ve found:

            1. The problem occurs in Firefox 2.0.0.20, but not Firefox 3, Google Chrome, or IE6.
            2. I think the problem occurs in WordPress versions after 2.5.

            My guess is that the problem occurs because the way widgets work changed in WordPress 2.5. The plugin uses the number of the widget (you used to be only allowed 9), but in versions after 2.5 the number is something like 320138091 instead of 1 or 2.

            That’s no problem for most browsers, but apparantly Firefox 2 can’t handle it. That doesn’t really make sense (the logic should still work), so I’m leaning towards blaming Firefox 2.

            That said, I’ll see if I can do something to fix the problem.

          • Kirk M@just Thinkin says:

            Hi Mark,

            I should have told you the browser I’m seeing this in right off the bat…and me an old software tester (beginnings of dementia, it must be). I saw the problem only with the Google Friend Connect “The Wall” gadget but not “The Membership” gadget.

            I see this using Firefox 3.0.5, Shiretoko builds, Chrome and IE 7.0. I haven’t tried iFrames with my old BlogLog widget yet but I will.

            Hope that helps some.

  36. jeff@High yield savings account. says:

    I know some of the widgets load slow on some sites but do any break the frame. I would hate for people to find out that some widget would direct people to another site . If they have no problem in frame and page loads and you can read it while widgets load sounds like a great idea.

  37. Kaiser@Barack Obama Speech says:

    I plan on starting a political blog in a few weeks and i have been testing out quite a few plugins and widgets. My main question i have about this is if i use IFrameWidgets, will Google and the other 2 pick up the links in those widgets? I rarely used frames in the past mainly because i always heard bad things about using them.

  38. Paul@Meeting rooms edinburgh says:

    @Mark ,Not sure about SEO, but are iframes still bad from an accessibility point of view? If you search google, most of the dicsussion seems to be from 2004 or 2005! Have thigns improved, or is it still an accessibility problem to use iframes?

  39. John@John Vantine says:

    Wow, I never thought I’d use iframes again, but this is actually a great idea – Thanks! Gonna go experiment with this now on one of my newer blogs.

  40. Breaking Guy@Breaks says:

    I think it’s not a good idea to use iFrame with seo-oriented sites. Search engines robots have some problems with such pages.

    • Stephen Cronin says:

      Read above comments – you’re not putting your content in the IFrame, it’s only third party widgets such as Blog Catalog. That’s not what Google’s going to be indexing anyway!

  41. Naomi Welsh says:

    Cool plugin. I’ll try out on my blog.

  42. Land rover says:

    Stephen, this is a great plugin.

    The iFrames is, especially useful, for blog readers who’re surfing with a lousy ISP (like me in Malaysia!) There were many times that I gave up reading a blogpost as the page takes forever to load – I guess the problem can be solved (at least) by now with your plugin.

  43. Peter says:

    I am looking for an IFRAME replacer in my postings/pages. Can I use this plugin to do this?
    What’s nice about the features is the auto height.

  44. Jordan says:

    Can you give a brief howto on obtaining widget code? I wouldn’t consider myself a complete n00b, but I’m really stuck on this part. I’ve dug through the individual widget PHP code but got kinda lost. I’m sure your plugin works great, I just need to know this info..thanks for any help!!

  45. Michael says:

    Hi Stephen
    This sounds like an interesting concept and I am actually having exactly this kind of problem right now – a very slow loading wordpress widgets that slows down the complete page.
    Now if I understood this correctly your plugin is for third party Javascript widgets only, not for wordpress widgets that are provided by plugins or themes?
    Is there a way to use it for regular wordpress widgets?
    Like drag the iframe widget in the sidebar and then drag a widget into the iframe widget so that particular widget gets loaded in an iframe?

    Mike

Leave a Reply

Anti-Spam Quiz:


Stephen Cronin

is Manager of Online Service Delivery at a Queensland Government department & has been a freelance WordPress developer/consultant since 2007
*Content on this site is my own and is not related to my employer

Hire me - I'm expensive, but I'm very good!

WordPress Plugins

Want a Custom WordPress plugin? See my Services page.

Greasemonkey Scripts

Visit my home page at Userscripts.org.