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:
Next, click Embed Item under the options menu:
Copy the embed code and paste it in the post:
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! 🙂