Embeddable Google Document Viewer

An article by Darin Wagner    No Comments

Have you ever wondered how you could embed a viewer in your blog or web site so you could display a PDF? Well, wonder no more! Google offers a feature that lets you embed a PDF. To make this work, the file you want to display must be available online. So, upload a document somewhere on the web and then follow these instructions!

1. We need to insert an iframe. An iframe allows content that is elsewhere on the web to be displayed within your web page / blog post. The html code for an iframe is:

   <iframe>…</iframe>

2. Next we need to identify the source information to display. The first part of the code tells us to use the Google Docs viewer:

   src=”http://docs.google.com/gview?

3. Now we are ready to add the web address of the document we want to display in the viewer. Be sure to enter the full URL of your document. Here is the address of the sample PDF displayed below:

   url=http://darinwagner.com/wp-content/uploads/2010/03/docsQuickstartGuide.pdf

4. Finally, we just need to set some parameters. If you want to… set “embedded” to true. If not, set it to false. Adjust your width and height according to your page, and set your frame border size. The frame border is the thickness of the line that surrounds the viewer. The higher the number, the thicker the border.

   &embedded=true” style=”width:550px; height:730px;” frameborder=”0″

5. When you put it all together, here is the full code:

   <iframe src=”http://docs.google.com/gview?url=http://darinwagner.com/wp-content/uploads/2010/03/docsQuickstartGuide.pdf&embedded=true” style=”width:550px; height:730px;” frameborder=”0″></iframe>

Here is the example using the above code:

[field name=iframe]

The document viewer currently works for PDF, Doc, Docx, PPT, and TIFF files.

If generating all this code by hand seems overwhelming, don’t fear. Here is a link to a page provided by Google that will generate the code for you:

https://docs.google.com/viewer

Just input the document URL, the text you want for a link and viola!