How to embed a web page in a WordPress blog post

There are times you need to show a “live” web page in your post, not just a screen shot of that web page. With an embedded web page, you can use your 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 with the default post width for my blog)
3. copy and paste the tweaked code into the HTML editor of your post

Here’s the tweaked code to embed CNN home page (Remember, you need to paste the tweaked code in the HTML 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 HTML 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 web, 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 HTML 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 an HTML tab next to the “Visual” tab, click the HTML tab and you are in HTML editor.
• This is important: once you are in HTML 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. (for this post, I switched to the HTML editor after I typed this last line in Visual editor and pasted the codes for the two demos in the HTML editor)
• 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 HTML editor.

Related posts:

• Embed video and photo in Google maps: A beginner’s guide
• infogr.am vs. Google Fusion Tables: A comparison
• Improvements made to the free data visualization tool, infogr.am
• Comparing two data visualization tools: Tableau Public and Infogr.am
• Timeline tools for news reporting have rooms for improvements