Embedding editable Google docs

by Tim N  •  24 Oct 2013  •  Pedagogy, Showcase

This article provides step by step instructions detailing how to embed an editable Google doc or spreadsheet into an Ultranet page. There is a small amount of html involved in this process, but it does not require any knowledge beyond copy and paste.

The example used is creating a shared spreadsheet to accumulate and graph results from a field trip (Dept of Conservation Wet Feet teaching resource). The Ultranet Resources, Media Gallery and Discussion widgets are then introduced alongside the spreadsheet to support the analysis of the results, and bring the discussion to life.

http://www.doc.govt.nz/Documents/getting-involved/students-and-teachers/themes/wet-feet/wet-feet.pdf

Setting up your document

The first thing you will need is a Google spreadsheet (created at http://docs.google.com). A spreadsheet is used in the example, however the embedding process is the same for a Google Doc. Create the table for the results. In this case a graph was added as well to show the results.

The spreadsheet will be set up to allow editing without having to login to Google Docs, but only by people who have the specific link.

Google pic1

To change the sharing settings click on the ‘Share’ button on the upper right-hand corner of the page.

A box will then appear which will have the Permissions listed. The default status will be ‘Private’. Click on the ‘Change…’ link.

Google2

Click the button by ‘Anyone with the link’. Then select ‘Can edit’ from the drop down list next to ‘Anyone (no sign-in required)’. Click ‘Save’.

Google3

You’ll now be returned to the previous Sharing Settings page. This will provide you with a ‘Link to share’. Copy and paste it into notepad or another text editor so that you can use it later.

google4

Creating the embed code

Before you set up your page widgets and embed your spreadsheet you’ll need to create the correct code to paste into your page. Open the text editor where you pasted your Google Docs link.

Paste this code under the link:

<iframe height=”620” align=”middle” width=”100%” border=”0” src=”GOOGLE DOCS LINK HERE”></iframe>

Now copy your Google Docs link that you posted previously and paste it in the part of your code to replace the text marked ‘GOOGLE DOCS LINK HERE’.

google5

Embedding the spreadsheet in your page

The final step is to embed the code you just created into your Ultranet page.

To do this, go to your page and click on the edit button. Select ‘Edit Page Content’ and then choose the <>HTML tab at the bottom.

google6

google7

Click the <> button and then copy and paste the code you created in your simple text editor. When you are finished click ‘Save Changes’.

google8

The editable Google document will now be on your page and ready to go. Students can enter their team data and see the changes in real time, then view the photos and engage in a discussion around the results.

google9