How to embed a “live” web page in WordPress blog posts

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

  1. replace the two instances of “http://www.example.com” with the actual URL of the web page you want to embed
  2. change the width and height to meet the need of your post (650 px works best for the default post width of my blog)
  3. 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.

Related posts:

Free online courses available year-round
If you are interested in digital content production skills, check out our library of free online courses, which include audio slideshow storytelling, writing for the web, interactive mapping, data visualization, web metrics and more. Follow this link for course schedule and enrollment instructions.

Follow me

Mu Lin

Blogger at MulinBlog
Dr. Mu Lin is a digital journalism professional and educator in New Jersey, United States. Dr. Lin blogs about digital journalism education and offers free digital journalism courses at MulinBlog Online J-School, which is a free, open, online program for people seeking web-based training in digital content production.
Follow me

About Mu Lin

Dr. Mu Lin is a digital journalism professional and educator in New Jersey, United States. Dr. Lin blogs about digital journalism education and offers free digital journalism courses at MulinBlog Online J-School, which is a free, open, online program for people seeking web-based training in digital content production.
This entry was posted in Writing for the web. Bookmark the permalink.

26 Responses to How to embed a “live” web page in WordPress blog posts

  1. mycaddisfly says:

    How or can I increase the visible size? It works however it is hard to read

  2. Pingback: How To Embed Any Web Page Inside a Website Article | Social Media k-12 | Scoop.it

  3. Pingback: How To Embed Any Web Page Inside a Website Article | Mobile Websites vs Mobile Apps | Scoop.it

  4. Pingback: How To Embed Any Web Page Inside a Website Article | ITyPA première approche | Scoop.it

  5. Tyrone says:

    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.

  6. Edsbali says:

    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/

  7. Pingback: How to embed a web page in a WordPress blog pos...

  8. nicehero60 says:

    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.

  9. Pingback: Embed your listing gallery into your blog posts. | Seattle Home Photography | Real Estate & Architecture

  10. Nicholas says:

    How about flexible/full width?

  11. mentor081 says:

    please help me for embedding a webpage in my free wordpress blog webpost.i desperately need it.

  12. Cristina says:

    Thanks A Lot i can Successfully did it .

  13. heydmh says:

    I love this website! I learn so much and I have been significantly improving my own blog. Thank you!

  14. ajsmith988 says:

    OMG THIS IS AWESOME! thank you so much for the helpful tip!

  15. Pingback: How To Embed Any Web Page Inside a Website Arti...

  16. Pingback: How to embed a web page in a WordPress blog pos...

  17. oorvani says:

    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.

  18. nikki says:

    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?

  19. Gamal says:

    i tried to embed onedrive.com but it did not work

Leave a Reply