Cal Gad

Smaller/Green
<iframe width='120' height='132' scrolling='no' frameborder='0' src='http://spreadsheets.google.com/pub?key=pIM_J1gg-sMPXdimA-V85Vg&output=html&gid=1&single=true&range=A55:G62'></iframe>



Larger/Blue
<iframe width='155' height='158' scrolling='no' frameborder='0' src='http://spreadsheets.google.com/pub?key=pIM_J1gg-sMPXdimA-V85Vg&output=html&gid=5&single=true&range=A19:G26'></iframe>

Calendar Gadgets for Your Blog

Embed one of our preformatted calendars.

We've recently discovered the beauty of Embedding Google Spreadsheets in Blogs, and calendars and schedules make for excellent examples. If you don't feel like creating your own spreadsheet, you are welcome to embed any of our preformatted calendars listed on this page. All of the calendars listed on this page are perpetual orautomatically updated, meaning that they will update every 20 minutes or so. The one downside is that the current day is based on one specific timezone, Mountain Standard Time (MST) or GMT-7.

Perpetual Holiday Calendar

The Holiday Calendar below shows the current month and lists some common holidays. This calendar only includes U.S. holidays and a few religious obervances (like Easter, Hanukkah, and Ramadan).

120 x 260 pixels

Perpetual Monthly Calendar - 120x133 pixels

The 8 calendars listed below are designed for inclusion in narrow side bars on blogs or websites, with a commonly used width of 120px. You can see one in action by looking at the right side bar on this page.

Perpetual Monthly Calendar - 155x158 pixels

The second variety of monthly calendars is slightly larger, with a width of 155 pixels. Instead of showing every version and giving the html code for each version, you just need to find the format you like from the 8 listed above and then change a few things in the html code:

• Change width='120' to width='155'
• Change height='132' to height='158'
• Change gid=1 (within the long SRC string) to gid=5

Perpetual 3-Month Calendar

These two calendars show the current month in the middle and the previous and next months on the left and right, respectively.

Perpetual Yearly Calendar

I didn't create many variations of the yearly calendar, simply because I doubt they are going to be as popular for embedding as the small monthly versions.

How to Create Your Own Calendar

Don't like any of these formats? Read the article Embedding Google Spreadsheets in Blogs to find out how to create your own spreadsheets and embed them into your website. I created a Google Spreadsheet template called "Embedded Calendar" that you can use to get started. If you want to create a monthly calendar that updates automatically, you'll need to know a little trick through: The formulas for the calendar reference the cell used as the month title, for example the cell containing "February 2009". If you use the formula=DATE(YEAR(TODAY()),MONTH(TODAY()),1) then the calendar will update based on the current day.

Embedding Google Spreadsheets in a Website

by Jon Wittwer, 2/26/2009

Shortcuts

- Why use a Spreadsheet?
- 20+ Ideas
- How to Embed a Spreadsheet
- A Few Guidelines
See also:
- Calendars for your Blog 

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 updatingholiday 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.

20+ Ideas for Embedded Spreadsheets

School / Academics

• School Calendar - Many schools post yearly event calendars on their websites. For a detailed calendar, you might want to just link to a full spreadsheet, but it would also be nice to see a full year at a glance, with the main dates highlighted (like the example shown above).
• Class Schedule - This might be just a list of the times and periods for a high school, or you could display your own personal class schedule on your blog or class website.
• Homework Assignments / Syllabus - It is pretty common for a class syllabus to contain a table listing the homework assignements and due dates. You could embed the table on your class website.

Lists

• Reading List - Share your list of favorite recent reads and indicate which book you are currently reading. Put your book club's reading list on your blog. On a blog, this would allow others to comment on your current book, but be careful - maybe somebody would end up spoiling the ending.
• Favorite [fill in blank] List - List your favorite movies, music, games, etc.
• To Do Lists - I can't think of a very good reason to share this with the world, but hey, it's an idea.
• Quote/Tip/Fact/Joke of the Day - With the Quote of the Day template, you can create a list of quotes and the spreadsheet loops through the quotes based on the current day. The example below is an embedded "quote of the day" gadget.
  
  
• Price List - For a small business, home business, online auction ...

Sports

If you run a website or have a blog devoted to your favorite team, here are a few ideas for ways to use embedded spreadsheets. These ideas may also work for a local club or organization that you belong to.

• Training Schedule - This might be used on your school website if it's for your team, or perhaps you train with a partner or group and want to show which days you'll be in the gym.
• Tournament Bracket - Do you have a tournament that spans multiple days? If so, you could use a tournament bracket template and display it on a blog or website.
• Team Roster - Spreadsheets are great for tabulated lists.
• Win-Loss Records or other Statistics - Keep track of your favorite teams, or the stats for your club or local organization.
• Game Schedule - Embed your team's game schedule on your school site, or if you are a devoted fan, show the game schedule along with a win-loss record on your blog.
• Record Book - Use a spreadsheet to list the standing records for your school, club, or organization.

Business or Organization

Remember that publishing a document will make it viewable by the rest of the world. However, if you aren't sharing secrets, it may still be useful to display on a portion of your website viewed mostly only by employees.

• Conference Room Schedule
• Shift Schedule - You could modify one of the calendars, use the Shift Schedule template included in the template gallery, or the Embedded Schedule template like the one used to create the school calendar shown above.
• Work Schedule
• Project Timelines or Outlines
• Contact Lists

Personal

While I'm not to keen on putting a bunch of personal stuff on a blog, I know many people who like to share with the world their plans, progress, successes, or life stories.

• Car Pool Schedule - This is something that might be constantly changing, and could either be a shared spreadsheet that you share with others, or something you embed in your blog or website.
• Fitness Log - In a social setting, sharing your fitness log may help inspire others (or in my case, show others how lazy I am)
• Personal Record Book - An idea for fitness enthusiasts who like to keep track of their personal bests.
• Weight Loss Status / Chart - I've heard it said that if you write it down and share it with others, you are much more likely to reach your goal.

Other Gadgets

• Countdown Timer - The following example shows a live countdown gadget embedded in this web page. It only updates about every 20 minutes (keep that in mind before you create something thinking it will update every second).
  

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?

Cite This Article

To reference this article from your website or blog, please use something similar to the following citation:

"Embedding Google Spreadsheets in Your Blog" by Jon Wittwer at Vertex42.com, Feb 26, 2009.