Blogger: Iframe Breaks Post Editor

As the previous post described, although advantageous for everyone, it can be rather frustrating to add embedded code or iframes to an individual post. I know javascript, html, and understand software development/testing and it still took me a day to figure out what was really going on when my code didn't work. Then I think of my poor friends who have a hard time typing, editing a simple blog, let alone trying to add some cool HTML code to it.. yikes. Isn't that what blogging is all about.. ease of use with the flexibility to expand?

Blogger's own mantra is Push-Button Publishing . I'm trying to help you get there Blogger, but you've got to help me.. before I can help you!!

Update: the Iframe bug magically fixed itself months after I found the problem. No status update, no acknowledgment of the problem, nothing!! This impacted me DIRECTLY because it involved a workaround that the average non-HTML savy user wouldn't be comfortable with.. for a product I was developing to make a Blogger's life easier not harder!!

I haven't been able to get any Google help except.. oh well

Help my editor is broken!!

Using the HTML Editor, I finally got my blurbbit to work and I decided I better test it with the compose/wysiwyg editor mode that the rest of the world uses. Imagine my surprise (and horror) when a blank screen appeared. Subsequent clicks on both Edit Html and Preview caused nothing to happen. I even tried typing new lines. Blogger took them, said it saved them (without complaint) and yet they disappeared into thin air.. gone.. poof. What is really scary is that not a single noticeable error message appeared, it just seemed strange that I couldn't access the other features of the editor.

So here I am stuck!! I can't add new text OR code, and I can't edit the old stuff. Yikes!! Well luckily I use Firefox and it gives me helpful error messages (unlike IE).

If you see either

Error: uncaught exception: Permission denied to get property HTMLDocument.createElement or
Error: uncaught exception: Permission denied to set property HTMLDocument.designMode.

in the FF error console, you have a broken editor.. stop immediately before you make any edits. If you have made edits cut/paste them into a buffer/text document until you fix the editor and then re-paste them.

Well that sucks.. now what?

Make sure you edit posts containing iframes with Edit Html mode enabled to begin with. Luckily there is this workaround, but what amazes me is no one talks or complains about it. From the one post I found in the user group, they just remove the iframe code and keep going, forever giving up the benefits of adding code.

For some strange reason Blogger "remembers" that the editor was either in the Edit Html or Compose mode based on the LAST post you PUBLISHED (not edited and saved). The easiest solution is to open an existing post which doesn't have an iframe (or create a new post), select the Edit Html tab and publish it. THEN go re-edit the post which has the iframe. It will appear correctly and you can freely toggle between Compose and Edit Html modes depending on your comfort level. Just remember to toggle to Edit Html mode before you publish, (or you'll have to go through the workaround again next time).

More Editing Oddities

There is a global option under Settings - Basic - Show Compose Mode ... The problem is that you have to be in Edit Html mode before you disable this option. If you disable this after publishing a post in Compose Mode you'll be stuck in Compose Mode.. huh?? Go figure!! Of course this makes it even harder to get back to Edit Html mode, so that you can use the above work around to finally edit your blogs with Iframes.

Blogger in Draft

Note: I usually stay away from the latest and greatest, because as a developer I have to design my code to work for the lowest common denominator (usually an older version or any version running in IE). I was VERY interested to see if either of these issues were addressed in Blogger in Draft.

The good news is it seems that extra line breaks (especially those caused by textbox \\n characters) ARE handled better. However an Iframe still breaks the Compose/WYSIWYG editor, but the above workaround still works.

Now my question is.. how many people have thrown away perfectly good embedded code/iframe solutions because of these editor problems? When will iframes/gadgets/widets be easy to add to individual blog posts, where the complex or single view features really belong?

Blogger Posts with Iframes or HTML Code

Iframes seem to be the standard method for sharing complicated/configurable pieces of software around the web. If you want to embed a google map for example, you can learn javascript, get an API key and write your own javascript code or you can use one of the many embedded map options (Usually with an option similar to "Paste HTML to embed in website"). Similar options are available for videos, photos and gadgets/widgets from thousands of sources.

Sidebar Gadget Overload

Iframes added to Blogger seem to work fine when you add them to your blog template (ie, sidebars etc via the Layout tab, Page Elements - Add a Gadget - Basics - HTML/Javascript option). Now this is fine for certain embedded objects, like tracking widgets, other feeds etc, but can become a large performance issue for things like slideshows and google maps. And worse yet, it gets loaded into every blog entry, on every page, every time it is opened. Users who have already enjoyed your slideshow/map will continue to pay the performance hit EVERY time they visit ANY blog on your site.

My solution, for complex, slow loading, or one time use features is to add them to a separate blog post. You can add a splashy link to the sidebar to make sure people know about them, but once they have seen it, they are done. The slow loading code gets loaded once, and only after they have selected to view a specific feature.

There are a few things you need to know about before you make the switch. The first thing you lose by moving to a post based feature/gadget is the layout gadget selector. Just imagine adding everything through the HTML/Javascript gadget. You also need to be aware that code you added with this method, may not work the same in a post.. huh??

So why is adding an Iframe to a blog post any different?

The post editor.. plain and simple!! There are two main features that cause havoc with Iframes; Edit Html and Compose/WYSIWYG edit modes, and the Convert line breaks feature (set under the Settings Tab- Formatting - Convert line breaks option).

Now if you are going to add an iframe to your post you are going to have to use the "Edit Html" editor tab to add the HTML code that you obtained. Do not panic, take a deep breathe and just try it. Most likely if you don't have a lot of text formatting or pictures you won't even notice the difference. Now if you have the Convert Line Breaks feature enabled (which it is by default) you have to be very careful with extra line breaks in the copied html (from the original source). Blogger converts the text line breaks (and html <br>) into HTML line breaks even if they occur in the middle of other html code.. This is VERY BAD and most likely will cause the embedded code to break or work incorrectly. What is even worse is it is impossible to "See" what Blogger is doing because the line breaks are hidden inside the editor, AND its gets combined with the automatic line wrap "feature" of the editor. If you retrieved the code from a single line text box on a web page you will mostly be ok but if you copied the code out of a neatly formated blog or multi line formated text box you might be in for some issues. The best bet is to try it and see if it works correctly AND completely.

The problem is that the addition of line breaks can break perfectly valid HTML. If the break is inserted in the wrong place, it can cause any HTML code to break (easily identified in red within the FF view page source mode). In other places it just "skips or removes" portions of the code like formating and positioning. I can tell you it drove me crazy.

Removing extra line breaks:

If you are having problems, an easy way might be to look at the page source on the broken blogger page. (View-Page Source in FF and Page-View Source in IE). If this looks like scary unrecognizable garbage, try adding a unique keyword like "BROKEN" in front of the code you are trying to debug and then find it in the page source (using the browser windows search function). You are looking for extra <br> lines that do not appear in the original code. If this is not easy for you, try finding/deleting the extra lines breaks at the end of each line (in HTML edit mode).

• Move to the end of each line via the end key on the keyboard.
• While watching the first character on the next line, hit the delete key. If the first character disappears, or the next line suddenly appears on the existing line (ie. removes a space), you have just removed an essential character. Undo the change (hit Ctrl-Z or right mouse undo or re-type the character). If the cursor appear at the start of the next line, you have just removed an offending extra break.
  
• try this on each line of the html code (a rather large pain eh?)

Stick with it or try and find the code on another working Blogger page.

Blurbs for Blogger

I am in the process of developing various BlurbBits designed to share various content around the web. In the process I am documenting any issues/problems I am finding with Blogger that may effect users.

Hopefully it will be helpful for someone.