Sunday, November 11, 2007

Make An IFrame To Contain Another Blog On Your Blog Page

One obvious way to merge two websites (either or both being a blog), is to use the same template on each, and link between the two in a consistent fashion.

The reader of either blog never has to know when he's viewing the other, unless he habitually observes the content of the browser Address window.

But how about if you would like to display one blog, in its entirety, in the middle of the other blog page? That's a feature called an IFrame. It's an astonishingly simple solution too.
<iframe width="100%" frameborder="0" src="http://blogging.nitecruzr.net/2007/11/make-iframe-to-contain-another-blog-on.html" height="400"></iframe>


You can put an IFrame in either a blog post, or in a special page element.

It's a dynamic window; when you change something in the blog contained in the window, the contents of the window changes too. Just refresh, and you can see the change.

An IFrame is a nice substitute for a newsfeed, when you are including a private blog in another web site. Since a newsfeed isn't available for a private blog, it's useless in this case. An IFrame works as well for a private blog as it does for a public blog. Of course, an IFrame will be useful only with viewers who have access to both the source, and target, web site.

One caveat here, which may be an asset or a liability, is that the content of an IFrame won't be picked up by the search engines. If the text inside the iframe is important content that needs to be indexed with the host blog, you won't want to put it inside an iframe. On the other hand, if you have text that you explicitly do not want indexed, an iframe can be a perfect solution.

It's got a number of settings that can make it more useful to you. You can set the height and width of the IFrame, to determine how much screen space, inside your blog, that you wish to use to display the IFrame contents. If the IFrame contents are larger than the allocated space, by default you'll get scroll bars; these can, at your own risk, be deactivated.

Remember that, as the text size is varied by the reader, the overall size of the contents inside the IFrame will vary, just as the contents of the blog outside the IFrame. Instead of specifying an absolute height or width in pixels, you can specify either in %, and have the IFrame size decrease or increase as the reader necessitates.

Depending upon what effect you desire, you'll want either the IFrame host web site, or the source web site, to be as plain as possible. If you have a normal blog with a page header, post column, and one or two sidebars, you will want the IFrame source web site to have a very plain template.

If you're creating a second blog to contain posts that will be accessible only to a select few of your readers, you'll want to display an IFrame that only contains a posts column - any page header, sidebar, and / or footer section will just take up valuable screen space on the host web site, or force excessive horizontal or vertical scrolling inside the iframe window.

>> Top

41 comments:

Gordon said...

It's still a scrolling window within your own html page which also has a browser scroll too right?

Chuck said...

Gordon,

If the source of the IFrame is too wide or tall to fit in the space that you make for it, and if you enabled scrolling, you'll get a scrolled window, in the middle of your blog page, yes. Both settings are detailed in the W3Schools linked web site.

TheHipHopIcon said...

I have spent TWO DAYS looking for that simple little iframe code! THANK YOU SO MUCH!

Nick Mulder said...

Chuck youre the bomb!

JTrig said...

Thanks for the code. I've been trying to figure that out for the past couple days.

Josh said...

Thank you so much for the clear and concise instructions for embedding a blog into an existing website. One question though--is there any way to hide the Blogger navbar so it doesn't show up? I see that I can edit the colors, but can I make it disappear so that the blog looks like it is part of my webpage, and not fed in?

Chuck said...

Josh,

I hid the Navbar, on my blogs, by picking the right colour. You can forceably hide it, if you really feel the need.

Peter said...

Hi! I read your article with great interest as I know very little about IFrame coding.

As I use table HTML from time to time in my blogger blog to display images and text, would it be better to use IFrame code instead? If so, what are the benefits?

Thanking you for your time.

Regards
Peter

Chuck said...

Peter,

IFrames and Tables are two totally different things.

A table is a multi cell object thats used to display contents of this blog, in a grid. You control the contents of a table, and you display multiple objects, horizontally or vertically aligned with each other.

An IFrame is a single celled object, that's used to display contents of another web site. The other web site controls the contents of an IFrame, and displays that entire web site.

Alex said...

This is really sweet. Thanks for all your help on this. Is there a way to get rid of the blogger navbar in the IFrames? Maybe a hide so many pixels of the content on top? Also... the same for the bottom... in the widgets they have un-needed whitespace and I'd like to get rid of it... If I specify the height to be smaller it puts a scrollbar in there and I don't like those... so right now I have the whitespace. Any ideas?

Alex said...

Oh duh on my part about the navbar!... maybe if I just read a little but still what about the extra white space on the bottom?

Chuck said...

Hi Alex,

A blog that produces a clean IFrame will have as little as possible, besides the objects being targeted, in the template code. Visible objects like blog headers, sidebars (if you're displaying posts), post columns (if you're displaying sidebar objects), and footers just take up valuable screen space, or require excessive horizontal or vertical scrolling.

Alex said...

Chuck, you are the bomb diggity! You totally rock the blogger world! Just see what you helped me do: Random Questions site! It's pretty sweet stuff and I'm excited!

