How To Create and Use iFrames and Tables on Your Blog
Last week I promised to create a post explaining how to add iFrames and tables to your Blog posts. Instead of making this a long drawn out technical "How To" tutorial, I decided to make it really easy for those of you interested in using this feature. It is HTML based and does require a little HTML skill, but I think the way I'm about to show you will totally simplify the process and keep you from losing your sanity! lol~
The hardest thing you'll have to do is switch the tabs at the top of your New Blog Post from "WYSIWYG" to "HTML" then you'll just need to copy the code onto the HTML page where you want your iFrame to appear, then save it. Can't make it much easier than that. So let's start with the iFrame. The purpose of Adding an iFrame to a Blog post is so that you can share a large amount of information in a very small (customized) space. Maybe a website, or an interactive page, or even an entire Blog for example.
Here's an iframe of a site I'm sure you'll all recognize. :-) (updated to show image only)

The size, color, width, height, URL, etc. can all be customized. Now for all you advanced HTML users and Bloggers, this is probably easy stuff, but for many of our members and friends, learning this type of stuff has been known to cause overdoses of Tylenol and in some extreme cases, even alcohol. So here's a way for you to preserve your anxiety and stress for something a little more worthy.... I hope.
HTML Basics has setup what they call an iFrame generator. You just enter in the information, and it creates the iFrame for you, then just copy and paste the code into the HTML tab of your new Blog post. It looks like this:

Just enter the URL of ANY page you want to appear in your iFrame, never make it wider than 550pixels if you don't want to Blow Out your Blogs sidebar, select any height you want, give it a name, set the alignment, maybe add a border with some color, setup how you want it to scroll, and generate the code for your Blog post. This is much easier than trying to explain the HTML which you're about to see once you generate the code anyway. Once you become familiar with the iframe code, you won't need the generator anymore. Now try it yourself.
Suggestions: Try using your MLS page, your IDX page, your Website, one of your Blog posts, maybe your AR Outside Blog, any page that's on the internet will work as long as you have the URL or website address. You can use iFrames to add some additional value to your Blog if this is something you're interested in. Now just be creative and imagine all the ways your clients, visitors, and subscribers might benefit from your using custom iFrames in your Blog posts.
Are you ready for tables now? Here's a link to a table generator, you'll be a pro in no time at all! :-)
| Some Table Scraps | RE Video | RETechWorld |
| Goal Planner | ActiveBrads Blog | iDomain |
| TechKnowBabble | AR Manual | The REBlogger |
Download The ActiveRain "HELP" Toolbar for your Browser
ActiveRain University Calendar
Real Estate RainCamp
The ActiveRain Manual

