Embedding Google Spreadsheets in a Website

There are many ways to add free gadgets and widgets to your blog or website, but perhaps a lesser known technique is to embed a Google Spreadsheet.

You can always include a simple link to your published Google Spreadsheet, but what I'm talking about is displaying the actual spreadsheet or a portion of the spreadsheet on your site like the example below which shows a school event calendar for a fictional elementary school.

Why Use a Google Spreadsheet

Before listing some ideas for embedding Google Spreadsheets in your blog or website, let me address a few reasons WHY you might want to use a spreadsheet instead of using some other approach.

1. Calendars and Schedules

Spreadsheets are a popular tool for creating calendars because of the flexibility of formatting. You can also do some pretty fancy stuff with an embedded spreadsheet. For example, you could embed an automatically updating holiday calendar on your blog or website. You could display your team's practice and game schedule, or your school's event calendar. There are many calendar and schedule templates that you could customize, but if you don't want to bother creating your own calendar, you can use one of our the preformatted calendars for your blog.

I created two templates for the Google template gallery designed specifically for creating embedded calendars or schedules. In the gallery, they are entitled Embedded Calendar and Embedded Schedule.

2. Frequently Changing Data or Content

Perhaps you want to allow someone to update a list on your website, but they don't know HTML or you don't want to have to give them FTP access. You might be able to use an embedded spreadsheet as an alternative to programming in PHP/Java/ASP/etc or installing a script or content management system. Just create the list as a Google Spreadsheet and give the person permission to edit the spreadsheet. After they edit the spreadsheet within Google Docs, if they republish it, the updates will show up automatically on the website(s) where it has been embedded.

The examples below show two different ways of embedding a sample reading list. In the first case, the entire worksheet (named "List") has been published, and in the second case, only a specific range of cells has been published. Note that in the first case, the embedded document shows the document title and the worksheet tab. You can find a Reading List template in the Google Docs Templates gallery.

3. Displaying Tabulated Data

Creating a nice looking table in HTML can be tricky, especially if you want to do fancy stuff with background colors. If you're handy with a spreadsheet, you could just put the data in a spreadsheet and embed the table into your blog or website. Or, if your data is already in a spreadsheet - why go through the extra work of converting it to an HTML table? The data is stored in an <iframe> tag, so if the table is large, you can set the size of the embedded iframe so that the user can scroll through the data without scrolling the entire web page, just like in the reading list example above.

How to Embed a Google Spreadsheet

There are a few different ways you can embed a spreadsheet, and you can experiment with the different approaches. The steps below outline how to embed a specific range of cells into a blog or website.

1. In Google Docs, create a new spreadsheet starting from the Embedded Calendar, Embedded Schedule, Reading List, Quote of the Day, or Countdown Timer templates (or use one of the other templates if you get permission from the owner to do so, or create your own spreadsheet from scratch).
2. Publish as a Web Page: Go to Share and select "Publish as Web Page". Click on the Publish button.
3. Click on "More Publishing Options" at the bottom of the "Publish as Web Page" dialog box.
4. Check the "Automatically re-publish when changes are made" option. If you have a dynamic formula like =TODAY() or other automatically updating content, this will cause your embedded spreadsheet to update every 20 minutes or so, even without you having to make manual changes.
5. Select "HTML to embed in a web page" from the "File format" options.
6. Select just the Sheet you want to publish from the "What sheets" options.
7. Enter the range of cells you want to publish in the "What cells" text box, or if you want to show the entire sheet, leave the default as "All Cells".
8. Click on Generate URL
9. Copy the HTML, and edit the width and height values as needed to size the iframe for your blog or web page. See the guidelines below about sizing the horizontal width.

Some Guidelines

• Horizontal Width - By default, scrollbars will appear if the spreadsheet is wider or taller than the size of the iframe. The pixel width of an embedded spreadsheet in FireFox is wider than in Internet Explorer or Safari. Therefore, if you change the width='xx' attribute of the iframe, you should probably base the width value on how it appears in FireFox.
  
  One way to avoid having the scrollbars appear is to set the scrolling='no' attribute in the iframe tag like this: <iframe ... scrolling='no' ... >. The problem with this approach is that if the spreadsheet is larger than the iframe, the right-size will be truncated and the viewer will not be able to scroll to see it.
  
  Note: If your embedded spreadsheet is N cells wide, then the width within Safari is N pixels narrower and within Internet Explorer the width is N+1 pixels narrower. I haven't checked this with different browser versions or on different computers.
  
  
• Publish the Entire Sheet or a Range of Cells? Depending on your content, you may want to publish the entire worksheet instead of a range of cells. For example, if you create a list and only publish a specific range of cells, then if you edit the list later and it extents beyond the range specified in your blog, the list will show up truncated.
  
  
• The method you use to publish and embed your spreadsheet (entire workbook, entire sheet, range of cells, scrolling or non-scrolling) should depend on how the spreadsheet might change in the future. Ask yourself the following questions:
  
  (a) Will the spreadsheet possibly change size (height or width)?
  
  (b) Will the number of columns or rows change?
  
  (c) Will the spreadsheet fit/display well within a blog or web page?