How to Embed a Google Doc

From Open Source Ecology
(Redirected from Embedding Google Docs)
Jump to: navigation, search

General

To embed a google doc - go to File->publish and then select 'html to embed in a page'. Then cut and paste this URL into the wiki in between <html> and </html> tags.

To embed an editable link, just copy and paste (into a wiki page) the URL from the top of the Google Doc page.

Permissions

If you create a new doc, always set permissions to open editing so anyone can edit the doc even without signing in. This is the standard for broad collaboration, and must be followed unless content violates privacy.

Iframe

<iframe src="/default.asp" width=100% height="200"> </iframe>

How to Embed a Specific Page of a Google Presentation

Use #page as, for example, in #3 in <html><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vShiXR-dpEfn5BVMK88BM0RAIKGIFlW2c-t5uYmV8ne27Y8LYvhWnb1zbb3AvbYdWl28W_ixUc9Hys2/embed?start=false&loop=false&delayms=3000#3" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></html>

That goes to the 3rd page in the presentation. #3 is the last thing in the URL of the google doc.

How to Prevent Google Docs from AutoLoading on your Page

One way to do it is to load a simple image and add buttons to change the image to your google doc.

  1. Replace the first url with that of your google doc
  2. For multiple docs on the same page, the word test needs to be unique for each google doc. Increment like follows for every instance of the word test per google doc.
    1. test1, test2, test3, etc.


Code

Replace the first link with that of your google doc

<html> <input type="button" onclick="test.location.href='https://docs.google.com/presentation/d/e/2PACX-1vShiXR-dpEfn5BVMK88BM0RAIKGIFlW2c-t5uYmV8ne27Y8LYvhWnb1zbb3AvbYdWl28W_ixUc9Hys2/embed?start=false&loop=false&delayms=3000#3';document.getElementById('test').frameBorder=1" value="Load Google Doc"> <input type="button" onclick="test.location.href='https://upload.wikimedia.org/wikipedia/commons/a/a6/Google_Docs_Editors_logo.png';document.getElementById('test').frameBorder=0" value="Exit Google Doc"> <iframe src="https://upload.wikimedia.org/wikipedia/commons/a/a6/Google_Docs_Editors_logo.png" frameborder="0" name="test" id="test" width=100% height=600></iframe> </html>

Result

This gives the following: