How to embed a PDF in Blogger [Updated]
I recently needed a way to embed a PDF file into a Blogger post. Simply put, sometimes when I'm around the internet it's easier to create a PDF using Chrome's print to PDF function versus a screenshot which might not catch the whole page.
So I searched the interwebz. There were many websites purporting to know how to embed PDFs as view-able media by uploading the PDF to free hosting sites or Google Pages (Sites) or a variety of other avenues to approach this problem.
Most of them relied on Google Drive and getting a link to the PDF file from the share function and linking to the file on Drive. But that's not what I wanted to do, I wanted the PDF embedded in the blog post just like a picture or video. Unfortunately, you cannot load a PDF using the image uploader tool in Blogger. File type not supported and all that.
However, it's a lot easier than the internet would have us believe.
Tools Needed:
- PDF file
- Google Drive (Gmail account)
- Blogger (Gmail account)
- Basic Computer Skills
The 6 Steps to Happiness:
- Upload the PDF file to Google Drive. This can happen a number of ways, the easiest of course, is to use the Drive desktop folder with a simple drag-and-drop. The second easiest is to open Drive in the browser and use the upload tool there. Or, just FOLLOW THIS LINK
- Open the PDF file you're looking to embed. Down in the lower right hand corner will be a OPEN button. Click on that pretty blue (as of this posting) button. The PDF should open as a PDF with a series of Menu options under the file's name: FILE, EDIT, VIEW and HELP.
- Click FILE. Go ahead and click it, you won't hurt anything. About mid-way down there will be an option to "Embed this PDF FIle." That's what you're looking for.
- Select "Embed this PDF File" and a window will pop up with some iframe code. Highlight the code and copy it. The code shouldn't be more than a couple of lines or so. You can also customize the height and width of the PDF here.
- Now head on over to Blogger and create a new post. Under the Blog's name are Compose and HTML. Choose HTML and paste the code.
- Save. Preview. Open Blog. Whatever. It should be right there.
You can then create a post before or after the PDF, or just leave it as a PDF.
[edited to remove YouTube video that no longer exists]
[EDITED: to add additional steps because Google likes messing with things]
For some reason Google has decided to change how Drive works and where the embed code is for embedding a PDF into a website, or Blogger. Now, when you click on the PDF in Drive you no longer have a blue Share button in the lower right hand corner. Instead, you have to "pop-out" the PDF using the square with the arrow pointing out located at the upper right hand side of the PDF previewer. Once you've clicked that a new (in my case) Chrome tab will open with the PDF file that looks nearly identical to the original preview. Except, this time, when you click the three vertical dots next to the Share option, Embed Item will be available. Click that to get the iFrame code for embedding.
[EDITED: to add additional steps because Google likes messing with things]
For some reason Google has decided to change how Drive works and where the embed code is for embedding a PDF into a website, or Blogger. Now, when you click on the PDF in Drive you no longer have a blue Share button in the lower right hand corner. Instead, you have to "pop-out" the PDF using the square with the arrow pointing out located at the upper right hand side of the PDF previewer. Once you've clicked that a new (in my case) Chrome tab will open with the PDF file that looks nearly identical to the original preview. Except, this time, when you click the three vertical dots next to the Share option, Embed Item will be available. Click that to get the iFrame code for embedding.
Comments