Embedding

Google Sheets Google Docs Google Calendar External Webpages

Note that this page is a good example of Jump Links, i.e., menus to navigate within the page. Edit the page and look at the heading HTML for the above Jump Links.  Jump Links are discussed more later. 

Embedding is useful because it enables you to put something on the page that can be changed outside of the current webpage, and it will be updated every time it is loaded or refreshed. Someone else could control the embedded item, and it will update automatically. 

Sheets, Docs, and the Calendar are read-only. So the changes to the document outside of the page will be updated on the page whenever the page is updated. While the viewer cannot make changes, the links will work. 

The webpage embed is whatever the actual page is. Note here the page is our link to get photos for the website. And just like if you were to go there, in the embed of a website, it is an active version of the current website, so you can select certain images and download them. 

Google Sheets

Google Sheets     Google Docs     Google Calendar     External Webpages

 

To embed a Google Sheet, you need to get the iframe code from the application. The iframe code looks similar to this;

<p><iframe height="400" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQS-Ym6GgT2X1xwnukp-i4uzMphkCm_IxRi23l2OgYxnp5WsxB2aRQrSCiWv-5cZuIpMJq9W9jLBDyB/pubhtml?gid=2096197449&amp;single=true&amp;widget=true&amp;headers=false"></iframe></p>

Where the <p><iframe src="URL"</iframe></p> are necessary. The only parameter that you are likely to use is height. This may or may not be present. If it is not, you may add it. This controls the height of the embedded sheet on the webpage.

For Sheets, go to 'File/Share/Publish to Web' then pick the Embed option. From the drop down you can select the entire workbook or just select one sheet. This will give you a code like the one above. Copy that code. Once you have the code, you have to embed it into the page. To do this you must go to the source code by clicking the 'Source' option in the Header. Then paste the code there. If there is already code from having typed something you can still add this code either before a <p> or after a </p> depending on where in the page you want it to go.

 

Google Docs

Google Sheets     Google Docs     Google Calendar     External Webpages

 

For Documents, you go directly to 'File/Publish to Web', there is no File/Share option. After you select the Embed option you then must click on the Publish button. This will give you the iframe embed code.

Google Calendar

Google Sheets     Google Docs     Google Calendar     External Webpages

To get the embed code for a calendar, open the calendar and click on the gear icon in the upper right corner. From the drop-down choose settings. In the left-most pane, scroll down until you see the calendar you want and select it. Now in the right pane, scroll down until you see a box containing the embed code. Copy that and place it in the source code for the page.

 

External Webpages

Google Sheets     Google Docs     Google Calendar     External Webpages

To create an embedded webpage copy and paste the following code into the source:

<p><iframe height="400" src="URL"></iframe></p>

where the URL of the page replaces the URL in the iframe.

Shoreline Events

Note that Shoreline requires a login. This page requires the user to sign in, and the page will be break when embedded. If you click on the above link, you will see what the page was supposed to look like.