Embed Live Google Documents
Alex Reyes
L ESSON 1
Google Document Embed Link
Weebly: Embed Google Drive Document
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
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 we’ll upload a document. Click the upload button.
Click on the Files option from the menu options.
3
Weebly: Embed Google Drive
I’ll 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 won’t 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.
I’ve 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
L ESSON 2
Weebly: Embed Google Drive Document
Update Document
I’ll make some changes to the document. In this case I need to change the order of the Monday morning classes.
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.
18
Weebly: Embed Google Drive
I’ve 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
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.
Š 2014 xx