Note: Embedding a webpage in an iFrame in your own blog of website is equivalent to copying that webpage into your own website or blog so it is good to ask permission of that webpage you want to embed. In the example below, I uses my own Amazon's Blogger's AStore Bookshop so there no copyright issue as it is my own webpage.
What you can do is to first obtain the URL of that webpage and put it in an iFrame as follows:
<iframe src ="URL of the website you want to embed" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
The variables you can change are highlighted in red. It is best to leave width as 100% as then your iFrame will adjust to the available space (width) at the place you want to put your iFrame. You can also specify in exact pixels, example 360px instead but you will then have to ensure the the width you specified suits the width available. The height too you can edit to what you want.
The part highlighted in green:
<p>Your browser does not support iframes.</p>
you can leave out if you want, leaving
<iframe src ="URL of the website you want to embed" width="100%" height="300"> </iframe>
and it will still work, but it is best to have it there because if a visitor to your webpage uses a browser that does not support iFrame, then they will see the message
Your browser does not support iframes.
rather than being mystified by a blank space.
Some important notes: The content of an iFrame will not be spidered by search engines which may be a negative point if that is what you want, but to me it is a plus point because it will prevent duplicate content which is not liked by search engines and which may draw a penalty.
As an example, I will embed my Blogger's Bookstore below to serve as an illustration and perhaps you may see some books that may interest you:
How do I Add TEXT in a Iframe ?
ReplyDeletePlease Give me the code for it.
I suppose you can just put the text at the source (src) URL in the iFrame
ReplyDeleteI just added a page to my blog with a link to my store, but would love to add this! So all you do is add the small bit of code you listed into a bloggers post?
ReplyDeleteYes that is all you need to do. Iframe's are deceptively easy to do.
ReplyDeleteI did it! It worked perfect. Thank you so much!
ReplyDeleteDo you recommend besides your blog, any other resources for a new blogger? I see the books you sell...which ones would you recommend starting with? And what about links to submit your site to? Its all so confusing
ReplyDeleteI have skimmed through Google Blogger for Dummies, looks like a pretty basic book which may be suitable for beginners.
ReplyDeleteI had wanted to publish an online book for beginner, you probably can find some posts for beginners too (use the search box), but it is a work in progress.
Other than that, any problems just ask.
Hey I like this idea but lets say I don't want to iframe the whole page just the post. Like say I have a embeded video in this post or text that I want to make a iframe without having the full page iframed with it. Is there a way to do this?
ReplyDeletePeter@environman say NO to your question....but the true is YES there is a way...some live videos have site protection can not be embed...so many live soccer broadcasters just take the live video of a website and frame it in their blogs making it look like is theirs without showing the full page..they rezise the page withing a frame...is done all over soccer broadcast pages
DeleteNo
ReplyDeleteI've been trying to use the iframe code from Facebook for adding a "like box" to my blog, but it simply isn't working.
ReplyDeleteI'm pretty blogger-savvy (at least when it comes to my own blog) and have added widgets and such with no problems.
Maybe the Facebook code isn't compatible with blogger? I'm so frustrated over it that I went to google to look for answers, and that's how I found this post.
Any ideas?
Is it this one - Facebook LIKE widget for Blogger?
ReplyDeleteThat's similar, but the box (as opposed to the button) provides a feed to the page's activity.
ReplyDeletehttp://developers.facebook.com/docs/reference/plugins/like-box
I will need to test again
ReplyDeleteI am trying to imbed something on my blog, but when I go to my layout, select "add gadget," then select "add your own" and put in the imbed frame, it tells me that my url illegal characters. Any idea what it is talking about?
ReplyDeleteTried using the following
ReplyDelete..
src="http://www.mimio.com" name=frame1 scrolling="auto" width = "970" align="center" frameborder="no" height="720">
....
but the page fails to display properly in IE7/8. Its timing out but works fine in other browsers
Tried using the following
ReplyDelete..
src="http://www.mimio.com" name=frame1 scrolling="auto" width = "970" align="center" frameborder="no" height="720">
Tried using the following
ReplyDelete..
src="http://www.mimio.com" name=frame1 scrolling="auto" width = "970" align="center" frameborder="no" height="720">
....
but the page fails to display properly in IE7/8. Its timing out but works fine in other browsers
What exactly do you mean "its timing out"? I am guessing there are certain features in that website which is not supported by IE6/7.
ReplyDeletePeter
ReplyDeleteThe problem is that none of the content from the mimio.com website is displayed when one uses IE7/8 and an iframe. The content is fine when visiting the mimio.com site directly with those browsers or when using IE6 on the problem page that uses iframe. FFox,Chrome nor Opera have any problem.
Hi Greg,
ReplyDeleteNote that because of copyright concerns, I have added a note about getting permissions of the webpage owner to embed their webpage into our own website, but I am having problem getting an email to contact them for permission. Are you one of their reseller and can you please write to them to ask for permission if you have ways of contacting them. Otherwise, I will replace mimio.com in test embedding mimio.com in iFrame with another webpage for which I have permission.
Peter
ReplyDeleteAwaiting a reply from Mimio about embedding their content on your page.
Awaiting permission from Mimio to embed their content on your page. Any other solution/work around to the problem or is it up to Mimio?
ReplyDeleteYou are using blogger, right? but how do you remove the ".blogspot.com" from your blog address?
ReplyDeleteSimple, justs upgrade to custom domain.
ReplyDeleteMore posts on custom domain:
Advantages of custom domain
Video tutorial: Purchasing and setting up custom domain
Advice: upgrade to custom domain via Blogger and Google Apps
Create sub-domain with custom domain
Hi Peter, I found your instructions most helpful, but I have two questions. How do I get rid of the black to create a more seamless look? And what can I do to eliminate the horizontal scroll bar?
ReplyDeleteThanks
well i like iframe simple, make better for blog and nice looking. see anything in one windows good for advertising and view in one place..
ReplyDeletenice
http://onlinebusinessclick.blogspot.com
IT WORKED!!!
ReplyDeleteI'm not an internet guru (yet), so THANK YOU so much for sharing this!
This comment has been removed by the author.
ReplyDeleteSorry I must add that I created it on a stand alone page the others where too difficult for me
ReplyDeleteCarol
I'm trying to embed a google calendar in the gadget side of the blog. I'm not sure where to paste the iframe that I get from the google calendar. Can you tell me how to do that?
ReplyDeleteVery easy, just copy-paste the code but with the URL you want into anywhere which accepts HTML such as in a post editor in the EDIT HTML mode or in a HTML/Javascript gadget in sidebar footer and anywhere you can add a gadget. Also you will need to edit the width of the iFrame to fit the width of whatever you want your iFrame in.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi. This blog is awsome!
ReplyDeleteIn just 5 mins checking this blog I found much more useful tips than what I have found in months in the whole internet!
Here I have this situation. I wanto to play in my blog a video .mp4 that I have uploaded to my web server. Can iFrame do that for me? How to? Basically I dont want to upload my vidoe to youtube or blogger, I want to keep it in my web server
Thanks
hmm...
ReplyDeletehow do i post images like in ifram basically only i can post in iframe that a image comes and someone clicks on it second image comes and so on in a blogger static page...
It would be great if you could help me.
With an iFrame you basically am embedding another webpage into the iFrame which when click will go to that page. So if that page is a photo hosted online then clicking that image will take you to that photo.
ReplyDeleteis it possible to specify a region of the embedded page to be display instead of the normal top left region ?
ReplyDeleteregarding being able to target a specific region - it is possible - I have a demonstration at
ReplyDeletehttp://silvervalleyreview.com/cv/groundfish/
Click on tab 1a and hover over or click on the links in the left column that are types of fish.
If the target is an anchor tag you can use # to specify it.
Also, you can design a page specifically to be in an iframe. just let everything float up and left and set the width of the iframe to crop it.
can it be a popup. have a link and the page opens like a shadow box in front of the main page?
ReplyDeletethank you
Thank you! After 4 or 5 days of hair pulling frustration I found this page and voila! Problem solved! This was so easy and worked perfectly! thank you! Thank you! My next frustration is how to put a photo on the sidebar which is a link to my amazon store. I'm sure I'll find a lot more helpful things here!
ReplyDeletewhy can't i un-subscribe from this comment thread? please let me know, i'm ready to stop receiving these now.
ReplyDeletethanks.
how do i unsubscribe from the comments on this post? i have what I need, I don't need to hear anymore about it...i keep asking the question how to unsubscribe and get no answer.
ReplyDeleteplease help, someone
At the bottom of the email, there should be a link to unsubscribe like
ReplyDelete......
....
Post a comment.
Unsubscribe to comments on this post.
Just click on the relevant link
nice work peter but if possible i have insert a certain area of page to be embedded inpost
ReplyDeletethis doesnt seem to work in blogger?!
ReplyDeletewhy not?
Don't work? Send us that code you use which "doesn't work"
ReplyDeleteYou can't embed only a section of a webpage with an iFrame.
ReplyDeleteThe unsubscribe link already tells me that I am unsubscribed but I am still getting updates to this post!
ReplyDelete@Frank...good luck with that, I've been trying to unsubscribe from this comment thread for SIX MONTHS. I don't think that guy Peter@Enviroman even exists! Or, he doesn't know how to unsubscribe...or, we're trapped in his alternate universe.
ReplyDeleteLike I said, good luck trying to unsubscribe from this thing.
Frank & the viewer,
ReplyDeleteMay I suggest you add to these threads where help for similar problems have so far met with no answer. By posting your problems there too it will help bump up the thread to the top and hopefully someone knows how to solve your problem:
I cant unsubscribe from a blog comment box
DarlingPatricia: can't subscribe from blog comments
Whenever I click on unsubscribe button in comment box some error message comes
Peter:
ReplyDeletePardon me but is this not your blog? I thought it was and you have a blog which has a bug in the unsubscribe not working. Perhaps disable the subscribe option so that some other poor souls do not get trapped like I and others have been.
I will be creating a filter in my Gmail account and automatically marking further posts as spam and deleting them.
Hi,
ReplyDeleteI use FrontPage to design all my sites. One of my clients wants me to EMBED their blog onto one of their web pages (rather than just add a link to the blog). I've heard that using an iFrame is the best way to do this, and I see from your earlier posts that it should be pretty easy ... BUT, I don't even know yet how to insert an iFrame on a web page ... could you give me some easy step-by-step instructions from the bottom up on how to insert the iFrame and then how to insert the blog into the frame?
Thanks so much!
In March youtube switched its embed code to iframes. Before that, viewing my blog as a subscribed email showed me any youtube movies embedded and viewable from within the email. Now, at least in my Mac's Mail program, I'm just seeing a black box where the movie should be in the email version.
ReplyDeleteThe youtube videos still look fine in the actual blog, this is just in the automatically distributed email version. Is there a way to modify the iframe code for youtube movies so that they will still display in emails?
In this case I would need to know what one can do with Frontpage. Perhaps you can send a screen shot of Frontpage menu bar and see if I can come up with something. Contact me via my contact form
ReplyDeleteHi friend,
ReplyDeleteI want to embed a part of webpage in my website and want to disable the scroll bar.
i mean , when u embed page shown above only half the part is visible. But if I want to show only one book and disallow user to see other....
Is it possible?
Please tell me how. Also tell if it is legal/illegal?
Before you can embed a "book" in an iFrame, that "book" must first be somewhere on the Web. Assuming that to be so, to not get the scroll bar, just choose width and breath of iFrame to accomodate the width and breath of the book.
ReplyDeleteRegarding legality, strictly speaking you are displaying someone's webpage in yours and it would be courteous to let them know and request permission.
how to us ethis not working when i use it in new page
ReplyDeletehttp://www.shaileshtripathi.in
This iFrame script is unlikely to not work. Give us the code you use but replace < and > with [ and ] or more accurately, refer to ways to display HTML tags in post and comments
ReplyDeleteThis is great. I taught myself how to do this, but I use . But I have a problem. How do i only display specific parts of a webpage? Is their a code I can type?
ReplyDeleteplease email me if you know the solution: amarmenes@hotmail.com
If you have control over the webpage which you want to put in an iFrame, then putting its ULR as http://.......html/#idname
ReplyDeletewhere the portion you want to display is specified by <div id="idname">....</div>
I tested that at Test display part of webpage with iFrame and use the url
ReplyDeletehttp://testing-blogger-beta.blogspot.com/2011/05/13-steps-to-successful-blogging.html#interect
I tried out this in One Of My Testing Blog,I Can Able To Embed A Webpage,But The Problem Is That That My Blog Post page automatically redirect to the website(which i embed in my blog)
ReplyDeleteCheck Out This Page:http://exam-results4u.blogspot.com/2011/05/cbse-2011-exam-results.html
I just want a specific article, video and music to be displayed within a static page. I want to hide my widgets, site-heading,etc. Would my "#idname" be the title of an article, an audio or a video that I want displayed?
ReplyDeleteURL in iFrame should be URL where that section is displayed followed by #abc where abc is the identity of the section you want displayed. Note however that in my test, the whole webpage is still displayed with scroll bars to scroll up or down, but what is seen immediately is that section with the id
ReplyDeleteit sure would be nice to UNSUBSCRIBE from this comments RSS...there seems to be NO WAY TO DO THAT.
ReplyDeleteRECOMMENDED: do NOT subscribe to comments on any posts in this blog, you will never, ever get off their email list.
I am a new blogger. Where do I place the html gadget so that it will be a separate page rather than part of the home page? I've moved it around, but it always appears on the home page. Also, I would like to be able to link to it from the pages gadget. Thanks, you're super!
ReplyDeleteYou will have to deal with conditional tags and some editing in the template. For the moment I am too lazy to try out.
ReplyDeletea hearty thanks for you ...
ReplyDeleteThis is great - thank you. Do you know how one could possibly display the webpage, but reduce it's size so it looks like a little thumbnail that updates everytime the embedded website changes?
ReplyDeleteHuh?
ReplyDeleteLOL. What I mean is, the way you have shown us what to do, the external URL is 100% of its size.
ReplyDeleteWhat I'd love is to reduce it to say, 25% of it's size, so that one can see the entire webpage but as a little dynamic version of the whole.
I am having issues with embedded a google spreadsheet (a particular group of cells). When I use the HTML/Java Gadget and add the embedded code from google docs all i see is a blank area. any thoughts?
ReplyDeleteIf you set up a blogger account and edit almost everything off your blog (incl the pesky blogger logo) and just set the colors to match your site then this looks great! Except you may want to do some sort of dhtml replacement scrollbar if you plan to embed your iframe on a site that is centered dynamically or youll have that ugly browser-themed scrollbar.
ReplyDeleteIF I JUST WANT THE WINDOW OF THAT IFRAME AND NO NAME OF THE SITE IS IT POSSIBLE PLS HELP ME
ReplyDeleteWhen you embed a website in an iFrame, essentially you are displaying that website into the iFrame so it is not possible to exclude anything.
ReplyDeletethanks so much,, its very useful for me,, :D
ReplyDeleteThank you!!
ReplyDeleteI couldn't see effect of Part highlighted in green, sentence I included there seen nowhere.
ReplyDeleteNext can I modify the border? I want to color white actually so it'll blends naturally
Thank you for this trick, One question, can it (the frame) use as magnifying glass, I mean, only pointing at one spot? I know it sound silly, but if you do have the answer, please don't hesitate to tell me. Thank you.
ReplyDeleteHelp! I put the iframe code like you said in my WP blog but it seems to be acting like a redirect rather than a frame....here is the code (I replaced the tags with square brackets...[iframe src ="http://my.e2rm.com/personalPage.aspx?registrationID=1327372&langPref=en-CA" width="100%" height="300"]
ReplyDelete[p]Your browser does not support iframes.[/p]
[/iframe]
Thanks
I am afraid I am not too familiar with Wordpress and what it can and cannot do, but this:
ReplyDelete[p]Your browser does not support iframes.[/p]
Seem to indicate that whatever/wherever you are trying to add the iFrame, it is not supported
There seems to be a crying need for more functionality. Here is what I would find as a terrific gadget for Blogger - a gadget that accepts multiple links to other websites (like the blog link gadget) and posts them, just like Facebook. Once the link is added to the gadget, the gadget would search for an appropriate photo - just like FB, present what it thinks is appropriate as a thumbnail (of settable, preferred size), then gives you the option of clicking through any other photos that happen to be on that page - just like FB. Another desirable option would be the amount of text to show, such as 30 characters or so - with a link to that webpage - either same page or a new tab. A gadget like this would make a website look great and save so much time!
ReplyDeleteYou should post your suggestion to Blogger Feature Suggestions & Feedback
ReplyDeleteOh, perhaps I misunderstood this site. I thought you might do coding here. Oh well, thanks for the pointer.
ReplyDeleteHello, I am trying to put the Iframe code inside LI parameters.
ReplyDeleteI am trying to create a tab in the Nav bar and when they click on the tab, they see the embedded website within the blog.
I have the code to create the tab but it's having the iframe code within the LI.
The embedded website appears on top of the whole blogsite.
I also tried to copy/paste my code here but it won't let me.
jeanniecapellan.blogspot.com
Would it be possible to have some help with my above/previous comment??
ReplyDeleteThis is my current code which is viewing on top of the blog itself. Instead of the LI parameters... please help.
[LI class='layout_header_nav_main_item ']
[A class='primary'>Thirst Relief[/A]
[iframe height='800' src='http://www.thirstrelief.org' width='100%']
[p]Your browser does not support iframes.[/p]
[/iframe]
[/LI]
Tested your codes at Test iFrame in link list so what is the problem?
ReplyDeleteThank you...
ReplyDeleteMentioned above, the embedded website shows on top of the blog.
I have added the code back into my HTML editor. Can you check to see what i am talking about?
What should i do so that it doesn't do that?
http://www.jeanniecapellan.blogspot.com
Either create an Extra Add a gadget (page element) at the top of the main column then put your code in a HTML/Javascript gadget or paste your code into the post editor and publish as a post
DeleteOh awesome. The Gadget worked but I couldn't get it to appear when I clicked on the Tab.... But as a post will work fine. A previous question from another guest asked about putting in a post and you had answer ed NO, but maybe that answer was for another question. I didn't even to think about trying it in a post because of that.
ReplyDeleteI am so glad that it works. Thank you
how can i make my blogs approved for adsense ?
ReplyDeletei want to get fast adsense approval for http://facebook-apps-fanpage-games.blogspot.com/
if there is any posiblity so please let me know,
Facebook Apps | Facebook Application Developers
Wowwwww Awesome! i put an iframe of the page that contains the iframe and it becomes an infinite iframes of iframes! Lol sorry i am so dumb... Thank you so much!!!!!!!!!!!!!!
ReplyDeletedear Peter @ Enviroman, thanks before, from here i can got so many new idea, tonight i embed one single picture from my own post to the gadget html, when i try to delete my post that single picture, i think my embeb picture will be disappear too. but it keep there always, as i knew the linked picture will be deleted as well as once the pic source deleted, and will just keep the embeded even the pic source has been deleted, so i need your help, that what i want to know is..... if i embed the link source of my favorite websites, then someday that my favorite websites is closed or have blocked by google or bankrupt or any else, then can i still open it from my embed area? I really appreciate your help ,thank you. my email: ucodex@yahoo.co.uk
ReplyDeleteIf that photo was originally uploaded via Blogger it will be saved in the Picassa Web Album which will not be deleted when you just delete that post via which the photo was uploaded. However, if you embed another blog with an iFrame, what is showing in the iFrame is just that blog itself so if that blog is deleted, the iFrame will be empty
ReplyDeleteThanks a lot. it was really helpful. not only for blogger post but also to post in other blogging sites
ReplyDeleteif you plan to embed your i frame on a site that is centered dynamically or you'll have that ugly browser-themed scroll bar.So all you do is add the small bit of code you listed into a bloggers post?
ReplyDeleteCosmetic Surgeons Tijuana
i have used these sort of technique on my first client site, i put blogger blogs pages in the website
ReplyDeleteI always get an "Error 500" message when trying to use iframes. Is there a particular place in the html that you have to put the iframe code?
ReplyDelete