Tuesday, 16 July 2013

How to embed editable Google Spreadsheet in your website

You must have thought to embed the spreadsheet in your website which can be edited by the visitor, and if you don't know how to do that then I will show you how to do it step by step.

I assume you have an Google account and you have a website, if no then you can create a new account with Google and also you can use Google Sites for free if you have a Google account.


Now create a new page in your Google Sites and in that you can insert Spreadsheet..




But.. wait, if you want an EDITABLE spreadsheet in your website then hold on... this will not work..


Now to embed the spreadsheet that is editable, you have to use an iframe, have a look at the following screenshot:




In "Insert" menu click on the "... More gadgets..."



And then select "Include gadget (iframe)", look at following screenshot:





And then click on "select" button.



After that you will have the following at your screen:




Now, you have to insert the URL of your spreadsheet in the "URL to content (required)" text box.


Put the URL of your spreadsheet in the following format:


https://docs.google.com/spreadsheet/ccc?key=0AmMTqpzD9YRndDFIZWp0d0RmQ1RJRTlIcTM2N0w1cXc&hl=en&ui=2&chrome=false&rm=minimal#gid=0



Note: Take care of the above format of URL if you want to avoid displaying "Tool bar" Menu.... 

URL parameter &rm=minimal will help you to achieve this. And in this way it will look much more better and presentable.

And then adjust the display setting as per your need. Then click on "OK" or "Preview", and then save your webpage.


So you will have the embedded spreadsheet in your Google Sites:





Note: You should set your Google Spreadsheet sharing setting to "Public on the web" and "Can edit".





And now you are done... You have your Google Spreadsheet embedded in your Google Sites and that is editable by any of the visitor.



Have a look at the following link of my next blog post containing an iframe, I have embedded the above mentioned URL in it:


Editable Google Spreadsheet

I hope this will surely help you to learn more about Google Spreadsheets, Google Sites and iframes.


No comments:

Post a Comment