Embedding a PDF From Drive into a Blog

Embedding PDFs in a blog can be a great way to share information, especially with parents and the community. These days Google Drive makes this easy: when you’re viewing a PDF you can easily get the embed code and drop it into you blog. But, the code includes a preview pane and no options for zooming, so it’s not idea. The default Google Drive PDF embed code ends up creating this:

Getting the embed code is easy, but the result is in no way ideal. In fact you’ll notice that most of the first page of the PDF you can’t even see. Fortunately, there’s a better way. It take a little code (really, just a little), but it’s very doable.

The embed code Drive gives you looks like this (it’s what I used above):

<iframe src="https://docs.google.com/a/bpsk12.org/file/d/0B3xoQi_oa7_hU2J5S1RQbFdqS3c/preview" width="580" height="480"></iframe>

What we need to do though, is to use this code instead (it’s way better, for lots of reasons):

<iframe src="https://docs.google.com/viewer?srcid=[put your file id here]&pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="580px" height="480px"></iframe>

I know, the code looks a little intimidating, but most if it we can ignore.

There are only three things in the code we need to worry about:

  1. The file id.
  2. The height of the frame.
  3. The width of the frame.

The file ID for your PDF (one that is already in Google Drive) can be found in the PDFs web address. When you open a PDF, it’s the garbage-looking piece of the URL (it will be between forward-slashes, “/”).

The file ID is highlighted in yellow.
The file ID is highlighted in yellow.

In this case it’s the 0B3xoQi_oa7_hU2J5S1RQbFdqS3c

That id will need to be placed into the code in place of the “[insert your file id here]”. Make sure to get rid of the square brackets in the sample code.

Height and width are exactly that, height and width. You can change these numbers (they’re measured in pixels) to change the size of the frame that you’re PDF is enclosed in.

And what does it look like? If we take this code (notice that I’ve inserted my file ID)

<iframe src="https://docs.google.com/viewer?srcid=0B3xoQi_oa7_hU2J5S1RQbFdqS3c&pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="580px" height="480px"></iframe>

and put it into a blog (remember, when you’re embedding html code you have to use the HTML window of the editor, not the Compose window), you get this:

This is so much better. It zooms out so that the PDF is displayed page-width. There’s no preview pane. You can scroll down if there are multiple pages. There are zoom options if you want to zoom in. All the things we want when we embed a PDF.

A little code, and all the sudden that PDF becomes so much more user-friendly. But don’t forget, in Drive if you’re embedding a PDF you need to make the file public first, otherwise it won’t embed correctly. 

Note: I didn’t put this code together myself. I found it on a Google forum post here, from 2013, from user Yajeng.

Leave a Reply

Your email address will not be published. Required fields are marked *