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):
What we need to do though, is to use this code instead (it’s way better, for lots of reasons):
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:
- The file id.
- The height of the frame.
- 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, “/”).
In this case it’s the
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)
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: