331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.
Blogger Guides

How To Embed A PDF & Other Document Files in Blogger Post

Embed a PDF file inside blogger posts using Google Drive iframe code step by step tutorial.
How To Embed A PDF & Other Document Files in Blogger Post
How To Embed Document Files in Blogger Post
Did you ever wonder about embedding a PDF file inside your blog post? Well, we are going to learn how anyone can embed their PDF file inside blogger blog post itself so your readers do not have to leave your blog to view a PDF file. This feature might be helpful for a lot of people who share PDF files on their blogs. We can accomplish this task using Google Drive.


What is Google Drive?

Answer: Google Drive is a free file hosting service by Google with 15GB of storage which allow us to host our files for free. Even you can host a website on it too. This is little intro about Google drive and without taking much of your precious time, let us begin the process.

Note: I used Google Chrome Browser.


Step 1) Sign-in into your Google Drive Account

Just use your Gmail address to sign into Google Drive Free file hosting service.

Also Read:
How to forward GMAIL Emails to any other email account? 
How to create a HTML Signature in Gmail with social icons?

Step 2) Uploading your PDF file From Your PC on Google Drive.

One you are logged in, just click on Upload Button > then Files Button.

Click on Upload Button

Step 3) Choose your PDF file from your PC

Now You will be asked to choose what files you want to upload from your PC so just locate your PDF file, select it and press "Open button" in windows dialogue box as seen on below screenshot.

Choose your Files To Upload

Step 4) Let The Upload Process Complete

As soon as you hit open button, you will see an Uploading box appears. Let the file upload and wait until it shows Upload Complete as you can see in below screenshot. Upload time depends upon the Size of your PDF file and Speed of your Internet Connection.

Uploading Files

Step 5) Change Its Sharing Settings

Once its Done, just close this box and wait until your PDF file pops up in Google Drive.  Then right click on its name > then click on share link > then again click on the share link. See the screenshot below.

Right Click On Ebook File Name

Step 6) Click on Advanced Link

When you click on Share button, a dialog box appears with no options to change sharing settings of our file. So click on the little "Advance" link on the bottom left side. See this screenshot below.

Click On Advanced Link

Step 7) Click On "Change" Link

After clicking on advance link, we get access to change "Sharing settings". By default this file is Private, means visible to you or those to whom permission is granted. All we have to do is make it "Public on the web" so click on the "change..." link as you can see below image.

Click On Change Link

Step 8) Make It Public On The Web

This time we get three option to share our file. We need to select very first option which is "Public on web" so select it and hit save button.

Select Public On The Web

Step 9) Open PDF File With Google Drive Viewer

So after we are done with sharing setting, now right click on File link again then click on "open with" and select "Google Drive Viewer" and let the PDF viewer load.

Open With Google Drive Viewer

Step 10) Get Code To Embed PDF File

After your PDF file is opened in Google Drive Viewer, just click on "More Actions" link on top. Just hove over top of the ebook and you will see a navbar visible to you. Then click on "Embed item" link as you can see below.

Click On More Actions Link

Step 11) Copy The Given Code

Simple step it is :) just copy the code given to you in a dialog box like as below. Then save it to notepad.

Copy The Code

Final Step: Paste Code Inside HTML Editor of Blogger Post

Did you copy this code? Ok so now we are done with Google Drive and its time to actually put this code into work on our blogger blog. Log back to your blogger account, create a new post or open any old post where you wanted this PDF file to be embedded. Select HTML editor of post and paste the code which we had copied.
Paste The Code Inside HTML editor of new Post

We are almost done! Hit publish button and check your post whether it worked or not.

Recommended: Make Embedded Videos Responsive in Blogger - Add Elegant Frames

Changing Width and Height of the Embedded Document

Optional step but important one. By default, the dimensions of the PDF document are set to 640px wide in width and 480px wide in height. If these dimensions do not fit according to your post area, then just change these pixels accordingly to make it appear fit on your blog post. All you have to do is edit its iframe code inside post HTML. See the example below.
<iframe src="https://docs.google.com/file/d/0B_PLgWpOK_wTQjNTZTM0bE01Zzg/preview" width="640" height="480"></iframe>
You can change width from 640px to 600px or anything and do the same to height.

Live Example of Embedded PDF file



Did you face any problem? Let me know via comments and I'll get back to you with the solution. Do share this post if it helped you.

Share this post

Explore more articles by Satbir

12 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. waiting for your help abut my blog
  2. did as you said. But an empty frame shows up with no PDF.
  3. thankyou bro, your tutorial kinda help me alot,
    like how it goes step by step,
  4. thank you
  5. thanks a lot, but I am unable to put a download link in bottom of the pdf
  6. Hello! Just followed your tutorial (along with your suggestion in the comments, which worked for me). When I embed it in my blog post, there is a lot of extra gray area below my actual image (it's a gift guide) which I do not want. Any way to get rid of it? Thank you!
  7. Satbir thanks a million I followed the advice you gave Nancy and it worked wonderfully well. I copy/pasted the code to my email, as that was an easier solution for me. Best wishes
  8. Followed the steps. The app isn't appearing when I click "open with." I'm in a GAFE environment. Ideas?
    1. Nancy Duelley:: Hi,
      Google keeps on updating Google drive's features from time to time and now it has changed so much soon after I published this tutorial so the exact steps I followed will no more be available.

      However, you can still do it with little trick.
      So in your case, you are on step 9 right? and open with is not available?
      It means you completed all the steps before that and changed the sharing settings?
      Now again go back to step 7 and on top of the popup, you'll see a link to share, can you see it?
      Just copy that URL which starts with https://drive.google.com/files/d/Your-File-Link/view?usp=share
      and paste it on notepad. Now just cut the "Your-File-Link" from that URL and add it to below code (highlighted in bold)

      <iframe src="https://docs.google.com/file/d/0B_PLgWpOK_wTQjNTZTM0bE01Zzg/preview" width="640" height="480"></iframe>

      Now you have your embedding link to your file and paste it inside HTML editor as stated in the tutorial.

      please let me know if you sorted it out or not. I'll update this tutorial soon.
    2. Quick note: you'll not be able to copy the above iframe code from my comment but it is available in the end of the tutorial so copy from there :)
  9. thanks bro :)
    1. Reus Ril@ You're welcome buddy :)
Post a Comment