Simple CMS using Google Spreadsheet API

Update 6/14/2007: Dion Almaer has published a nice Javascript helper which makes working with spreadsheets much nicer, I’ve moved my stuff to it and it’s a big improvement over using the Google JSON api directly.

Publishing dynamic content on your website in a format that you can style with CSS has gotten a whole lot easier with Google’s simple JSON based Javascript API’s. The two I’ve found myself playing with lately are the Google Ajax Feed API for publishing RSS and Atom feeds and the Google Spreadsheet API
for publishing little snippets of text that should be easily editable.

Say you want a simple headline on your homepage that you can change daily. Here’s how you’d do it with the Google Spreadsheet API:

1. Create a spreadsheet making the first row the column headers (important because you’ll refer to the cell by the column header):


2. Go to the publish tab and publish the spreadsheet: Note in this example the key is pouqRkV5D_eZT_VdOKu7CQA

3. Use a simple container div and some javascript to display the field:

<div id="headline"></div>
<script type="text/javascript">
function displayContent(json) { document.getElementById('headline').innerHTML = json.feed.entry[0].gsx$html.$t; }
<script type="text/javascript"

Note: the spreadsheet key in the URL that needs to be replaced. Also, entry[0] refers to row 2 in the spreadsheet (because row 1 contains the column headers and is not considered an entry):

4. The text appears dynamically on the page:

Palm releases Linux based Foleo

5. When it’s time to update, make your changes to the spreadsheet, go the publish tab, and republish it and the changes will appear on your site!

The only real downside I can think of with this simple approach is that it’s not SEO friendly so if you want all search engine crawlers to follow those links you publish, you’re better off with a non-javascript solution. The Spreadsheets API google group is a good resource and Pamela Fox has some examples to look at.

This entry was posted in AJAX, Javascript, Software Engineering. Bookmark the permalink.

12 Responses to Simple CMS using Google Spreadsheet API

  1. Pingback: