Fixing Broken IFrames in Your Blog

by SBA · 4 comments

Okay, what is an iframe? How will I know if it breaks? How can I fix it?
Only recently did I realize I should know more about iframes. Often your knowledge expands out of necessity --- when a problem hits you square in the face! Read this article, and store it in your memory to be called up when you face a similar problem.

The Problem

I had finally selected a good service, ChatRoll.com, to support my client's new Chat Room. But try as I might, I could not embed the virtual chat room within a page! WP seemed to gobble up the html code, leaving only the link for a pop-up version. Sort of reminded me of the post on helping Html to escape WP's built-in editors.

Definition of IFrame:

An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert (interactive) content from another source, such as an advertisement. ... an IFrame behaves like an inline image ...  - TechTarget

The Chat Room software provided code that contains an IFrame html tag to embed the interactive document (chat room). Such software often uses AJAX - Asynchronous JavaScript and XML. One of the prime examples is a Google Maps IFrame. If the IFrame software changes, site owners don't have to upgrade anything in the post.

The Solution

As happens with Serendipity, while searching for an unrelated plugin, I discovered one that could solve my problem. It's called "Insere Iframe" (Insert IFrame). Basically, it stops WP from stripping your code. Instead, you use a shortcode framed in square brackets to escape WP's axe.

Here's what I wanted my code to look like:

<iframe width='750' height='600' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' allowtransparency='true' src='http://chatroll.com/unitedswap-room/embed?fgcolor=4076b3&bgcolor=ffffff&textbgcolor=ffffff&textfgcolor=000000&sound=1&border=1&w=$0'></iframe>

Instead, WP removed all of the above! Without a word!

The Plugin version: (see differences highlighted in red)

[iframe: width='750' height='600' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' allowtransparency='true' src='http://chatroll.com/unitedswap-room/embed?fgcolor=4076b3&bgcolor=ffffff&textbgcolor=ffffff&textfgcolor=000000&sound=1&border=1&w=$0']

Success

The Chat Room is now entirely within the post page:

Now you know all I know about IFrames and how to fix them, should something break or disappear! There's a WP plugin for everything! 8-)

Reblog this post [with Zemanta]

0saves
Save
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
4 Reasons For Subscribing
  • Get Full Posts Delivered Directly To Your Inbox.
  • Get Exclusive Freebies For Subscribers.
  • No "Buy This, Buy That" Mails!
  • 100% Privacy. Your EMail Address Will Never Be Shared With Any Third Party.
About Writer [Blogging With Success]About Author SBA is a web designer and co-founder of BloggingWithSuccess.net. She publishes BPWebNews a place for Blogspot tips and tricks. You can also find her on Twitter. Read SBA's other posts. She's also published a couple of guest posts.
Related Posts [Blogging With Success]Related posts

Leave a Comment

CommentLuv Enabled

{ 4 comments… read them below or add one }

Ruchi January 28, 2010 at 9:17 AM

Thanks a lot for sharing this post. I was not aware about Iframes in so details. Waiting for your next article about iframes.

Reply

SBA January 29, 2010 at 5:58 PM

Hi Ruchi, nice to see you again. If I find out any more info, I’d probably update this post or add a comment…

Reply

Matt January 29, 2010 at 11:51 PM

I still prefer to just try to avoid using iFrames wherever possible. Sure you might lose out on some widget functionality, but to me it’s just so risky running iFrames pulling content from some third party. Both from a usability (their site could always go down/widget break) and security perspective.

Reply

SBA January 30, 2010 at 11:03 PM

There are many ‘mainstream’ sites that provide widgets with iframes. They don’t get garbled up if we install the code in a sidebar. Seems the WP post problem is an editor bug whereby the code is lost if you switch from html to visual view. Leave it untouched in html view and it works — but we are only human and tend to go back into the (draft) post to edit text, etc… I’d appreciate any url references you have for general security issues around IFrames. I’ve used the static Google Map for years and it’s an iframe.
Thanks.

Reply

Previous post:

Next post: