Breadcrumb

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/vie…" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

    The screen for Google forms might look something like the following:
    Get Embed HTML from Google Forms editor
     
  2. Open the page where you want to embed the code.  Switch the text mode to "Advanced"
    Body
     
  3. 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:
    Press the source button to reveal raw html, position the cursor, and paste the iframe
     
  4. 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.
    Content embedded but scrollbar appears.  Need to adjust iframe height
     
  5.  Edit the page, click on the iframe within the page, and press the iframe button in the editor
    Edit the page, click on the iframe in the page, and push the iframe button in the editor
     
  6.  Adjust the height component to be large enough to reveal all the content in our iframe.  In this case we will set it to 800.
    Adjust the height component to be large enough to reveal all the content in our iframe.
     
  7.  Save the settings and save the page to reveal the changes.
    Save the settings and save the page to reveal the changes.

 

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.