Google Docs

[Rob Bedeaux]

Any document you create in Google can be embedded into your site. This is a great way to embed a spreadsheet, document or presentation and have it automatically update from Google. 

 

 

Step 1

Visit the Google Docs homepage, enter your Google email address and password and click “Sign In” to access your Google document. Click the “Sign Up” button at the top if you do not have an existing account. Google Docs is part of Google Apps, and this product is free for individuals or small teams. Monthly or annual fees may apply for business accounts.

Step 2

Open the Google document you wish to share online, click “File” in the menu at the top and choose “Publish to the Web.” Unless you are the document owner or are a designated collaborator, you will not be able to publish the file.

Step 3

Place a check mark next to “Automatically Republish When Changes Are Made” if it isn’t already checked and you would like the embedded document to automatically update upon making future changes. Because you will be publishing a separate, Web version of the original document, any private or limited visibility options you have already established will not apply.

Step 4

Click the “Start Publishing” button and click the “OK” button when asked if you are sure you want to publish the document. Copy the HTML code in the “Embed Code” box to the computer’s clipboard; you may wish to paste it into Notepad before proceeding. Click the “Close” button at the bottom when done.

Step 5

Paste the code into your website’s editor where you want it to be displayed. The size of embedded spreadsheets and presentation files either already exist in the snippet of HTML code provided or can be selected through a menu option. However, with a standard document, you must add the size of the embedded frame, in pixels, to the end of your “iframe” tag to resize the Google document. Your code should like similar to the following but with your document's URL and desired height and width:

<iframe src="...embedded=true" height="800" width="600"></iframe>

Sample Code

<iframe src="https://docs.google.com/document/d/1MABnF-FLpizvNGndfoQ1OIs0pnqAt3LoQDuh47OCC6k/pub?embedded=true"></iframe>