techxplore blog
01Jun

How to Embed a Web Page on Another Site?


Have you ever wondered if you can embed website contents from one website to another? It’s doable and perfectly simple. But is it legal or not? I dunno about the legality of which, but if you own both sites then for sure it’s permissible I think. I have posted before about My Little Forum a Basic Web Forum. I have used MLF and embedded it as part of the Gender Development Studies (GDS) site.

How does one do this? There’s no need long list of code, or complex JavaScript coding, but it uses pure simple HTML tags. The trick is to use Inline Frame or what we call IFRAME to embed an HTML document with the main document.

I have a sample code below as used in my website project:

<iframe height="410" width="100%" frameBorder="0" src="http://www.techxplore.net/index.php">your browser does not support IFRAMEs</iframe>

A short explanation:

height – sets the height of the inline frame in pixels
width – sets the width in this case 100% represent that it will use the full width available
frameborder – specifies if a border is shown or not for the frame
src – specifies the source HTML page to be embeded in the main document

The text between the opening <iframe> tag and closing </iframe> tag is the text message that will be shown whenever the client browser does not support IFRAME.

See it working in the Gender Development Studies Forum. There’s no magic in it and it’s very practical to use at times. If you are looking for a simple and solution to embedding website contents from another website then IFRAME tag could be the answer. This is HTML tag based solution so it works for all major Internet Browser such as FireFox, Internet Explorer, Opera, Safari, Google Chrome, and more. Well you can try it too.

