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?)
No comments:
Post a Comment