Embedding a PDF or other Documents into a Blogger Blog

From time to time we may be sent or create a document in Word or PDF or even Powerpoint format that we would like to display on our blog. (It's a common question that comes up a lot in the Blogger Help Forums).

This simple and quick guide will take you through the process.

So read on...

1) We want to upload our file to Google Docs. So goto https://docs.google.com/

Note: Depending on if you use Google Drive the screenshots may say either Google Drive or Google Docs. They are in essence the same thing.

2) Click the Upload Icon and select files.


3) Pick the PDF or other file you want to embed and click Open


4) You'll be presented with a confirmation box. Press the Start Upload button.


5) You'll be presented with an Upload Progress box


6) When that has finished click the filename.


7) This will load the File into your Google Doc/Drive screen. Now we need to "Share" the file so that it will be visible to your readers on your blog. Click the Blue Share button at the Top Right.


8) You will then be presented with the Share Dialogue screen. Click the Change link.


9) Select "Public on the web" and press Save followed by Done.


10) Now we want to grab the Embed Code that we will use to post onto our Blog. Click the File menu then Embed option.


11) You will then be presented with the Embed code. Copy the code by selecting it all and pressing CTRL-C


12) Now goto your Blog and create a New Post and make sure you are on the HTML Tab. In the Blog Post section Paste in your embed code. It should look like this.

NOTE: You can alter the width="640" height="480" parts of the embed code to fit the size of your blog.


13) Click the Preview Button and you should see your PDF embedded in your Blog Post. If everything is ok you can go ahead and publish your post.


And that's it.

So in summary...

1) Upload the file
2) Share the File and get the Embed code
3) Post the embed code to your blog.


Alternative Methods
GoogleDocs is probably the easiest method although there are certainly others.

Goto a free site like http://www.docstoc.com/ or http://www.scribd.com and then upload your PDF/DOC. It will then give you the Embed HTML Code to add to your blog post.

Hope you found this useful and if you have any problems or questions, please don't hesitate in asking in the comments below.

Comments

joey said…
the easiest method although there are certainly others.
MAX232
REYNALDO P. DIZON said…
I've tried scribd.com. I was able to get the embed code, but when I pasted the code on my blog , I was not able to open it and see if it got embedded on my blog. Where did i go wrong?
Tracht Beefor said…
How do I get rid of the preview pane?
DarkUFO said…
@a98f56c5b9b8f62cc72be03216a7fdb7:disqus Make sure you paste it into the HTML tab and not the COMPOSE tab Make sure you paste it into the HTML tab and not the COMPOSE tab
asif said…
but viewers cant download the file and cant zoom in zoom out. rest ok.
DarkUFO said…
True but you can upload the file to drive in its original version and make it public and provide a link in the post for people to download
mohssine_ait said…
thanks man for the tip. this methode work with all ebook website http://www.tech-fans.com/
Hike said…
THANK YOU! You turned something obscure and difficult into a simple straightforward task. Why the folks at Google failed to allow for the use of something so advantageous as the PDF format goes beyond comprehension. You saved me much effort and a lot of hair-pulling!
DarkUFO said…
@309361c85087ccf5196a1169d9c3351c Glad you found it helpful
cherlyn said…
why i cant find the "Embed this PDF file" in the option?
DarkUFO said…
Click on File, Publish to the Web
Sharon McCreary said…
Alas, I have done everything as outlined here.
*Uploaded the PDF document to Google Drive
*Had conversion turned on at upload
*Made the document sharing public
*copied embed code

What I get when I put that code into my blog is not the document embedded, but exactly what I see on my Google Drive screen, with the little preview document and my file information at the top. That's not what I want. I want the document to look like it's embedded as a photo would be. Is this not possible? I'm leaving it up there, as ugly as can be so you can see what I mean. Go to cresltutors.blogspot.com Is there some step I'm missing?
DarkUFO said…
Hi @sharonmccreary it looks like for some reason its not coverting it a Google Doc and is still trying to display it as a PDF file.
DarkUFO said…
Here is a PDF file Upload and coverted to a Google Doc.

