Embed PDF or Docs File In Blog Posts

File formats like PDF, Docx, PPT etc. are used widely to share documents digitally. In this post we will talk about embedding or attaching such files into a blog post. This method can be used on any blogging platform.
Document files like PDF are used to share documents from one person to another but sometimes people needs to implement it in a blog post which can be shared with multiple readers.

You can even upload a document file on your host and then share the direct link but it's not a good idea to share the document like that, as it's not sure how Google or other search engines will treat the files. The best way is to embed the file using HTMLs <iframe> element. The idea is simple but procedure is long but once you understand the method you will be able to do it yourself.

Embedding Files

HTML is the language of the www and I am sure your blogging platform also uses HTML for posts. We will use the iframe element to embed the files on blog posts (using too many iframe or making a loop with iframe can make your website slow). Follow the instructions :

Uploading the File on Google Docs

First of all we need to upload the file to a host and Google Docs/Drive is the best for this purpose. Go to https://drive.google.com/ sign-in and click on the upload button (next to the Create button), browse to the file and upload it.

When the uploading is done click on the the share

Now a new box will appear, click on the 'Change' link under Who Has Access To It, again a new box may appear just select the Public On The Web radio box under Visibility Option and click on the Save Button. This will make the document visible to everybody, you can also specify who can view the doc. you just need to enter their email addresses. 

Getting the Embedding Code

After changing the visibility settings we will need the iframe code to embed it on a blog post. To do that click on the file and a new window will be opened, click on File on the menu-bar and then select Embed this PDF File or other file format, you will then get the iframe code. It may look like this
<iframe src="https://docs.google.com/file/d/0B2jVGjwW6nn5dWtKb000UnQ2eHM/preview" width="640" height="480"></iframe>
The URL in src attribute might be different.

If you want to change the width or height of the iframe just change the values in width or height attribute.

Implementing the code in Blog post

The final step is to use the iframe code. You can easily implement the code in a HTML file or a blog post from your editor. Make sure your blog post editor supports editing HTML. Blogger, WordPress and most of the Blogger platforms have HTML friendly blog post editor.
For Bloger
Open your post editor and you will see a button that says 'HTML', click on it and you will be in the HTML editing mode, so this is where you will place your iframe code. Paste the code anywhere in the post, make sure it's not between another format markup. Publish or Update the post and you can then view the document from your blog post.
For WordPress
The procedure is same. Switch to the HTML mode and place the code wherever you want the document iframe to appear.

That's it. You are done attaching document to your blog post. 

Your Feedback

Tell us how you got helped with this tutorial or how we can improve this tutorial. Drop your suggestion in the comments.