Saturday, April 03, 2010

How to embed webpage in blog with iFrame

Suppose you want to integrate a website or a particular webpage with your blog. Some possibilities, you may be auctioning some items on eBay and you want your ebay offering in your blog or perhaps you have an Amazon AStore and want to embed the AStore into a post in your blog. Click here to see a sample.

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:

105 comments:

  1. How do I Add TEXT in a Iframe ?
    Please Give me the code for it.

    ReplyDelete
  2. I suppose you can just put the text at the source (src) URL in the iFrame

    ReplyDelete
  3. I 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?

    ReplyDelete
  4. Yes that is all you need to do. Iframe's are deceptively easy to do.

    ReplyDelete
  5. I did it! It worked perfect. Thank you so much!

    ReplyDelete
  6. Do 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

    ReplyDelete
  7. I have skimmed through Google Blogger for Dummies, looks like a pretty basic book which may be suitable for beginners.

    I 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.

    ReplyDelete
  8. 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?

    ReplyDelete
    Replies
    1. Peter@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

      Delete
  9. I've been trying to use the iframe code from Facebook for adding a "like box" to my blog, but it simply isn't working.

    I'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?

    ReplyDelete
  10. That's similar, but the box (as opposed to the button) provides a feed to the page's activity.

    http://developers.facebook.com/docs/reference/plugins/like-box

    ReplyDelete
  11. I will need to test again

    ReplyDelete
  12. I 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?

    ReplyDelete
  13. Tried using the following

    ..

    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

    ReplyDelete
  14. Tried using the following
    ..
    src="http://www.mimio.com" name=frame1 scrolling="auto" width = "970" align="center" frameborder="no" height="720">

    ReplyDelete
  15. Tried using the following
    ..
    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

    ReplyDelete
  16. 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.

    ReplyDelete
  17. Peter
    The 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.

    ReplyDelete
  18. Hi Greg,

    Note 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.

    ReplyDelete
  19. Peter
    Awaiting a reply from Mimio about embedding their content on your page.

    ReplyDelete
  20. 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?

    ReplyDelete
  21. You are using blogger, right? but how do you remove the ".blogspot.com" from your blog address?

    ReplyDelete
  22. 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?
    Thanks

    ReplyDelete
  23. 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..
    nice
    http://onlinebusinessclick.blogspot.com

    ReplyDelete
    Replies
    1. Hi Friend Please Tell me how to Connect my host site with iframe like someone@blogspot.com

      Delete
  24. IT WORKED!!!

    I'm not an internet guru (yet), so THANK YOU so much for sharing this!

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. Sorry I must add that I created it on a stand alone page the others where too difficult for me

    Carol

    ReplyDelete
  27. 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?

    ReplyDelete
  28. Very 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.

    ReplyDelete
  29. This comment has been removed by the author.

    ReplyDelete
  30. Hi. This blog is awsome!
    In 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

    ReplyDelete
  31. hmm...
    how 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.

    ReplyDelete
  32. 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.

    ReplyDelete
  33. is it possible to specify a region of the embedded page to be display instead of the normal top left region ?

    ReplyDelete
  34. regarding being able to target a specific region - it is possible - I have a demonstration at
    http://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.

    ReplyDelete
  35. can it be a popup. have a link and the page opens like a shadow box in front of the main page?
    thank you

    ReplyDelete
  36. 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!

    ReplyDelete
  37. why can't i un-subscribe from this comment thread? please let me know, i'm ready to stop receiving these now.
    thanks.

    ReplyDelete
  38. 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.

    please help, someone

    ReplyDelete
  39. At the bottom of the email, there should be a link to unsubscribe like

    ......
    ....
    Post a comment.

    Unsubscribe to comments on this post.

    Just click on the relevant link

    ReplyDelete
  40. nice work peter but if possible i have insert a certain area of page to be embedded inpost

    ReplyDelete
  41. this doesnt seem to work in blogger?!
    why not?

    ReplyDelete
  42. Don't work? Send us that code you use which "doesn't work"

    ReplyDelete
  43. You can't embed only a section of a webpage with an iFrame.

    ReplyDelete
  44. The unsubscribe link already tells me that I am unsubscribed but I am still getting updates to this post!

    ReplyDelete
  45. @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.
    Like I said, good luck trying to unsubscribe from this thing.

    ReplyDelete
  46. Frank & the viewer,

    May 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

    ReplyDelete
  47. Peter:
    Pardon 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.

    ReplyDelete
  48. Hi,

    I 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!

    ReplyDelete
  49. 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.

    The 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?

    ReplyDelete
  50. 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

    ReplyDelete
  51. Hi friend,
    I 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?

    ReplyDelete
  52. 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.

    Regarding legality, strictly speaking you are displaying someone's webpage in yours and it would be courteous to let them know and request permission.

    ReplyDelete
  53. how to us ethis not working when i use it in new page

    http://www.shaileshtripathi.in

    ReplyDelete
  54. 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

    ReplyDelete
  55. This 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?

    please email me if you know the solution: amarmenes@hotmail.com

    ReplyDelete
  56. If you have control over the webpage which you want to put in an iFrame, then putting its ULR as http://.......html/#idname
    where the portion you want to display is specified by <div id="idname">....</div>

    ReplyDelete
  57. I tested that at Test display part of webpage with iFrame and use the url
    http://testing-blogger-beta.blogspot.com/2011/05/13-steps-to-successful-blogging.html#interect

    ReplyDelete
  58. 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)

    Check Out This Page:http://exam-results4u.blogspot.com/2011/05/cbse-2011-exam-results.html

    ReplyDelete
  59. 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?

    ReplyDelete
  60. URL 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

    ReplyDelete
  61. it sure would be nice to UNSUBSCRIBE from this comments RSS...there seems to be NO WAY TO DO THAT.
    RECOMMENDED: do NOT subscribe to comments on any posts in this blog, you will never, ever get off their email list.

    ReplyDelete
  62. 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!

    ReplyDelete
  63. You will have to deal with conditional tags and some editing in the template. For the moment I am too lazy to try out.

    ReplyDelete
  64. a hearty thanks for you ...

    ReplyDelete
  65. This 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?

    ReplyDelete
  66. LOL. What I mean is, the way you have shown us what to do, the external URL is 100% of its size.

    What 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.

    ReplyDelete
  67. 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?

    ReplyDelete
  68. If 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.

    ReplyDelete
  69. IF I JUST WANT THE WINDOW OF THAT IFRAME AND NO NAME OF THE SITE IS IT POSSIBLE PLS HELP ME

    ReplyDelete
  70. When you embed a website in an iFrame, essentially you are displaying that website into the iFrame so it is not possible to exclude anything.

    ReplyDelete
  71. thanks so much,, its very useful for me,, :D

    ReplyDelete
  72. I couldn't see effect of Part highlighted in green, sentence I included there seen nowhere.
    Next can I modify the border? I want to color white actually so it'll blends naturally

    ReplyDelete
  73. 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.

    ReplyDelete
  74. Help! 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"]
    [p]Your browser does not support iframes.[/p]
    [/iframe]

    Thanks

    ReplyDelete
  75. I am afraid I am not too familiar with Wordpress and what it can and cannot do, but this:

    [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

    ReplyDelete
  76. 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!

    ReplyDelete
  77. Oh, perhaps I misunderstood this site. I thought you might do coding here. Oh well, thanks for the pointer.

    ReplyDelete
  78. Hello, I am trying to put the Iframe code inside LI parameters.

    I 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

    ReplyDelete
  79. Would it be possible to have some help with my above/previous comment??

    This 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]

    ReplyDelete
  80. Tested your codes at Test iFrame in link list so what is the problem?

    ReplyDelete
  81. Thank you...
    Mentioned 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

    ReplyDelete
    Replies
    1. 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

      Delete
  82. Oh 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.

    I am so glad that it works. Thank you

    ReplyDelete
  83. how can i make my blogs approved for adsense ?
    i 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

    ReplyDelete
  84. 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!!!!!!!!!!!!!!

    ReplyDelete
  85. dear 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

    ReplyDelete
  86. If 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

    ReplyDelete
  87. Thanks a lot. it was really helpful. not only for blogger post but also to post in other blogging sites

    ReplyDelete
  88. if 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?
    Cosmetic Surgeons Tijuana

    ReplyDelete
  89. i have used these sort of technique on my first client site, i put blogger blogs pages in the website

    ReplyDelete
  90. I 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
  91. Hi, great article, but i'm not gettin this to work with Google News, with the following URL, the simplest i could copy "https://news.google.com/news?pz=1&cf=all&q=Garrafas%20pet" ...is that possible? thanks in advance!

    ReplyDelete
  92. the iframe works for about a second and then sends me directly to my html that i put into the src="..." area. Do you know why that would be?

    ReplyDelete
  93. Beldon, I just used the exact same code for the iFrame at 2 posts just today (MIT Scratch robotic language: Getting Started and LEGO WeDo Hungry Alligator Challenge)) and had no problem. Perhaps you can email me the code you use and I can check it out. Use the Contact form.

    ReplyDelete
  94. hi
    I tested it on my web page www.hackingarena.com but it redirected me to 404 error page

    ReplyDelete
  95. kshitz Pathmania, I tested the iFrame code at Test iFrame and you can see there is nothing wrong with the iFrame HTML code given in this post.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics