How to Embed Google Docs into Your Joomla Website

Google docs being probably the most popular service for managing online documents, I am going to show you how with no flash or PDF browser plug-ins you can embed Google Docs, spreadsheets, documents, forms and presentations into your Joomla website and this works for Joomla 2.5 up to 3.0 and beyond.

Step 1: Setting up your documents

Before you start you have to make sure that your documents are labeled as public and not private otherwise this will not work. Open the document that you want to share and click the Share link that the top of the browser to make it public readable.

Step 2: Choose the right Method

When you publish a document you make it available to the world (as long as it is not set to private). Once you publish your document, spreadsheet, presentation or drawing you will get a URL that you can use to share. This link will remain valid until you delete it, make it private or stop publishing it. There are two ways to publish your document to your website, either by way of an iFrame or you can use the embed code in your Joomla article to place it anywhere on the page.

Using an iFrame you need to use the proper syntax to embed the document page with the URL. You set the height, width and border of the iFrame and you are good to go.

Embeding the code using the Embed Google Docs Viewer is a bit more involved but will give you better control and cleaner results. You will first need to get the plugin to do this and install it in your Joomla website. Go to (http://joomlacode.org/gf/project/google_docs_vw/) and grab the plugin and install it in your site. Using this method is done without the need for an iFrame which I recommend using over an iFrame. Adding the article is a simple process, just add the URL of the document that you want to embed, and you are good to go. Supported formats are: .doc, .ppt, .xls, .tif and .pdf.

The Syntax

After you have installed and published the plugin, go to the article and type the following where you want the document to appear:

{google_docs}document_url{/google_docs}
{google_docs}document_url|width:200|height:200|border:1{/google_docs}
{google_docs}document_url|width:200|height:200|link:yes|link_label:Label{/google_docs}
{google_docs}document_url|link:yes{/google_docs}

Thats it, if you have any questions please leave your comments below and I will be happy to help you out.