Embed Live Google Documents

Alex Reyes
LESSON 1
Google Document Embed Link
Most teachers in the district are using Weebly to host their
classroom site. Weebly is very easy to use. In other lessons we
have learned how to embed videos and PDF documents into a
page. Embedding PDF documents is very useful for teachers
that have created a variety of documents with specific formats
and want to retain the look of their documents. A major
drawback with embedding PDF documents is that they cannot
be updated live. The original document needs to be updated
then exported as a PDF. This PDF then needs to be uploaded
to replace the existing PDF.
Embedding Google Drive documents brings together the ease
of posting documents with specific formatting requirements
and the ease of updating documents without having to export
a PDF version. In this lesson we will learn how to embed
Google Drive documents into Weebly. Google drive
documents can be easily updated and these updates
automatically appear on the embedded page in Weebly.
Teachers can log into the district email to access the Google
Drive portal for district teachers. Click on the Google tile.
1
Weebly: Embed Google Drive Document
To access your Google Drive click on the Apps selector menu. Click on the Google Drive App.
2
Weebly: Embed Google Drive
We can use a document that is already in your Google Drive or
you can upload a document. In this example well upload a
document. Click the upload button.
Click on the Files option from the menu options.
3
Weebly: Embed Google Drive
Ill select a Word document that contains my class schedule.
The document will upload and appear in your Google Drive
library. We need to convert this document into the Google
Drive format.
If the document was created in Google Drive, you wont have
to go through this process but it is good to know if you ever
encounter a situation where you need to upload a document
created with Microsoft Office.
Click on the uploaded document.
4
Weebly: Embed Google Drive
A preview of the document will display. Click the open button
above the preview.
You will be prompted again to open the document. This
process will convert and open the document for editing.
5
Weebly: Embed Google Drive
Click on File in the menu.
Select Publish to the web from the File menu options.
6
Weebly: Embed Google Drive
We want to embed this document in a Weebly page, so click
the embed option.
After selecting embed, click the Publish button.
7
Weebly: Embed Google Drive
A message will prompt to make sure you want to publish this
document, click ok.
Google Drive will generate the embed code information for
the document. Copy this code into your computers memory.
On Mac press Command C or on Windows press Control C.
8
Weebly: Embed Google Drive
Login to your Weebly site. In my example, I will create a page
to display the Schedule. Click on Pages in the menu.
Click on the Add Page button.
9
Weebly: Embed Google Drive
Select Standard Page.
Ive named my page Schedule and selected the no header
option.
10
Weebly: Embed Google Drive
Click the save & edit button.
Drag the embed code module onto the page.
11
Weebly: Embed Google Drive
Click in the custom HTML box.
The HTML box will open to edit the HTML contents. Erase
the click to set custom HTML text and paste the code we
copied earlier by pressing Command V on Mac or Control V
on Windows.
12
Weebly: Embed Google Drive
We need to make some modifications to this code so it
displays properly. Click once after true to insert some
additional code.
Press the space bar once and type width=800px. This will
set the width of our embed box. Without this width option, the
embedded document will only display in a small box.
13
Weebly: Embed Google Drive
After the width=800px press the space bar once and type
height=500px.
Press the space bar once after height=500px and type
frameborder=0. All embedded media automatically has a
frame placed around it. This last bit of code will remove the
frame border.
14
Weebly: Embed Google Drive
Click on the center align button in the custom HTML menu.
Click once on an empty area of the page.
There is no preview of your document. To see the document
we need to publish.
15
Weebly: Embed Google Drive
Click the publish button.
Click the link to your site.
16
Weebly: Embed Google Drive
Click on the schedule page to see the embedded document.
17
Weebly: Embed Google Drive
LESSON 2
Update Document
Go to Google Drive. Edit the Google Drive version of the
document. At the beginning we uploaded a Word document.
Google Drive converted this document in Google Drive
format. Documents in Google Drive format have the blue
square icon. Click on this document to edit the contents.
Ill make some changes to the document. In this case I need to
change the order of the Monday morning classes.
18
Weebly: Embed Google Drive Document
Ive switched the times for Math and ELAR. Google Drive
automatically saves your changes.
Go back to your Weebly page and click on the Schedule page.
The changes made in the Google Document are reflected on
the page.
19
Weebly: Embed Google Drive
2014
xx
Copyright
Copyright 2014 by Alex Reyes
Cover design by Alex ReyesBook design by Alex Reyes
This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. To view a copy of
this license, visit http://creativecommons.org/licenses/by-nc-nd/3.0/. Every effort has been
made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in
this book is provided without warranty, either expressed or implied. Neither the author, nor any distributors will be held liable for
any damages caused or alleged to be caused directly or indirectly by this book.The author has endeavored to provide trademark
information about all the companies and products mentioned in this book by the appropriate use of capitals. However, the author
cannot guarantee the accuracy of this information.