There are numerous threads on the internet about problems embedding PDF files in web pages. Many of them are because they are embedded from Google Docs. Google Docs seems to arbitrarily compress photos inside the document with absolutely horrifying results. If that’s the case with your embedded PDF, the fix is pretty easy. Following is a screenshot of a post with a PDF embedded from Google Docs. You will see the difference at the end of this article, with the “corrected” method of embedding a PDF.
A comparison of the two methods of embedding can be seen in these sample pages:
It appears that the document is currently being embedded from Google docs – and Google docs has a problem in that it insists on compressing the images in PDF documents when embedded. They have not even acknowledged the problem, but there is a consensus in the technical community that it cannot be fixed in Google docs. But there is a better way to serve up the PDF in your WordPress blog.
There are two steps – the first is to add the PDF file to the media files in WordPress. To do this, click on media and then upload media.
Then browse to the file select it, and upload.
When you are done with uploading to your WordPress site, click on your library, where you will see the PDF you just uploaded. Click edit next the PDF. With the details open, you will see in the upper right corner of the screen “File URL”. Highlight and copy the entire URL from that field.
Then go to your post or page, switch to text view to insert the code for the iFrame with the embedded PDF. Insert the copied link in the following context:
<iframe src=”copied link” width=”640″ hieght=”480″</iframe>
Where copied link is obviously the link you copied from the details page of your PDF file.
For example, when I just did it on my blog, I inserted:
<iframe src=”http://brainchamber.com/wordpress/wp-content/uploads/2013/07/NL_July_Aug_13_HIGH-QUALITY_300dpiperLB.pdf” width=”640″ height=”480″</iframe>
Now when I view the page, I can see the PDF embedded in an iFrame exactly as the Google Docs embed appeared except without being exceedingly ugly. Instead of having Google Docs control the PDF viewer, the Adobe PDF viewer is controlling it and it appears correctly.
Those kids look WAY more normal to me. Nobody knows why Google screws with PDFs like this, and it’s not because we haven’t asked. It must be part of the Google conspiracy to ruin everything. Fortunately, we have a way out… for now.