There are times you need to show a “live” web page in your post, not just a screenshot of that web page. With an embedded web page, readers can use the mouse to scroll up/down or left/right to explore the actual web page.
Here’s a simple solution. To do this, all you need to do is to tweak some simple codes:
<object data=http://www.example.com width=”650″ height=”500″> <embed src=http://www.example.com width=”650″ height=”500″> </embed></object>
How to tweak the code
- replace the two instances of “http://www.example.com” with the actual URL of the web page you want to embed
- change the width and height to meet the need of your post (650 px works best for the default post width of my blog)
- copy and paste the tweaked code into the Text editor of your post
Here’s the tweaked code to embed CNN home page (Remember, you need to paste the tweaked code in the Text editor, not the Visual editor, of the new post window):
<object data=http://www.cnn.com width=”650″ height=”500″> <embed src=http://www.cnn.com width=”650″ height=”500″> </embed></object>
How to add a border to the embed web page
You may want to add a border to the embedded web page so that it stands out better, then you need to tweak another simple code:
<div style=”border: thin #000000 solid; width:650px;”>embed code</div>
If you are familiar with CSS, then the code is self-explanatory to you. But if you don’t know what CSS is, don’t panic, you can literally copy and paste the code above to add a thin black border to any embedded web page – all you need to do is to replace “embed code” with the tweaked code you just created.
Here’s the complete code to embed the CNN homepage with a thin black border (Note again, you need to do this in the Text editor)
<div style=”border: thin #000000 solid; width:650px;”><object data=http://www.cnn.com width=”650″ height=”500″> <embed src=http://www.cnn.com width=”650″ height=”500″></embed></object></div>
Possible issues you may have
- This method works with self-hosted WordPress; I haven’t tested if it works with the free WordPress.com blog.
- The embedded web page cannot shrink to fit the (shorter) width of your blog post, so consider embedding a web page which has its major contents along the left side of the page, e.g., another blog post. That said, you can always scroll horizontally with any embedded web page though.
- If you don’t know what an Text editor is: when you create a new post, by default you are in the Visual editor window; but look at the upper right corner of the editing window – there is a Text tab next to the Visual tab, click the Text tab and you are in Text editor.
- This is important: once you are in Text editor, you should not switch back to the Visual editor; because if you do, the code you entered will be interpreted differently by the editor and will NOT display properly when you preview.
- Here’s one more thing: if you copied and edited the sample codes but things don’t work out, try retyping all the quotation marks directly in the Text editor.
Want to learn more about web programming? Check out these popular books at Amazon:
Related posts:
- 5 tips for effective web writing: Anatomy of a functional blog post
- Basic web scraping and data visualization using Google Spreadsheets
- Embed video and photo in Google maps: A beginner’s guide
- Tutorial: How to create a free heat map using Google Fusion Tables
- Location- and time-based storytelling: Interactive maps with embedded photo, video and texts
How or can I increase the visible size? It works however it is hard to read
I’m afraid you cannot specify the font size of the embedded web page; it is specified by the creator of that page.
Pingback: How To Embed Any Web Page Inside a Website Article | Social Media k-12 | Scoop.it
Pingback: How To Embed Any Web Page Inside a Website Article | Mobile Websites vs Mobile Apps | Scoop.it
Pingback: How To Embed Any Web Page Inside a Website Article | ITyPA première approche | Scoop.it
This “object” code no longer works in Internet Explorer version 10 onwards. It works in all the other browsers. It is obviously time for all these “old information” sites to be taken down.
I use width=”500″ and height=”1000″, but only only displayed small frame i my page, not as the same width or height.
http://sahamok.com/laporan-keuangan/laporan-keuangan-tahunan-2011/
I’ve got the same issue. The size given is ignored. Only a small frame is displayed on the blog page.
replace the quotation marks inside the text editor…great tip in the article!
Pingback: How to embed a web page in a WordPress blog pos...
You are Master Thank you very much.
i used another HTML code for this
Page Builder than insert a new columb
a new text HTML
Copy and past this code
change only “http://www.Example.com” to “http://www.yoursite.com”
Your browser does not support iframes.
Check this site..i cant past a code here.
http://www.wikihow.com/Resize-iFrames-in-HTML
Pingback: Embed your listing gallery into your blog posts. | Seattle Home Photography | Real Estate & Architecture
How about flexible/full width?
please help me for embedding a webpage in my free wordpress blog webpost.i desperately need it.
Thanks A Lot i can Successfully did it .
I love this website! I learn so much and I have been significantly improving my own blog. Thank you!
Thanks for the compliments – that’s what every blogger loves to hear, that their work is of value to people.
OMG THIS IS AWESOME! thank you so much for the helpful tip!
Pingback: How To Embed Any Web Page Inside a Website Arti...
http://chartfeed.icharts.in/ShowChart.php?chartkey=e01a8e64cbdba0bf2e6169879a55bf4e&symbol=ACC&period=Daily&pr_period=3M&uind1=SMA&uind1_param=50&uind2=EMA&uind2_param=5&uind3=SMA&uind3_param=100&lind1=MACD&lind1_param=3,10,9&lind2=RSI&lind2_param=2&lind3=CCI&lind3_param=4&chart_type=CANDLES&chart_size=640
If i use the frame(important box) only. it is right or wrong.Give me a suggestion.
Are you trying to embed that linked PNG image? You can directly embed an image without going through this route
Pingback: How to embed a web page in a WordPress blog pos...
any idea if this still works.. trying to do this on my wp blog (free one), but doesn’t seem to make any difference. please help.
I have not tested this method on a free WP blog so I cannot say for sure if it works or not.
It doesn’t work on the free version.
Hello!
I am attempting to change the size (width and height), but even when I change the numbers, it remains the same size. Is it something I’m doing wrong?
Does the blog post have a default (max) width/height?
i tried to embed onedrive.com but it did not work
Hello,
I have used your code and it embeds the page fine, but for some reason I cannot change the size of the image. It is set to a small size and cannot be fixed. I have changed to width and height to no avail and have tried everything suggested here:
http://wordpress.org/support/topic/how-to-set-max-width-of-oembeds-in-wp-35
Would love any help on this issue.
You can see the small embed here:
http://stephenbeitler.com/?page_id=20
Much appreciated,
Stephen
There seems to be some invalid codes in your page HTML: width=””800px″” height=””800px″”; take out the extra quotation marks; if it still does not work, try manually type up all the quote marks.
Besides, double check the string of codes in your html with the demo in my post; you’ll see it looks different than the format in my demo.
His code is really overcomplicated. I stripped it down to the necessities and simply added some css to change the size of the window:
Having the width set to 100% will make it adapt to the screen size.
” “
Brilliant! Thanks for that
Hi Michael. Can you show an example of your code?
Regards Trine
Brilliant, just what I needed!
Thank you for your generosity! Great help
The code works for me but I would love to put in my enewsletter and have it link to my wordpress pages. When I use the code it puts the pages inside the small area, how do I have it open in the parent window?
Maybe you can try target=”_blank”?
The website itself is too large within the object. How can I shrink the content inside to fit
No, you cannot shrink the external website to fit the (smaller) embed window.
Hi, I am trying this to embed a google drive folder with shared link inside my webpage. The code worked fine for cnn.com or some other sites I tried, but when I type the URL of the google drive share link (the share folder) it goes blank. Any ideas why ?
Google Drive is an encrypted service, I guess.
Tried also dropbox but none worked. Yes, it should be encrypted. Ok, I will try to work around this ! Tanx for the code and help !
Thanks for the helpful tip, Mr. Lin. It’s just what I was wondering about today to add to my site.
awesome worked perfectly!
You may use this WordPress plugin to embed sites and posts https://wordpress.org/plugins/embed-articles/
Thanks, but it’s not working on my wordpress blog @shawonhassan.wp.com … so what can I do…? please help me…
Yours is a free WP account and it does not support code embedding. Mine is a self-hosted site using the WP theme.
Thanks Mu Lin…
Sorry for the former post, Here is the location were I have been testing your code http://www.featherandthought.com/blueshorevancouver/search-test-mls/
The page that I supplied in the former post, was a different attempt using a different code, with that one I can change the height but can only reduce the width.
Thanks again for any help
When I check the source codes for that page, I see instances such as:
width=””650″” height=””500″”
Note the double quotation marks there? They are invalid and being substituted by the browser with default dimensions.
So, in your editor, make sure you only have one set of quotation marks, and they should be the straight marks, not the curly marks.
Hello Mu Lin;
Thank you very much for your help. I did follow your advice and it did work.
The strange thing is that I copied and pasted your code and I have no idea where the double quotes came from….However I copied and pasted your code again, I have double checked it and this is what I see in the source: , but as you see still the CNN page is not showing accordingly. http://www.featherandthought.com/blueshorevancouver/search-test-mls/
Thanks again for your help.
HB
Hi,
I can not seem to get this code to work. I have a self-hosted account running Theme X. (http://wsoeldner.com/)
To change the size, the correct code does not need the quote(width=650 height=500, or width=100% … etc).
Try out WP Web Scraper (http://wp-ws.net) if you are on WordPress and are looking some really advanced embeds
I got this web page from my buddy who shared with
me on the topic of this web site and now this time I am visiting this site and reading very informative content
at this time.
I am trying to embed a grocery store ad section into a couponing site…. it does not work with the martins ad
Eagle works http://www.penncouponing.com/eagle.htm
but
martins does not http://www.penncouponing.com/martins.htm
Is there a way to post just a specific area of the site? For Example, the content is far to the right to be seen without scrolling to the right. is there a way to trim the margin on the left to center the content?
why is that not working on wordpress
hoe do you do this with an https page
This solution is just what I needed! Thank you. I am embedding an html site that I created, so I’ve been able to successfully adjust the content width to fit 100% of the body area within my WP page (which has a sidebar). Looks great.
One question: While the page is great with a full monitor, the html is cut off when viewed in an iPad. Would be great to have it scale appropriately (the Theme does). I have full control over the embedded html and the WP theme.
Any ideas? Work in progress here:
http://www.landspring.net/weathersite/
Having read this I believed it was extremely enlightening.
I appreciate you taking the time and energy to put this short article together.
I once again find myself personally spending a significant amount of time
both reading and commenting. But so what, it was still worth
it!
Thanks for the comment; it makes me feel being rewarded for what I’ve been doing.
Hello very cool website!! Guy .. Excellent .. Superb .. I will bookmark your blog and take the feeds also?
I’m glad to find numerous helpful info right here within the submit,
we’d like develop extra techniques in this regard, thanks for sharing.
. . . . .
why is that not working on wordpress Thank you!
I have checked but not working on my website.
http://www.utmanzai.com
I don’t know why? Anyone can help me?
Mu Lin, thank you so much. I am a remedial massage therapist working inside a large clinic, and needed to link the clinic’s online booking system to my own website. This solution means users no longer have to leave my site and go to the clinic’s site in order to book my services — I just embedded the booking page into my site.
I’m really happy, this has been bugging me for ages. Thank you so much, it makes it much much easier for clients to book me!
Thanks for the comment. I’m glad you found the tip helpful.
How can you add a hyperlink feature to the window of the embedded live website? — So that when someone clicks it, they are navigated to that website?
Thanks!
Hi I’m paste ur code but it’s size is small how can create a big siiz
this is amazing, thanks
Hi! Great tip!! I have a question about it though: is it legal?
Please don´t take my question as anything rude; what I´m trying to say is if by using this tool I am “stealing” traffic from the webpage I embed in my own site.
I would really much like to use it but do not want any kind of trouble with other website owners!
Thanks in advance for your answer!
Like many tips out there on the web, the use of it at the discretion of individual users. That said, no, this embed will not bring any traffic to your site. Take this tutorial article as an example – it has been around for years, but my stats never show any referral traffic from the CNN site.
Thank you! Worked great… did a little tweaking with the code, but shows up how it should now! I appreciate your getting me in the right direction.
Hello,
Ive got a more specific question. Id like to embed a password protected website into a website. Ive got an account on a website and I would like to add this to my own website so that when other people create an account on my website, theyll get instant access to that website without me having to enter the password – it would already be there. Is there a code which allows that? Something like website name, website loging details and once its on visibe on a website, everyone has access to it.
Please help.
Thank you very much.
Pingback: 腕時計 レディース セイコー SEIKO セイコー5 SEIKO 5 自動巻き 腕時計 SYMH85J1 クリスマス
When I use a secured website with https:// it doesn’t show. It shows up as a large empty box. Is there a way to fix this ?
Example : http://www.tttleaders.com/4x4healthprofit/pro-tf/
Thanks in advance.
Hi, I can’t get this to work on my Word Press at all? I’m using the Harmonic Theme (www.steveyounguk.com) on a self hosted domain
Any ideas?
I just want to blog with this website http://uk-offers.timeout.com/deals/event-rising-stars-country-march-2016
When I try to do it using your code all I get is a hyperlink instead?
Please help – thanks
Steve
Mu, I tried your code to embed a link to real estate listing results and the results page with ten listings in a row embedded perfectly just as if you looked at the link results in a browser. It looks as natural as a web scraped page of listings I have on another website – like it was designed into the page with no i frame looking scroll bars.
However, if I click one of the listings to view its listing details, the page of listings turns blank white and no listing detail comes up? If I click the back arrow in my browser I get the embedded page of listings again?
What could be going on that prevents the listing detail view from pulling up?
Really helpful. Thank you!
Thank you, it works great
Hello to every single one, it’s genuinely a good for me to go to see this website,
it includes important Information.
Hi there! This is my first visit to your blog!
We are a group of volunteers and starting a new project in a community in the same niche.
Your blog provided us valuable information to work
on. You have done a outstanding job!
Thanks for all your information. I have forked it…To remove the 2 vertical scrollbars type in css:
html {
overflow-y: hidden;
}
Is there any WordPress plugin for the purpose? Embed wordpress post from one website to another Plugin.
I have seen some plugin to embed infographics
I look on the page and the security policies of firefox and chrome stop the page from showing, any solution?
Blocked by Content Security Policy
This page has a content security policy that prevents it from being loaded in this way.
Firefox prevented this page from loading in this way because the page has a content security policy that disallows it.
THIS METHOD WILL NOT WORK ON NEWER BROWSERS when you visit a site with SSL
Thanks for the highly informative article. I’ll definitely try to incorporate your suggestiong into my website. Highly appreciate it!
Cheers.
It’s Not working for my this Site..
http://whatsappstatusupdate.com
thank you
thank you and have a look at https://salutaryfacility.com/services/support-staff-services/
it worked with my website http://www.ivoryfile.com but not on the other one. Please why?
Pingback: How To Publish 6 Blog Posts Every Week. – theblog
Hi, absolutely got tons of value from your post. Please i have 2 quick questions.
1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com
I was looking for the solution to embed web page in word press and finally i got the solution here. Thanks for the help.
I am very thankfull to you for give us a more knowledge..
His code is really overcomplicated. I stripped it down to the necessities and simply added some css to change the size of the window. https://www.marketerdream.com/aplikasi-trading-saham-terbaik-untuk-ios-dan-android/
Nice explanation, actually I haven’t get proper knowledge about embed, this blog helped me very much. Thank you