Weebly Embed Google Drive Document

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 we’ll upload a document. Click the upload button.

Click on the Files option from the menu options.

3


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


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


Click on File in the menu. Select Publish to the web from the File menu options.

6


We want to embed this document in a Weebly page, so click the embed option.

After selecting embed, click the Publish button.

7


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


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


Select Standard Page. I’ve named my page Schedule and selected the no header option.

10


Click the save & edit button. Drag the embed code module onto the page.

11


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


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


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


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


Click the publish button. Click the link to your site.

16


Click on the schedule page to see the embedded document.

17


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.

I’ll 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

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


© 2014

xx

Copyright

©Copyright 2014 by Alex ReyesCover 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.

http://creativecommons.org/licenses/by-nc-nd/3.0/

http://creativecommons.org/licenses/by-nc-nd/3.0/

Weebly Embed Google Drive Document

Documents

Transcript of Weebly Embed Google Drive Document