Embedding Google Docs with the New Version

Ok, let me first say, that I do not profess to be a blog or tech expert, but I can usually figure things out.  I originally learned how to embed a Google document into my posts from Kristen at Ladybug Teacher Files.  Her amazing tutorial taught me how to embed files using the old version of Google docs.


Our friends at Google have since completely done away with the old version.  No matter how many tutorials I read/watched or how many times I tried to make it work with the new Google docs, it just wouldn't.  I was trying to post the activities that went with the Christmas in July Picture Book Exchange (this post), and I couldn't let it go.  


I know lots of people are using Scribd now rather than fight with Google docs, but I just didn't want to mess with setting up one more thing :)  So I decided to do trial and error with the HTML code that the old version of Google docs generated for me in the past, and I believe I have a bit of code that may be helpful to others.


Here's my humble attempt at sharing, via a tutorial, the process I used.


Obviously, start your post, and then switch over to the "Edit HTML" tab.  Copy and paste this code into your post. I leave the highlighted portions for now.


<iframe frameborder="0" height="560px" src="https://docs.google.com/viewer?a=v&amp;pid=explorer&amp;chrome=false&amp;embedded=true&amp;srcid=A PORTION OF YOUR GOOGLE LINK GOES HERE&amp;hl=en_US" width="100%"></iframe>


In a new tab, open up your Google docs, and check the box next to the document you want to embed.  This will bring up the properties of the document on the right sidebar.

Next, click on the "Settings" link in the Sharing section on the right sidebar.

It will bring up this box:

If you have not already defined the sharing for the document, click "Change" and select either "Anyone who has the link can view" or "Public on the web."  You must choose one of these options to be able to embed the document.

The link you need will be highlighted at the top of the box. Copy this link, and back to Blogger we go!

Paste this link underneath the copied HTML code, so it looks like this

<iframe frameborder="0" height="560px" src="https://docs.google.com/viewer?a=v&amp;pid=explorer&amp;chrome=false&amp;embedded=true&amp;srcid=A PORTION OF YOUR GOOGLE LINK HERE&amp;hl=en_US" width="100%"></iframe>

https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B0I1MYR8aYMPMWVjNGYxNTgtNzU4My00NjgxLWI3ZDgtYzA0MWVjN2YyNjk4&hl=en_US

The section highlighted in yellow is what needs to be copied from Google generated link, and pasted into the highlighted section of the HTML code provided.  If needed, you can also adjust the height in the first line of code, highlighted in green. 560 works nicely for landscape documents, and roughly 675 work nicely for landscape.


Click on the "Compose" tab at the top of your post to see how the embedded document looks, and make any height adjustments necessary.


Clear as mud?  I hope this is helpful to those struggling to embed Google docs with the new version!