Chuck said...

Hi Alex,

That's a great example of the potential of the IFrame! Congrats, and thanks for the update!

Kurt said...

When I put your code in my page, it works. When I edit the name of my blog, I get a message "Could not open page". Is there a security setting I need to look at? i tried different themes - the answer is always the same.
thanks for putting this out there.

Mary said...

Chuck,

I've used your iframe code on a webiste and when an image on the blog is clicked on, the back button just closes the website.

(thanks, by the way for all your useful info which is greatly appreciated)

Martina Sujova said...

Awesome,dude!I was trying to insert my blog to my website almost 3weeks!And I was so desperate to do it that I nearly purchased a £99 product which was promising to do it. I can not believe that I needed just one small code!Thank you so much.

Ryan said...

I'm in the same boat as Kurt, I used the code which worked great!! but when and I changed the blog address to my blog address it keeps giving me the below error message.

Page Not Found

Sorry, the page you were looking http://xxxx for does not exist.. but you can click on the page that doesn't exist and opens up my blog...

Not sure how to fix it?? Any help would be appreciated.

Thanks

Naveen said...

Thanks. I needed this iframe code for my blogger.

Loan Burger said...

I am still seeking a way to auto size the height of the iframe based on the height of the page being displayed inside the iframe.

On my website: http://www.loanburger.com/ I have my Blog showing on the Home page inside the iframe. I have to limit the nr of posts displayed to one or two to make sure the iframe's scroll bars do not appear. There must be a way to get around this and have the iframe increase its size

Aaron V said...

To Loan Burger. Try this. You can then adjust the height and width as you see fit.

http://YOUR_BLOG_NAME_HERE.blogspot.com"
allowtransparency="true" style="border: none; width: 800px; height: 800px;"></, but it will not let me post this with it in the code

Sagar said...

How do I Add TEXT in a Iframe ?
Anyone having any !dea ?
http://www.speedyvehicles.in

Chuck said...

Sagar,

You have to add the text to the website that the frame sources. An iframe is purely another website, sourced there. If you want text above, beside, or below the display, add it to your blog, in the right position.

Stephanie A. Curd-Goulette said...

Thanks! After I removed the html piece it works great....even with the scroll bars!

RG said...

Hi! Thanks for the iframe code, but I need a little more advice. The iframe works fine but when I try to post a comment, it replaces my page with the login page. Is there anyway I can make it do this in the iframe and not close my page?

Chuck said...

RG,

Any activities within an iframe that require authentication, like commenting - or Following, have to be logged in separately, within the iframe.

RG said...

Thanks Chuck! I think the reason it was acting funny was that I was working a test page on my 'puter, and hadn't published it on the web yet. Thanks for the advice! :D

Jennie said...

Hi,
I have an iframe on my website that pulls information from my blog page and displays it in the iframe, all that works fine. The problem is I have anchors on my home that should link with id tags on the blog, so when you hit those links is should take you specific information in the iframe, which which is my blog page. I set the id up on the blog page. It doesn't work. Is there a way to do this?

Chuck said...

Jennie,

Anchor tags are a known problem with IFrames. I'm not confident that there is a solution for you - if there is, you'll find it faster by asking in BHF: Something Is Broken.

J.P. Kallio said...

ok, i tried to find this info but my terminology probably fails me on the search so maybe you can help me? I put my blog on my website with iframe, but I am wondering is there anyway to get the blog to resize to fit the iframe? I don't mind having the horizontal scroll bar, but would love to have the width of the blog appear the same as the iframe (810pix)
here's the page at the moment:
http://www.jpkallio.com/blog.html
Is this possible to do?

David and Won Jung said...

your the man Chuck, I did some complicated and stupid things just to be able to do what the amazing Iframe can accomplish in three lines of code

Dr. Kathy Nickerson said...

Great post, thanks, it worked perfectly!

Raquel Byrnes said...

I have a book coming out later this year and wanted to have a special code on my bookmarks that will unlock an unpublished chapter.

How would I go about setting that up?

Is it even possible?

Edge of Your Seat Romance

Y@shendra Shukla said...

thx a lot buddy!!!

B.C. Rice said...

Works great! Yay! THank you!

Daniel H. Herman said...

Thanks a lot, I like it!

Blaine Light said...

Awesome, Awesome, Awesome!!! Thanks, that works perfectly in my site! If anyone wants to see what that simple (yet very effective) iFrame html does, just check out my site--

http://www.blainelight.com/blog.html

GeeSince83 said...

Hi there, is there any to have just the post visible in the iframe?

Chuck Croll said...

Gee,

By specifying the proper frame target, you can have the specific post URL show up. You cannot, unfortunately, get just the content of the post - omitting the blog title, sidebar, footer, etc.

Alex Bland said...

Absolutely brilliant thanks.
Can't believe this is so simple.

ferdi gunadi said...

thankyou very much dude, you're making my live easier