I've always wondered how to do this Brad. I will give it a go.
I was just wondering how to do this so thank you so much for explaining - not sure I will get it on the first try but thanks for helping out!
Wow! I've been creating tables in Word and pasting them (with mixed results) in my blog. I'll have to try this soon.
Brad - Some great information, let me give it a try!
VB ;o)
Hi Brad, I asked and you answered. I can't wait to try it. It was nice to meet you and I hope you had a good uneventful trip home.
Oh Lord...throw me a life raft, lol. I feel a headache coming my way. (giggle). I am bookmarking this so I can finally get a grip on some of your great tech stuff!!! You're the BEST :)
That's pretty nifty - I'll have to practice. Thanks Brad, this adds a whole new dimension to a post.
Brad,
Ok...I couldn't resist trying...and letting you know I did one of my webpage...with a link back to this great post....
Thanks Brad
Brad, that's very cool. I would have had no idea how to do that... Now I have to figure out a way to use it.. but very very cool! Thanx
Brad,
I think that I am going to have to put this on hold for awhile. At least until I am comfortable with ScribeFire. Please pass the Excedrin!! ;-)
BTW, Thanks for the mention.
Brad, ovbiously Courtney and I REALLY like this idea:)
<!--Session data-->
Brad - THanks for the information. Pretty slick to put in the information for my city.
Brad, this is awesome! Just what I needed! Thanks you're posts are amazing.
Yes I am with Charlie! I REALLY like this:) I am gogin to try it and have the html generator opened already in a new tab:) Thank you!
Bookmarking, Reblogging, and rereading a few times! Thanks for posting!
Brad that is my local Franklin TN page. I need to take a day off just to catch up with all the new technology you're showing. Thanks as always. I love this.
Brad,
You did make this very user friendly! The proof will be in how we can produce better posts with iframes and tables... sooo on this list to do this week. Thanks for always keeping us on top of our game.
Hi, Brad! That was amazing to see myself on the iframe. lol Here I thought I was special. Bookmarking so as to avoid the side effects of too much information at one time! Thanks as always!
OH YES ! Now THAT is a cool tool ! I think I need to print this tutorial before I attempt to put it in place !
Very exciting my man !!!
Thank you !
Sheldon
PS: Nice little iframe example you chose btw !!! ;o) lol !
Brad - Thanks for the info. Bookmarked it. Will come back tomorrow to figure it out.
Brad,
I took your suggestion, and went for the alcohol. I'm on my second glass of Beaujolais Nouveau right now, and actually, nothing is getting any clearer. I guess I'll have to bookmark it and come back to it.
It all seems very interesting, but it is also in slow motion at the moment. Perhaps it will take a more sober period.
Brad,
Thanks. Every once in a while when I put a Google map in an iFrame it doesn't play well with the HTML editor. You caught my attention with the first iFrame :)
Rich
Brad...
Thanks for the info about these great code generators, but now I have to figure out how to use this to enhance my posts!
I am so excited! This is awesome, awesome news. I am sharing this with my husband immediately.
Brad - Thank you! This is awesome! Craig Rutman showed me a few tricks and this just adds more great stuff. I'm implemeting it on my next post.
OK, this is going to take some serious attention - I'm sure once I sit down and pull all the hair I have left, out...I will see just how simple this is.
BTW, Love seeing my smiling face tod dead center in your frame! How cool was that!!!
John
I'm one of those heading for the tylenol. but thanks for the links. It may take me longer but eventually, I do catch on. And BTW, like the iframe you chose.
Thanks for the tutorial. Looks like some more fun ways to make our posts look good!
Damn! I'm out of tylenol and all my thanksgiving guests drank all the booze! Thanks for posting that, I may have to look at it again in the morning. =o
Hey man I always love your tutorials and this looks like yet another great way to enhance my blog. I have to tell you that I think I have an issue on my settings page, when I scroll down there is not a spot for goodies pr widgets or something like that. Hmmm...I just realized that I should email you! Hope you had a great Thanksgiving!
Brad, this is very cool. Now I just have to figure out how I want to use it. Thanks for the info.
Some folks after their attemps at inserting HTML tables & iframes... lol~
Hi Brad, Thanks. These are going to become very useful and I can think of many ways to use them. After I show property tomorrow I am going to work on them and see how I do. Many Thanks again.
Bookmarked! And woo hoo! I'm famous! lol
Seriously. I love it when I get tutorials to spice up my blogs. Thanks! =D
I'm not even going to ask how you personalized it ... very cool. I'll keep this in mind - I'm sure it's use will come about some day. Now the table - cool stuff too. I never ever thought of website html code generators. Thanks as always.
Bookmarked. I know this will be useful. Thanks for taking the time to explain in an easy to understand format.
Wow, this is pretty amazing stuff. Thanks. I wondered how those iframe pages work. I wonder if I can put it on my outside website. Methinks I can.
Actually, I did put it on my website, but it does a weird thing. It goes to the framed page beautifully, but then it jumps to my actual blog. If I hit the back button it just jumps back to my blog. But it is neat. Look at it in practice on an AR blog
http://activerain.com/blogsview/1359028/woohoo-brad-andersohn-s-iframe-in-practice-it-works
Okay. I really don't understand all of this though I am fascinated since it showed me my own home page. Thus, I'm sure I can find some very interesting uses regardless of whether or not I understand it.
Now that is very cool. I'm going to use it on my next blog post.
Brad, Thanks for keeping it coming. I've been wanting a more custom look in our posts.
BRAD- I love this idea! And the fact you were able to personalize it for each reader! WOW. It will take some experimentation -definately need to bookmark this for future reference.
Awesome! Can't wait to give it it shot, it will add so much to my blog. Thanks Brad!
Brad this is very useful, I am going to give it a try or maybe a few tries.....thank you.
That is too cool Brad! I laughed when I saw myself, lol. Thank you for this. I love new toys! :)
Very cool Brad. I have used iFrames in my blog before but never one that was customed made. Great info as usual!!
Great info, Brad. I agree with everyone above. :)
Howdy and Morning Brad
Thank you kindly, both would be real useful when writing a large blog post series. Like the series that I'm writing at this time. I'm going to play around with both of these.
Very cool coding so that the reader's blog shows up in the iframe. You really know how to get our attention. Thanks for the tips and html generators.
I am convinced that if it were simple everyone would be doing it..thus we shall see how many successfully pull this enhancement off. Bookmarked for the challenge. Thanks.
Thank you Brad. Again, more valuable information and great timing. Not sure how you figure all this out, but I am very grateful that you share it with all of us on AR. Looking forward to your next blog. This one is bookmarked. I need to make a folder in my bookmarks for all the technie stuff now...... Great info, Thank you again and have a great Sunday.
Brad:
Thank you for the information, I am on my way to exploring this new technique. I am glad you made it so understandable.
Thanks! Very cool. Now I understand why you get paid the BIG bucks and I do not. I also loved that picture you posted with the guy's head down. That would have fit right in with Allan May's post on top ten excuses for sleeping at your desk. Can't wait to use the iframe in a post.
I am not ready for the tables. First I need to master the iFrames. Thanks
Great info as always Brad, I certainly think that I recognize the first IFrame in your post.
One foot in front of the other...a bit too technical for me at this very moment. I'm determined to become much better at this in 2010. I'll be at RainCamp too. Hope that helps.
Thanks for the (as always) helpful informaton. Got a kick out of seeing myself in the blog post - good way to grab someone's attention for sure.
Brad - That's so cool how you made each persons page come up in the tutorial..... Unless I'm wrong our Hammersteam and My page are on top.... how cool... Bookmarked and will be back later to delve into this some more... Cool..
You are reading my mind. I think how do I do this? Then I find your post and voila!.
Thanks Brad, this is the first featured post with me in it I didn't write! I just used Snagit to save this one. I have some work to do.
Brad, I just noticed that the iFrame is also dynamic. I was commenting this morning and this one, and when I came back to this post I noticed that my points had changed.
Quick tip for all:
It looks like the second iframe I used in this post for the iframe generator has popup ads, that are automatically opening a new window when I load this post. Be careful not to use sites for your iframes that might have unwanted popups. :-)
I Just found that you can use this same generator to add iFrames to your Google Waves. I have 5 invites to Google Wave that I'll be giving away at RainCampSF next week. Time to start packing and preparing for next Wednesday. WooHoo!!! :-)
Brad - I was wondering about that popup that came up...
Hi Brad...another Great How to Post...for me and others to study and learm, certainly I'm bookmarking it.
Have Fun ar RainCampSF...Wish I was going, Seattle Rain Camp was a blast...AR Rocks !
How about a post on Google Wave....:O))
PS: Thanks for the Photo Mention as an example :O))
Hi, Brad. What a great joke...everyone, including me, thought they'd somehow been singled out when their picture appeared. You're amazing!
Brad: Good one... and thanks for turning us on to quackit.com... (great site!) I've used a collection of other tools (like NVU) for tables and iframes etc., but quackit is much easier and now they're all in one place. Enjoy SF... Wish I could be there. And, thanks for your help over the weekend, much appreciated.
Brad, thanks so much for the education! I'm feeling a bit overwhelmed by the technical steps, but will trudge through it. thanks for making this as simple as possible! I'm always learning something new from you!
Goodness...you mean I have more to learn? lol.
Brad, I've been wanting to know how to do tables for a while. The iFrame looks cool too. Gives me something to do while my husband watches football this afternoon. :)
Ok, I had to replace the second iframe because of the popup that was causing more tylenol and alcohol abuse!! lol~ I replaced it with the RainCamp event coming up next week so you could all see who's coming and even RSVP if you're in the area. :-)
Thanks Brad - I will definitely be able to use this in the future.
OK...I am going to go about this s l o w l y...and try and avoid looking like the guy in the middle of your previous comment!
This is very cool stuff. Will you be going over it at rain camp this week. I am jazzed about buzzing over for the day of camp!
This is amazing! Showing US in the I-Frame will motivate some of us to try it. I have it bookmarked. Appreciate what you are trying to educate us in! Thanks!
That table generator gizmo is awesome, Brad! thank you.
Thanks so much for the great information. I have a lot of charts that this will work well for.
How does this work from an SEO standpoint? Do the bots see the content in the iframe or just the url of the link you are framing? Thanks again.
Thanks for the info. I tried it also, but as #37 stated it pops to the website not kept in the frame. The 1st one I did was fine but 2nd, 3rd no.
1st try
http://evaaliaga.blogspot.com/2009/11/join-us-on-facebook.html
2nd attempt
http://evaaliaga.blogspot.com/2009/11/activerain-profile.html
3rd
http://evaaliaga.blogspot.com/2009/11/follow-me-on-twitter.html
But I'll try it out again later. Thanks
Brad this is amazing
I have a total gut on my website going on "issue was how to create a table" BAM here you are on AR authoring what we need. THANK YOU ! ! !
Hi Brad,
Awesome post, thank you! Thanks for featuring my face in the frame. It was a nice surprise to see it.
Heather, great question. The iframe content is not picked up by the search engines so be sure to surround iframe and fill your post with the content needed to not only get your point across, but to serve the SEO purpose as well.
Eva - this post and tutorial is intended for AR Blogs, however, it should work fine on Blogger and Wordpress too. iFrames are pretty much compatible on most blogging platforms and HTML based websites.
Lynn911 - let me know how it works on your outside website, I'd love to see what you create and how you use it. Thanks. :-)
Nice tip. It does seem like the old standby <iframe> is making a comeback as embedding content becomes more and more popular.
Thanks for the information Brad. I got all excited when I thought you had featured your's truly:o)) This is great. I can see many uses for it. Bookmarked!
Brad, I will have to give this one a go. I like the idea that you can share information without the reader leaving the page if I follow this right. Thanks for the spotlight.
I'll check this out Brad, I hope it's easy.....
Thank you for posting it today for us.
Patricia/Seacoast NH
Gosh I wanted to do this the other day and kept having to go to a web site editor, this is so much simpler, thanks.
Brad, thanks for the this idea. I will be sure to try it. Oh, by the way, thanks for having my picture in the iframe you used for an example.
THANK YOU THANK YOU THANK YOU NOW I WILL FIGURE OUT HOW TO BOOKMARK THIS...LIL NEW TECHIE HERE.
OMG! You're just FULL of cool tools, Brad! I have tried to figure this one out for myself before and can't BELIEVE how simple it is! Thanks SO much for this! I can't wait to give it a whirl.
Have a great week...
This is a great post. I am definitely book marking this post as I am sure I will need to re-read it a few times! Thanks for sharing!
This is a great post. I am definitely book marking this post as I am sure I will need to re-read it a few times! Thanks for sharing!
I'm going to need the alcohol before I try this
Thanks Brad. I did learn basic HTML and a bit more. Hope to use the frames soon. Bookmarked.
Bookmarked for when I have time to actually try this so I will understand...
Brad - How did you do this so each one of us comes up on the iFrame with our photo (or is it just a weird coincidence that my photo is the example)? I get the rest of it as I've created iFrames in the sidebar for widgets like Postlets. Thanks for the iFrame tool. That will make it easier.
Brad - once again you have tempted us with yet another set of features to enhance our blgpos. I have never used ifrrames but it looks easy enough (he say, somewhat confidently). For tables I have just created them in Word but this may be better. I'll be experimenting.
Jeff
Brad - How could I have missed this thanks for the link love from Barrie and I.
whoops it only shows us when I am logged in is it supposed to do that???
Hi Brad, Thanks for the tutorial, and thanks for choosing a page with my picture on it! I've got it bookmarked so that my wife can go in and see how to do this, we've been wondering how for a while.
Learning is life long. Thanks Teach! Got to book mark this and come back when I have more time.
Great, it's all your fault! You just created a monster in Vegas.
Brad, Just getting back from holiday travel - have meetings today - can't wait to play with this. I'm excited about the possiblities!
Hey Brad what a gorgeous I frame you used in your example - LOL Hope you had a great turkey day!
Brad, as always some great information. I have bookmarked and will play with this and hopefully will get knowledgeable with iframes. Thanks
Kathy - Thanks, that answers my question. It shows my blog when I look at Brad's post, too. Wondering how he did that.
Ok, I confess, I tried to get a little sneaky here: By selecting the ActiveRain main homepage for my iframe meant that if you were logged into AR when you saw this post, and you are the top featured agent in your area, then you'd see your photo in the center of the iFrame. Looks like it worked out pretty good! (Big Smile) :-)))
Renee - ...not a monster, how about just "Taming The Beast!" lol~
Brad - I played with the width (used 850) and the height (used 450) and was able to put my community blog in a iframe without cutting any of it off on my AR blog. Very cool! Thank you.
I will work on both the Iframe and tables today and use them somewhere! Thanks for the tutorial.
That is awesome, Brad! Thanks.
I can' wait to try this one!
Mike
Warning / Danger / Disclosure / Be Careful / Watch Out!
Gail - 850wide may look ok on your AR Blog, but trust me, go look at your Localism page or your outside blog, then you'll understand why I say 550width should be the MAX on any item you place into your AR Blog post. Just a heads up warning for those considering trying to do full page iFrame. If you don't use Localism or have an AR outside Blog, then using 850 wide should be fine. Just sayin... :-)
Looks great. Thanks for the tips (s)
Brad... just resurfacing after being on the road for a while and recovering from Thanksgiving :) Thanks for this kind of info and all the other emails and links I've kept from you and AR for when I have a chance to catch up on things. I can see I really don't want to miss too much. Have a great time in SF.
Hey Brad - NICE job! I can always find something interesting when I stop by for a visit! ;-) I note how tricky you are....cute. ;-)
I recognize that screen. :)
Wow, this is great. I am going to put this to some very good uses!! Thanks for posting.
Very clever how you were able to feature each one of us!
Blog-N-Roll Brad...
I take a much needed time out and look at what you've been up to. Is this like when the Cats away the Big Dogs play? :)
By the way, I don't think you could have made that any easier. You're just in time for what I've been doing. This tops any of the work arounds that have me slamming my head against a wall. Although that burns 200 calories an hour it still hurts like hell :)
TLW...ROAR!
TLW - I was getting really worried about you. No comments or harrassment for a couple days, man, I was getting ready to call you and make sure everything was alright. <<<Big Sigh>>> now that I know you're ok!! :-)))
Okay...
I was just checking to make sure The Code Monkeys didn't take away my HTML code feature.
By the way, what you said up there is sweet. I knew there was a reason I like you :)
Now I have to figure out to put an iFrame in a comment. You had to see that one coming :)
TLW...ROAR!
WOW-WOW! Brad this is great information as always....have you realized yet that you have just made 167,233 AR members i-framing like crazy. lol~ I think I better bookmark it and practice a little before starting out, I need to get the Tylenol first.
You have inspired me! Plus I miss Vacaville and it was nice to see you are from Fairfield!
I always appreciate your informative and encouraging advice!
TLW - couldn't do an iFrame in the comment so you resorted to a video! Loved it!!
Dona - did I really do that? uh oh! lol~
Tricia - inspiration is motivation, I do what I can to help provide both... Let me know if you are ever coming back to Solano for a visit. We could chat over coffee. Peet's of course.
Jim - thank my friend, I'm glad you got to come to RainCamp. We had more in SF than we did at the sold out Seattle RainCamp.
That's sweet, thank Li. :-)
Blog-N-Roll...
I never did figure it out. How come IFrames do not function in a comment? I don't get that. And thanks to you it's driving me bonkers. Not that I had far to go mind you :)
P.S. Forgot to tell you that a couple of my Rain Pals found out about my smart phone. They tried to blow it up. It just proves that you do get back what you put out there :)
TLW...ROAR!
Brad, again -- this is great information. It made me smile to see my face on your demo. But of course, I soon figure out so did everyone else!! I am going to reblog this so that it gets around to more viewers. Thanks, you are the best.
Brad I wish that I could follow you around for a day and absorb all your knowledge.
I was shocked :-) to find my photo and of course ranking on your blog.
Thanks again for the wonder tips
Hi Brad,
I haven't played with frames in some time. Really had not considered it for my blog BUT maybe I should. you did an excellent job on the tutorial blog!
Virginia - if you followed me around for a day, about the only thing you'd absorb would be the tylenol you'd need after spending a day with me!! lol~ Seriously, would love to spend any day with you and share whatever I could that might help. Just name the time and place. Better yet, come to a RainCamp, and we'll do just that! :-))
Judi - I know you can come up with at least 10 great uses for an iframe embedded into your Blog or post. I know you better!! :-)
Brad,
Thanks for the great advice....when I read the title of the post and then saw myself and my husband's photos in the post, I thought we were being "framed" or "tabled" - either of which didn't sound promising. But as always, you delivered a timely message. Thanks for the info.
Brad,
Very nice! I am going to re-blog this to share with people I introduce to AR and blogging.
I have this question. I reblog so that I can store in my own Blog history to find in the future is there a better way? besides bookmark
Paul - thanks for reblogging this post. One way you can save these types of posts to find in the future is to just drag the URL from the address bar up top into a folder on your desktop. I have 3 folders on my desktop loaded with great posts I want to keep and refer to later. :-)
I totally messed up my blog. I tried following the directions, but I messed up along the way. When some one goes to my blog they're now redirected to Twitter!!??
Can you help?
Laura - I have never seen this one happen before, can you tell me which post you created that started causing this? I will try to edit that post for you and correct the issue. If I can't correct it, I'll forward to tech support to see if they can correct it. Send me an email with details at Brad at ActiveRain dot com. Thanks.
Brad, You were so right. Look what happened to my Localism blog when I changed the width to 850. I'm changing it back now.
Oh my -- I just saw I am at the very tip top of this tutorial.. Thanks Brad... I wanted to learn how to do this. Missed this post the first time around, but saw it on a reblog...
Gail - looks like you learned another trick today... however, by adding your 850 wide image to a comment here, you blew out my Blog too. lol~ Sorry, I had to remove your screen shot as it was pushing my sidebar off the computer screen. Suggestion: Never add an image wider than 500 to any comment on someones Blog post either, it does the same thing to a post as it does to Localism or Outside Blogs. :-)
Brad so far on the total gut on a new website I am LOVING THE TABLES it is soooo easy wow amazing with professional touch when the site is complete I will direct link allow another 7 days still in "mock up mode"
Brad - Whoops! I'm so sorry. You must cring when I post on your blog. Your job is safe with Internet dummies like me on AR! LOL Thanks for removing the oversized image for me. You have such a generous and sweet nature. Thank you for taking the time to e-mail me. You are a doll!
Lynn - can't wait to see what you've created!! :-)
Gail - It's really not about job security, it's about the "passion" I have for this place, members like you, and this community. There really is no place like it on earth! <<<BIG SMILE>>>
Brad I posted a question on my blog site can you answer the question ? Direct link click here for full question
Question regards keywords within HTML table are can they be optimized via search engines ? I am assuming YES
Thanks Brad! I took a 9 week HTML class at our community college years ago. This is perfect as I can get the main idea and just have to figure out where to insert it. I'm always suprised when parts of that class come back to me.
Hello Brad, thanks for the tip on the code-generator -- I always like to tinker with those! Currently some of the dynamic links I've been framing in are hideously long -- so long that that even my FrontPage pop-up link editor clips them. Thus, if your readers try to frame in a page with extremely long link-code it is always a good idea to Test the Result before calling ot good! John
Brilliant!
Simple and easy to figure out.
The maximum pixel width for your ActiveRain blogs for those who are going nuts trying to figure this out is 575.
I tried it out on IE and Firefox.
That looks like magic.
I didn't realize we could do this. Not I just need to take time to implement it.
Thank you for sharing.
When I created my profile page many moons ago, for my pictures I used a basic table attribute thru html. As seen here Tables .
Hey! That's me! Came late to the party to check out this post - and what a surprise! LOL I am going to have to give this a try - you've made it seem very easy! ;) Thanks, Brad!
Debi
Hey Everyone - I have had to disable the comments on this post due to the incredible responses received. To continue reading other comments and adding additional comments, ideas, and thoughts, please click below to be redirected to the "Comment Extension" for this post.
Thank you.
ActiveBrad :-)
COMMENT CONTINUATION HERE