http://www.spoilertv.com/2013/08/switched-at-birth-season-2-katie.html
Sharon McCreary said…
If you or anyone can figure out what's going wrong, please let me know. I deleted the PDF from my Google drive, re-downloaded it to my computer from my original source, renamed it before saving it to my computer (just so Google wouldn't think it was the same document), have both conversion options set to "on" in Google Drive, followed all the steps again (meticulously) and I still get the same result. So frustrated.
Becci Sundberg said…
So I'm totally technically challenged.
I have followed the instructions right through to the sharing bit. But I cannot see where to get the code?
DarkUFO said…
@becci_sundberg Ok, so you uploaded your document to Google Docs ok? Once uploaded just click on it to open up the document, at the Top Right there will be a Blue Share button, do you see that?
Becci Sundberg said…
Yep I shared but then couldn't find the File section to get the code?
DarkUFO said…
So you don't have a file menu when you are in your document? What do you have?
Becci Sundberg said…
Oh hold on. When I clicked on the document, it came up with the picture of it in a pop up. I have just seen the Open blue button at the bottom, clicked on there and yay I have another window with a file!
Thanks for you help :)
DarkUFO said…
@becci_sundberg Ah cool :)
Becci Sundberg said…
One more thing...any way I can make the pic of it smaller on my blog???
DarkUFO said…
See Step 12) in the instructions above.
Becci Sundberg said…
Ahh awesome thanks so much for being patient with this noob :)
DarkUFO said…
When you uploaded it, what options did you select eg the Conversion options.
Diana Delosh said…
trying it again seems to be conversion:off
DarkUFO said…
Try the which ever option you didn't on the first on and see if that improves things.
Singh said…
Enable to see file menu
Brenda McDonald said…
There is no "change link" when I click share. There is no "public on the web" option. This is about the 8th site I've tried to learn how to add a pdf on blogger and either Google drive/docs changes constantly or the sites have old info - but I cannot get clear instructions to learn how to do this. It should not be this time consuming or trying.
DarkUFO said…
Hi @disqus_DdRLy2TIlW Make sure when you Import/Upload your PDF that you convert to a Google Doc in the Upload options. Once you do that and open the Document, the Share link/button will be at the Top Right. Clicking that will allow you to change it to Public.

I do these every day so I know it's there ;)
Brenda McDonald said…
How???
DarkUFO said…
After you have upload the file, click on the File Menu, then click Publish to the Web, publish it and you will be given a link to the file.

See screenshot
mrsmoto said…
Before Uploading the PDF File, Make sure you Hide/show LAYERS then SAVE AS what ever you want to save it as and then upload it you will not see that preview pane anymore!
ambreen11 said…
Hello all, here every person is sharing these kinds of know-how, thus it's fastidious to read this blog, and I used to pay a visit this website everyday.
LittleMissSCB said…
Thanks so much for posting this up. It's been a great help.
Gemma Terrill said…
Did anyone work out how to get rid of the preview pane for the PDF? If I take it out on the message, when I preview it is still there :-( Other than that this has worked perfectly - thank you!
DarkUFO said…
Hi Gemma Terrill I think you might be better off posting your question in the official Goggle Docs forum here

https://productforums.google.com/forum/#!categories/docs/how-do-i



I'm sure someone there will be able to help you.
Leslie said…
I spent the afternoon trying to get this right, but no! I have read the various comments and your replies and think the problem is that I still have the doc looking like it did in the drive, here's a link:

http://ccsfdeutschnaklar.blogspot.com/ and then click on, at the bottom of the top post: Click here for complete information. What am I doing incorrectly? I take it from a post below (sharonmccreary), that the doc is supposed to be displayed,not as a pdf, but as a Google doc? I will check back here tomorrow, on the off chance that you are replying to these comments with any frequency. Thanks for any elucidation you can supply, DarkUFO.
Leslie said…
Never mind, DarkUFO, I somehow got it to work. Not sure if I can duplicate what I just did, but it's ok for now. I think I had the wrong link. But all your replies were very helpful.
DarkUFO said…
Glad you got it working
jenny said…
THANKS
Susan Estes said…
Hello, Everything worked out per instructions, but I want to embed the link to the PDF file to a button on my blog. Is this possible? If so, how can I do this?