How to Embed & Resize a Google Document

Share your ideas with the world using Google documents.

Google gives every Google account holder a free online document storage area. There you can create documents and view them from any computer that has an Internet connection. You can also embed your Google documents inside Web pages. This allows site visitors to view those documents as they browse your website. You have complete control over how big your embedded Google documents appear on your site. Resize them anytime by adjusting a few values in your Web page's style sheet declarations.



.

Instructions

Create a Google Document

1. Visit your Google Docs Web page. If you don't have a Google account, the Google Docs page will prompt you to sign up for a free Google account. After signing up, your Google Docs Web page will appear. This is where you manage your Google documents.

2. Click the "Create New" button at the top of the page, then click "Document." A new document appears in the Google Docs editing window.

3. Type a few words into the document, and press "Ctrl" and "S" to save the document.

4. Click the "Documents" tab at the top of the page to display the Documents page. This page displays list that shows all your documents.

5. Click the "Share" button found in the top right corner of the page, then click "Publish to the Web."

6. Click "Start Publishing," and click "OK." The "Publish to the Web" window opens and displays a text box named "Embed Code."

7. Copy the text that appears in that text box, and proceed to the next section.

Resize Google Document

1. Launch an HTML editor or Notepad.

2. Open the Web page document into which you wish to embed your Google document.

3. Locate the document's "body" section. Right-click any blank area inside that section, then click "Paste." Windows pastes the text you copied into the document. That text looks similar to the code shown below:

   <iframe src="https://docs.google.com/document/pub?id=1yXxz68cRU-W0JQBDdCiPZe8oyUmjijseAdkVunCdffs5IU&embedded=true"></iframe>

   This code creates an "iframe" object inside your Web page. The iframe's "src" value points to your online Google document.

4. Add the following text before the word "src":

   class="googleDoc1"

   Include at least one space before the word "src." The resulting iframe block might appear as follows:

   <iframe class="googleDoc1" src="https://docs.google.com/document/pub?id=1yXxz68cRU-W0JQBDdCiPZe8oyUmjijseAdkVunCdffs5IU&embedded=true"></iframe>

   The "class" attribute points to a style sheet class named "googleDoc1."

5. Paste the following code inside the document's "head" section:

   <style type="text/css">

   .googleDoc1 {height:400px; width:500px;}

   </style>

   This creates the "googleDoc1" style sheet class referred to by the iframe in step four. By changing the class's height and width values, you control the size of your embedded Google document. In this example, the height and width are 400 pixels and 500 pixels.

6. Save your Web page document, and open it using a browser. Your Google document appears in the Web page. Its dimensions match those you set in the style sheet declaration.

Tips & Warnings

• Resize your embedded Google document by changing the height and width sizes in the "googleDoc1 class defined in the style sheet declaration. You can use percentages instead of pixel values to resize the Google document as shown in this example: .googleDoc1 {height:80%; width:90%;}

• This sets the Google document's height to 80 percent of the Web page's height and 90 percent of the Web page's width.

• You do not have to name your class "googleDoc1." Call it anything you like. If you change the name to something else, don't forget to change it in every location that it appears in your Web page document.

References

• Quackit: CSS Height and Width
• Google: Embedding - Google Docs Help

Resources

• Google: Google Docs - Online Documents, Spreadsheets, Presentations, Surveys, File Storage and More