Embedding PDFs Stored in Google Docs

It should be easy to upload a PDF to Google Docs and then embed it into a WordPress blog, and I’ve wasted a lot of time trying to figure it out. Here’s the story and the solution:

Schools that run WordPress (WPMU) for teacher and student blogs have a very powerful tool at their disposal. There are, however a few workflow issues that can greatly impact teacher buy-in and the consistent application of best-practices. Perhaps the most vexing problem to me is the issue of attaching and/or embedding documents.  As a single blogger it’s not too hard to come up with an attachment workflow that works, and it usually isn’t a problem to find a location to host the files, but it quickly falls apart when scaled to a large group of teachers who have widely varying competencies and extremely tight storage limits on their blogs.

Although I’m not personally a fan of cluttering up blogs with endless embedded documents that bring load-times to a crawl, I do understand that a large percentage of teachers want to get their pretty documents straight into their blogs. They want something simple to get them from a highly stylized Word document to an easily printable embed on a blog post.

Many teachers have learned to use Scribd, but the advertisements and need to log-in in order to print make it a poor solution. I thought I had found the solution in embedit.in but after some trials, we found that despite its perfect interface and lovely embeds, uploaded documents often got stuck “processing” for days.

Then I thought I had a good solution using Dropbox*, but the IT director balked at the reliance on a bunch of unmanaged, free dropbox accounts. Since my school is belatedly embracing Google Apps, I really wanted to find a Google Docs solution as it would help drive people toward exploring it more.

There are quite a few nice WordPress plugins which turn PDFs into embeds, so how about uploading PDFs to Google Docs and then linking to them. With plugin names like Google Doc Embedder (GDE) and Google Docs Viewer you might think it would be a breeze. Unfortunately, it isn’t that simple.  The author of GDE clarifies:

“… a common misconception that I regret. It’s called Google Doc Embedder because it uses the Google Docs Viewer, but changes after Google made this service publicly available made Google Docs themselves difficult or impossible to embed in this way…”

At my prior school, we used Google Sites and it was easy to use a Google Docs Widget to add Google Docs, but uploaded PDFs were tricky. I had previously found that Mori79’s PDF widgets worked wonderfully, so I took a look at the URL that was embedded in the iFrame of a Google Site using his widget. Eureka!



 

From here, it was easy to get this into an iframe. I’m not much of a coder so I chose to use the excellent Embedder Plugin to generate a slightly easier shortcode. The added advantage is that if Google changes their URL formatting for their viewer, I can change it in the plugin rather than every post that uses the embed code.

Thus, users can now upload a PDF to a public folder on Google Docs, grab the doc ID and add it to a shortcode like this:

[gpdf id=”0B-PPWU-EByz4MWFlZjAjAtN2E1Mi00YjFlLWJkYzgtMmJiMWYE1NDM0″]

to get this:

<iframe src=”https://docs.google.com/viewer?embedded=true&a=v&pid=explorer&chrome=false
&srcid=0B-PPWU-EByz4MWFlZjAzYjAtN2E1Mi00YjFlLWJkYzgtMmJiMWY2ZGE1NDM0&hl”>
</iframe>

which renders this:

Do I think this is a good workflow for teachers? No, of course not, but I’m hopeful that the developers of the existing Google Viewer plugins will incorporate this. Better yet, someone will extend the WP media uploader so that instead of the file uploading to the WP site, it uploads to Google Docs (or other cloud location) and then generates a link or embed for it.

I’d love to read about work that others may have already done in this area.

* The Dropbox solution was really a lot simpler than this Google Docs nonsense: user saves as a PDF directly into their public dropbox folder. Then they navigate to it, right-click to get the public link and paste it into a blog post. Then a plugin like dirtysuds embed does the rest.
read more