PBworks User Manual

 

Embed Google Documents

Page history last edited by John-Peter 7 mos ago

  1. Managing Your Google Documents
  2. Embedding a document
    1. Regular Documents
    2. Spreadsheets
    3. Presentations
    4. Forms
  3. Examples

 

Note: This requires that you create a free Google acccount at http://docs.google.com/.  If you already have an account with another Google service, like Gmail or GTalk, then you can use that account to log in.

 

Managing Your Google Documents

 

When you create documents in your Google Documents account, they'll show up in your Document manager when you're logged in.  With Google Docs, you can create Spreadsheets, Presentations, Documents, and Forms.

 

 

By clicking on the document, you'll open them in a new window to edit them (or in a new browser tab if you're using a tabbed browser.) 

 

Embedding a document

 

There are two steps that you must complete before a Google document can be shown on your workspace:

  1. Publish:  You must publish the document so that it is publically available.

  2. Copy or create the code to embed:  This is code similar to Youtube's embed code, but it links directly to the publically available Google Document

 

There are different methods for embedding a Google document, depending on the kind of Document you have created.  Click below for the instructions for the different kinds of documents.

 

Regular Documents

 

  1. To publish a Google Document, click the blue share button in the upper right corner of the document window.  Select "Publish as web page..."

  2. You'll see the published status of the Google Document.  Click "Publish document" to make the document, in its current form, the published document.  You can also check the "Automatically re-publish" option to make the document automatically update whenever you make changes to it.

  3. Once published, the screen will show a link that anyone can use to access the contents of your document.  If you've disabled automatic re-publishing, then you must manually re-publish the document every time you want people visiting the link to see the most recent changes in the document.

     

  4. Copy the text of the link that your Google Document is publically excessible at.  In the above example the text is: "http://docs.google.com/Doc?id=djpcrnm_18hbnbw4dx".  Select this text and copy it to your computers memory.  (Ctrl+C on PC, Command+C on Macs).
  5. Next, open a text editor, like Notepad or TextEdit.  Paste the link into the text editor.
  6. Go to the PBworks page you want to embed the Google document into, and go into edit mode.  Click the Insert Plugin button.

  7. Select the HTML/Javascript plugin from the PBworks magic category.

  8. Copy and paste this code into the plugin, but don't click Preview.

    <iframe width=500 height=500 scrolling="no" src=" ">Loading...</iframe>

     

  9. In the space between the two quotes after the src attribute in the iframe code, paste the link of your Google Document.  This should still be in the text editor.  Below is the example link in the same iframe HTML.  You can also edit the width and height values to make the embedded frame larger or smaller.

    <iframe width=500 height=500 scrolling="no" src="http://docs.google.com/Doc?id=djpcrnm_18hbnbw4dx">Loading...</iframe>

     

  10. Finally, click Preview, and then OK.  Save the workspace page.

     

Your document should now be fully embedded into the PBworks page. Remember, if you make any changes to the document, those changes will not be reflected in the public page until you re-publish or until the document automatically republishes.

 

 

Spreadsheets

  1. To publish a Google Spreadsheet, click the blue share button in the upper right corner of the document window.  Select "Publish as web page".

  2. You'll see the published status of the Google Spreadsheet.  Click "Publish document" to make the document, in its current form, the published document.  You can also check the "Automatically re-publish" option to make the document automatically update whenever you make changes to it.

  3. Once you click "Publish now" the window changes to something like this:

  4. Click on "More publishing options".

  5. In the window that pops up, select the HTML to embed in a webpage option as seen below.  You can also use the drop down sheet selector to make only a certain sheet embedded on the page:

  6. Click the "Generate URL" button.  It will use whatever options you've set to generate the embed code for the spreadsheet.  Select all of the embed code text, and copy it (Ctrl+C for PC, Command+C for Mac).

  7. Go to the PBworks page you want to embed the Google spreadsheet into, and go into edit mode.  Click the Insert Plugin button.

  8. Click on the HTML/Javascript button in the PBworks magic category.

  9. Paste the embed code you copied into the plugin.

     

  10. Click Preview, and then OK.  Save the workspace page.

     

 

Your spreadsheet should now be fully embedded into the PBworks page. Remember, if you make any changes to the spreadsheet, those changes will not be reflected in the public page until you re-publish or until the spreadsheet automatically republishes.

 

Presentations

  1. To publish a Google Presentation, click the share button in the upper right corner of the document window.  Select "Publish as web page".

  2. You'll then see the Publish status of the presentation.  By default, the presentation is unpublished.  Click the "Publish now" button to make the presentation available to others.

  3. Once published, the document is available to anyone on the internet.  In this window, you'll see a text box, with HTML code inside.  You can change the size of the presentation by clicking on the dropdown box below the words "Select Presentation size:".  Once you've set the size you want, select all of the HTML code, and copy it to your computer's memory (Control+C for PC, Command+C for Mac).

  4. Go to the PBworks page you want to embed the Google spreadsheet into, and go into edit mode.  Click the Insert Plugin button.

  5. Click on the HTML/Javascript button in the PBworks magic category.

  6. Paste the embed code you copied into the plugin. 

  7. Click Preview, and then OK.  Save the workspace page. 

 

Forms

 

Special note about Forms:

Forms are special documents you can make that are designed to be embedded into web pages, like PBworks.  These kinds of documents allow users of sites to input their own data, and the information is sent directly to you. 

 


     

 
 This is what will be embedded into the page, a form users can input data into.    This is what appears when the owner of the form clicks on the form in their document manager.

 

If you create a Form, clicking the Form in the Document Manager will just show the results of the Form.  To edit the contents of the form, the fields that the user inputs data into, click on Form, and then select edit form:

 

 

Embedding a Form into a PBworks page

  1. Click on the form in the Document manager to open the data sheet.
  2. Click on Form, and then "Embed Form..."

  3. Copy the embed text that appears by pressing Control+C (Command+C on Mac).

  4. Go to the PBworks page you want to embed the Google spreadsheet into, and go into edit mode.  Click the Insert Plugin button.

  5. Click on the HTML/Javascript link in the PBworks magic category.

  6. Paste the embed code you copied into the plugin.

  7. Click Preview, and then OK.  Save the workspace page.

 

Your form should now be fully embedded into the PBworks page.

 

Examples

 

Document Spreadsheet

 

 
Presentation Form

 

 

 

 

Printable version
 
Anonymous Create an account or Log in