Embed Google Docs document within your web page

By

One way of showing a formatted document on your web page is to embed a Google Document as an iFrame within your pageThe iFrame would then contain the document you wanted to view, including the ability to scroll the pages and print, etc. this is a good way to show the final document to your viewers in an easy to read format.The document viewer http://docs.google.com/viewer has two parameters:

1. url: the URL of the document
2. embedded: if set to TRUE the viewer will use the embedded mode interface

So, if you wanted to view a PDF or DOC on your web page you would use an IFrame and the document (PDF, DOC, etc.)

http://docs.google.com/viewer?
      url=http://freesoftware.mit.edu/papers/sturmer.pdf
      &embedded=true

I have created an example of the above page here

If, for example you have a document called ‘test.doc’ the various options to view this document would be:

Paste this link into email or IM:
http://docs.google.com/viewer?url=test.doc

Or, paste this HTML tag into your blog or website for a link to the viewer:
<a href=”http://docs.google.com/viewer?url=test.doc”>View</a>

For an embedded viewer, use this HTML tag instead:
<iframe src=”http://docs.google.com/viewer?url=test.doc&embedded=true” width=”600″ height=”780″ style=”border: none;”></iframe>

The benefit of using this method instead of just using the native Google viewer is that the user still has the focus of your web page with all the surrounding information and is not taken off to the google site to view the document. You can use this technique to view all supported Google documents, which would be very useful for such things as presentations and spreadsheets. The ifame is the container to hold the document, in the above example the width and height were set to keep the document within the page of the web page, these are of course not required. There are other attributes for iFrames such as the frameborder and scrolling properties. You could also apply some CSS styling to make the appearance more in keeping with your sites theme. for example:

You could use the iFrame generator to create all the basic code for you and then just add your Google document to the src attribute. There is a Google Docs Generator that you can enter a url of a document and then generate all the various links automatically.

Lastly… if you just want to view a PDF or other document online you could go directly to: http://docs.google.com/viewer