Google Drive vs. Docs: Embedding Documents into WordPress.com Posts

You may have run into a scenario where a document, like a PDF, had to be embedded into one of your WordPress.com blog posts. There’s an official support article present here on how you can do that, but it only deals with Google Docs.

In this post, I’m going to talk about why you should rather use Google Drive for embedding documents and how to actually do it, because the embed code from Drive doesn’t currently work on WordPress.com. A slight modification is required in the URL.

A bit about Drive

Google Drive, the cloud storage platform by Google, also has the ability to store documents (.doc, .pdf etc.) and unlike Docs, it retains their original format once uploaded. It’s also a lot more easy to manage the documents in Drive—you can upload, view and share them, however, the ability to edit is only available in Docs.

Why Drive over Docs?

It’s in the layout! Documents from Drive embedded into posts look quite different from the ones embedded from Docs. Pics or it didn’t happen! Yes, I know, nothing is better than a visual illustration, so here is a comparison of a single PDF embedded via both the services:

Can you see the difference? Click to enlarge.

The PDF from Docs is shown in a layout where you have to scroll horizontally to read the lines. Moreover, you can’t even select any text, as the embedded PDF from Docs shows up as an ‘image’.

On the other hand, the embed from Drive not only fits the frame but also has an on-screen zoom control and a button for popping out the document in a new window. Makes for a better reading experience!

How to embed Google Drive documents

Now onto the practical part!

Upload the PDF or any other supported format and share it with the desired audience. To do this, right-click the document and select Share. To make it public, click Get shareable link:

 

 

 

 

 

 

 

After it’s shared, double-click the document which opens up a preview, then select the pop-out button:

drive-1-open-external-full

 

 

Next, click Embed Item under the options menu:

drive-2-embed-menu

 

 

 

 

Copy the embed code and paste it in the post:

drive-3-embed-code

 

 

 

 

Now, wait before publishing the post!

There’s one change you got to make in the code. Where it says drive.google.com, change it to docs.google.com. If you don’t make this change, WordPress.com will turn the code into a simple hyperlink and the embed will not work. 

They haven’t added the domain drive.google.com to their whitelist yet, so until it’s resolved, you have to use this method. Rest of the code should remain the same, except width and height which you can modify according to your liking.

Happy embedding, and let me know which embed source you personally prefer! 🙂

Published by

Ehtisham Siddiqui

Blogger and a techie. WordPress, cricket and aviation freak. Love traveling!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s