Embedding a Google Docs spreadsheet in Blogger

Blogger is an excellent free blogging platform but if you want anything 'dynamic' then it starts to get in the way. One thought I've had recently was to see how I could share information captured in Google Docs Spreadsheet with Blogger.

I've a few ideas which will take a few posts to explain, so let's start with the most basic - embedding a Google Spreadsheet direct into Blogger.

Access the spreadsheet in Google Docs that you want to expose in Blogger, I've chosen a simple table of the most popular programming languages in 2010:

Next you'll want to share this spreadsheet with the rest of the world by publishing it as a web page:

Now you need to select the "HTML to embed in a page" option and copy the HTML code into the clipboard:

 Open a new post in blogger and ensure that the "Edit HTML" tab is selected and paste the code in:

Now publish your post and your spreadsheet will be visable in your blog post:

I didn't say it would be pretty though did I? ;)

That's the most basic way of doing it, and any changes you make in Google Docs will be reflected in the Blogger page. In the next few posts I'll show how a little HTML & JavaScript coding with Google Visualisations means we can have a much neater looking table as well as access to producing some graphs of the data.


Glenn Zucman said...

Awesome! Thanks so much!

Wayne Crews said...

This is excellent and useful. Worked on my page thx to you (www.tenthousandcommandments.com) Be nice if i could get rid of the "Sheet 3" that trails the title.
best, wayne

RSB said...

How do you only show a specific range of cells? I have tried to type in a range in the following format A16:G21 cell range box, and although the embedded code changes, I have tried 2 different browsers (Firefox and Chrome), neither just show the specified range, but just start showing the spreadsheet from cell A1.

Ragnar said...

Nice man!!!

Joana Marie Africa said...

Thanks! Keep it up. :)

Joana Marie Africa said...

Thanks! Keep it up! :)

Harikrushna Dhanani said...

Here is complete guide to embed Google doc file like Documents, Spreadsheet, presentation in web pages

<a href="http://techtrace.net/how-to-embed-google-doc-files-in-web-page/>http://techtrace.net/how-to-embed-google-doc-files-in-web-page/</a>

mankoun said...

Apparently, these guys have a non-iframe approach which i prefer cause you can style it better

Pretty Darn Nails said...

Thanks Sooo Much!!! It finally worked! I've been Having Issues with it and now it worked :) Good job!