How to Embed Almost Anything

Digital Literacy: How to Embed Almost Anything

One of the things I look for in a Web 2.0 tool is a built in embed feature that allows users to display live 3rd party content in a blog or website so visitors don't have to leave the page. Fortunately many Web 2.0 tools include an auto-generated embed code that can be copied and pasted into the html or source of a blog or website to display live content, but if a tool doesn't include that feature you can usually use an iFrame to embed the content yourself.




iFrame Code

<iframe src="http://InsertUrlHere" height="1000px;" width="920px" border="1" id="frameName"></iframe>

How To 

1. Copy the  iFrame code above to your clipboard.
2. Click on the button to view the HTML or Source or choose a HTML gadget or widget.
3. Paste the code into the desired location.
4. In a new tab, go to the site where the object you want to embed lives and copy the web address to your clipboard.
5. Paste the URL into the iFrame code to replace the text InsertUrlHere.
6. Save and preview.
7. If you need to adjust the size of your embedded object, simply return to the HTML or Source and substitute appropriate dimensions for height and width. Keep in mind, 72 pixels = 1 inch.

<iframe src="http://InsertUrlHere" height="1000px;" width="920px" border="1" id="frameName"></iframe>

Tip: 

Trying to get the embedded item in a specific location on the page can be tricky. Use the Find Tool to assist with the task.

1. While still in the text editor choose the location you want the embedded feature to appear.
2. Type the word HERE! 
3. Switch to the HTML mode or Source.
4. Use the Find Tool (control + f) to search for text HERE!
5. Place your cursor over the text and paste the embed code there.
6. Return to the text editor to view.