Embedding External Content in a Page

Most web services like Twitter, Facebook, YouTube, Google Forms, Flickr, and others allow you embed content from your account on their website into an external web page.  This is most often done using something called an iFrame.  This page is going to show one example embedding a Google web form onto a page.  The same idea can be used for any of these other services.

Steps

1. Get the "Embed Code" for the web service you want to include on the page.  Each application will be different but they will usually include the phrase "embed html" or "embed code" somewhere on the editing interface for the application.  It will provide you with a "snippet" of html you can use that will likely be an iframe.  Here is the example for our web form we are going to embed.  You copy this code into your computer clipboard (e.g. select text and press Ctrl-C on a PC or Cmd-C on Mac):

   <iframe src="https://docs.google.com/a/geneseo.edu/forms/d/e/1FAabcdefghijklmnop/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

   The screen for Google forms might look something like the following:
   

2. Press the source button which will remove the rich text editor and display the page's raw html.  Position the cursor in the page where you want the content to appear and then paste it into the page:
   
    
3. Press save to reveal the page with the embedded content. Note that in our example the page appears cut off at the bottom.  There is actually a vertical scroll bar that would reveal the remaining content at the bottom, but this is not desirable for our web page.
   
    

Additional Notes

• You need to know a little about HTML in order to position the iframe or other embed code within your page, but this is normally fairly easy to figure out based on the content. You can, however, also create your iframe initially using the iframe button.  Just paste the individual pieces (e.g. url, width, height, etc.) into the corresponding fields of the iframe editor.  This may be easier if you prefer working within the rich text editor.
• Most external web services will provide HTML code to embed in your pages using iframes. This technique should, however, work for other types of web code as well including javascript.