47 Responses to “How to Embed a Web Page on Another Site?”

  1. velvet Says:

    ohh wow! this is very helpful! thanks! see the sample of what i have done here:

    Search – S.O.S.

  2. iloveaskingstupidquestions Says:

    is it possible to embed elements from one of your pages onto another. for example if i create a div tag with a picture as a background for the div and some text in the div. Is their a way to have this div embedded in a separate site? basically i want to make my own embeddable objects which will mostly be div tags and embed them on other sites as well as mine. Kinda like when youtube gives you the option to embed on of their videos. only in my case i would be say giving the option to embed my banner or an area containing text. sorry for long read.

  3. Francia Says:

    The most perfect code ever! Thanks.

  4. Albert Says:

    This info was ver useful. Thank you for the hint. My outside camera requires a username and password, and the web site asks for it before the page loads. Any idea how to stop that until the viewer clicks on my outside camera link?

  5. Paul Says:

    Wow. I have tried everything to do that and kept running into cross-browser compatibility issues…had huge scripts…nightmares…

    This is so easy. Thank you so much.

  6. The Mummy's Club Says:

    This is exactly what we needed. We have been trying to embed Health Visitor Direct in to our site for months, using your code it took us just a few seconds.

    Thanks

    The Mummy’s Club

  7. chicodj Says:

    Great works! Very helpful. Thanks for sharing.

  8. Alfredo Says:

    Thanks for the code, it worked well.

  9. Chet Caruthers Says:

    Thanks for leaving this information up!! Solved my issue with adding menus to “Lightroom’s” auto generated galleries… :)

  10. Alex Says:

    AWESOME, short and simple!!! Thanks a million!

  11. G-MAN Says:

    Thanks abunch man! I use sitegrinder 2 and nothing was working till I this info! You save me hours of testing!

  12. Dave Says:

    Is there a way to embed the body only of each of many pages, into one consolidating page, without the sidebars, headers and other frames, so I can read them as one merged document.

    To work the way I want, the frames for each would need to be dynamic so there wouldn’t be any scrolls.

    Dave

  13. Meena Says:

    THANKS ALOT BUDDY..U MADE MY DAY

  14. Hute Says:

    This ALOT thank you

  15. Vanessa Says:

    You saved my life. Seriously, I will name my children after you. AMAZING!

  16. come2knowme Says:

    IS it legal??? if yes then I am going to use it..

  17. cido Says:

    BEST EVER

  18. Amber @ SavingMoneyWisely Says:

    This has been such a huge help! I had found other tutorials but they either didn’t work or looked all crazy! Thank you SO much!

  19. GLbonafont Says:

    You’ve saved my life! THANK YOU!

  20. kukusha Says:

    sooo simple and perfect! how would you make the links open in a new window – perhaps directing to the main website? that may get around legality issues

  21. kukusha Says:

    is there a way to fit the whole website into a specified dimension? without need for the scroll bars?

  22. Nepal Kathmandu Says:

    Wow this is just what i was looking for. Amazing dude. Thanks a ton. I was wondering whether it is legal or not ? I think if we site and give credit to them then everything should be fine right ?

  23. Fern River Resort Says:

    This is a great little script. We modified the size of the window a little to hold our booking engine in front of our template, Looks great but there is a little glitch.

    The booking engine loads as timed out. See here:
    http://fernriver.com/booking1.html

    The problem goes away if you refresh or if you have been there within 1/2 hour. Also the problem does not exist if you link directly to the booking engine.

    Anyone got any ideas on how to open the embeded page as active?

  24. Ghanshyam Gupta Says:

    can I embed a part of another web page(x1,y1,x2,y2 cordinate only of another webpage) in my web page.

  25. ihecker Says:

    I cant embed fifa.com website! Any help?

  26. Still in a Quandry « Petite's Blog Says:

    [...] I am very excited about my web site.  I will use the pages I create to enhance my mathematics classes next year.  I found the HTML needed to embed one web page in another web page, so I was able to ‘insert’ a Hot Potatoes quiz into my themed page on Google Sites.  I found the HTML here: http://www.techxplore.net/2007/06/01/how-to-embed-web-sites-on-another-site/ [...]

  27. Nefeli Says:

    Oh, thank you. I was looking for this type of thing for so long…

  28. Jim Says:

    Appreciate the info,saved a lot of time & stress, thanks again.

  29. rajalakho Says:

    it is a good post. it proved to be very helpful for me as am a new blogger

  30. Kevin-host Says:

    this info was very helpful. I appreciate you sharing it with us. Thanks! visit me on cpronlove.com

  31. Slideshow met Google images op je eigen site | webjournalisten.nl Says:

    [...] iframe (bekijk code) heb ik de volgende specificaties meegegeven: – hoogte: 300, breedte: 600 – geen border (rand) – [...]

  32. Mike Says:

    Wow! I can’t tell you how long I’ve looked for a solution to inserting a “page within a page”. This little piece of code worked perfectly!!!
    Thanks so very much for having this up here!

    Mike

  33. Aaron Says:

    This is great. Can you change the css of the site you embeded?

  34. Create your own quiz Says:

    This is really helpful. Thanks

  35. toffensko Says:

    Most usefull code i have ever found i use it all the time thank you very much!

  36. cristi Says:

    who can help me to make an social network i need admin,s on my site

  37. fafa Says:

    Very – very fantastic, Thank alot – thank you very much

  38. Aaron Says:

    Thanks for a nice simple solution that works :)

  39. Sophie Paris Says:

    Is it possible to frame specific frame of other webpage? Thx.

  40. Sue Hellman Says:

    I am trying to embed a Scoop.it page on a Wikispaces page [http://math4keeps.wikispaces.com/Sue%27s+GeoGebra+Resources] using this code: your browser does not support IFRAMEs.

    It just flips to the Scoop.it website rather than showing up as an embedded on the wiki page. I’ve tried reducing the width, but no joy. Any suggestions? Thanks.

  41. Sue Hellman Says:

    PS — I copied the code from your post above, changed with URL to mine (src=”http://www.scoop.it/t/using-geogebra”) and adjusted with width to “50%”. This did not show up in my comment above.

    To test –> Navigation Pane on the left >> GeoGebra Moodle Meet >> Resources Collection. Thanks.

  42. LJ Says:

    I have literally been scouring the internet for about 6 hours looking for something like this to (very legally!) embed pages of my forum into my website. This is so damned elegant and perfect, I only wish I’d found it at 7pm yesterday instead of 3am this morning!
    Thanks so much! My successful use of it is here:
    http://www.blackboardfiction.com/theadventurersguide/start

    Jenks.

  43. somasekharan Says:

    thanks a lot!!!

  44. Bala Andrew Says:

    super thanks for your ideas………

  45. deb Says:

    Thanks SO much. Very helpful code. Appreciate the help.

  46. ann Says:

    I used adobe dreamweaver cs3 to create my webpage..my question is, how could I insert my webpage to my existing website? or how could I update my website?
    Thanks ahead…..

  47. Sembiring Says:

    wow…..Finally i found this. thanks a lot man.

Leave a Reply