Friday, December 6, 2013

How to Embed a Google Doc in a Blog Post

Ahem! Announcing a temporary break in crafty type stuff for a techy post!! We will return to the regularly scheduled material shortly!! :)


We are big fans of Google products and open source software in my family.  (FYI open source means that the "code" behind the software is available to anyone, and can be modified and redistributed.  This means that it is FREE! Examples are Libre/ Open Office, Inkscape, Gimp, etc. that replace pricey word processing and editing software. It's awesome.) I especially love Google Docs (not technically open source, but still free if you have a gmail or google account), and I use it for tons of stuff, including sharing many of my patterns which are free here on the HSHb blog.  My little brother Tayler made my day last week when he casually mentioned that he figured out a way to embed a google doc in a blog post.  Wha?!  For those of you who use blogger, you know that there just isn't any good, easy way of embedding documents right into a post, which is frustrating.  Anyway, Tayler graciously agreed to write a tutorial on how to do it, which I was eager for, so I have something to refer to next time I want to share a pattern here! :)  So thanks, bro!

Hey everyone! I’m Rochelle’s little brother, Tayler. We were talking the other day, and I mentioned that I had figured out how to embed Google Docs into my portfolio blog, and she mentioned that she hadn’t been able to figure that out before. So here’s the tutorial for the not-so-obvious way to embed your google docs into a web page, blog post, etc.


Step 1
When you are within the Doc that you want to embed, go to File>Publish to the Web


Step 2
Click on “Start Publishing.” Leave the checkbox checked, it makes it so that if you need to make changes, you can, and you won’t need to go through this process all over again.
Step 3
A box will show up asking if you really want to publish it. Click OK. This box will show up after that. You will want to copy the embed code in the box.


Step 4
Here’s the more technical part. In whatever publisher you’re using, go to the HTML, and paste the embed code. Before you save it, there’s one more step. The code as is will give you a tiny little box that won’t show the entire document. To fix this, you have to add a little coding. DON’T WORRY! It’s really easy. The code below is similar to what you will have.
<iframe src="https://docs.google.com/document/d/1sv8C2GRvQkERBJfbu5upep5TLQs9lU3Yctirx8CwRTU/pub?embedded=true"></iframe>


Here are the changes you need to make:


<iframe width=“100%” height=”500”
The numbers in the quotation marks can be adjusted to fit your needs. They represent pixels. The 100% means that however big the publishing area is, the document will stretch to fill up the entire width. You can do it with the height too.


Embedding a Word Document or PDF file that has been uploaded to Google Drive



These Steps are much simpler. If you have uploaded a PDF or other file to Google Drive, just open the file in drive, and click File>Embed Link.

This box will show up, and all you need to do is copy and paste the embed code. You’ll notice that the width and height values are already there, and you can still change the numbers in the quote marks as desired.

One last thing- make sure that your sharing options are set to at least allow people- anyone who has the link to view the document, otherwise no one will be able to see your document (this applies whether it’s a Google Doc or an uploaded document).


Thanks Tay!  You're awesome!  I will totally be using this in the future, and I hope this will be helpful to some of you readers/ bloggers too!

Related Posts with Thumbnails