How to embed a live Google Docs spreadsheet into a webpage

Let’s say you have a set of data in an Excel document or Google spreadsheet* and you want to share it with the public by posting it on your webpage. You no longer have to create a static HTML table; in fact, Google allows for embedding a table on a webpage that is updated as the original Google Doc is updated. The way to do it is by creating what is called a “live” spreadsheet.

The process is very simple and the results will definitely save you a lot of time.

  • First, import your Excel file in Google Docs or open your Google spreadsheet;
  • File > Publish to the Web...;
  • Check the box that says “Automatically republish when changes are made”;
  • Click "Start Publishing";
  • Change “Get a link to the published data” from “Web page” to “HTML to embed in a page”;
  • Copy and paste the HTML code generated (should start in "<iframe") in an HTML-enabled space on your webpage.

At this point, you would just need to make changes on your Google spreadsheet to see the table on your website edited as well. In my testing, the automatic update always worked flawlessly; however, if that does not happen:

  • Open your Google Doc;
  • File > Publish to the Web... > Republish now.
  • Magic! You should see the table data updated on your website.

This is how the embedded spreadsheet will appear on your webpage.

You can now adjust width, height and frameborder by changing the values in the <iframe> code in HTML mode.

Linking to the original Google Doc

Now, what if you also want users to be able to access your original table?

The way to do this is also very easy and I found it here (theBioBucket).

In your webpage, in HTML mode, write a code using the standard HTML notation to create a link <a href=”URL”> YOUR TEXT HERE </a>
The URL you will have to plug in is your Google doc one, found under “Share...”:

Click "Share..." under "File"

Grab the URL circled and paste it in the HTML code.

Once you’ve done that, you can simply write something like “Click here to access the Google document for this table” in the YOUR TEXT HERE space, and... all done!

A Google account is not necessary to view the original Google Doc. Any user on the web can access the original Google spreadsheet in view-only mode. They won't be allowed to alter the original table in any way, but they will have access to a spreadsheet downloadable in different formats  (e.g. .pdf, .csv, .txt). To download, simply click File > Download as... and save the document on your computer in all the formats available in Google Docs.

* Note: This method works with every format available in Google Docs but this post focuses on spreadsheets.

18 thoughts on “How to embed a live Google Docs spreadsheet into a webpage

  1. “How to embed a live Google Docs spreadsheet into a webpage | BDNYC” ended up being seriously enjoyable and instructive!
    Within todays universe honestly, that is quite hard to carry out.

    Regards, Jewel

  2. I tried embedding one into my free video website as well. It was extremely frustrating that the published spreadsheets did not automatically update, so thanks so much for this tip!!

    • + All the edits you make to your spreadsheet are instantaneously saved by Google Drive.

      + Once you edit your spreadsheet from your Google Drive it automatically updates on any webpage that you shared it on, as long as the option File>Publish to the web...>Automatically republish when changes are made is checked.

      + When you create a spreadsheet you are the owner and you are the one that has the ability to determine who can do what with your spreadsheet. To access these options go on your spreadsheet page in Google Drive and if you look on the top right you will see a button that says "Share". You'll see yourself as the owner, and above it you will see either "Private", "Anyone with the link" or "Public on the web". Whichever one of these options you choose, you can determine they're benefits:
      - "Can edit" means they can access the spreadsheet and modify it however they want
      - "Can comment" means they can add notes on the side or over the document but CANNOT edit the spreadsheet's content and structure
      - "Can view" means they can only visualize the spreadsheet in read-only mode.

      Also, in the same window you can add authors by email, for who you can determine the same benefits explained above.

      Hope this helps, please don't hesitate commenting if you need more help!

      Sara

      • Is there any way to collect/grab and publish dynamic data through Spreadsheet ? Excel sheet can grab dynamic data but when it import on spreadsheet it made a static page and can't update as Excel sheet does...........
        So, Is there anybody who can help me out how to grab dynamic data from any webpage/aspx page and then reproduce any other blog through iframe or html code ?
        Thanks in advance

  3. Thanks for this excellent post. I successfully managed to post my Google Drive spreadsheet onto my website ... but I want to freeze frames! This works on Google but not on the website. Is there a way to do this??
    Many thanks
    Maurice

    • It might have to do with the browser you are using. I remember that Google Chrome for some reason did not load my Google Docs (kind of a paradox, right?). If you have an iPhone try downloading different browsers, but I'm not entirely sure what the cause of the problem should be.

      Sara C

  4. Hay guys, First of all, do you have any idea as to how some dynamic data can be imported in a google doc/spreadsheet from Excel worksheet ? Is there any ways to copy and embed some portion of dynamic data from aspx webpage and paste/make an iframe in another blog (without server/local host) ?

  5. I am building spreadsheet for each of my players so they can see there progress but do not want the world to see the spreadsheet just the parents. Is there a way to place a link up on a web page that will open the spreadsheet but only for a private person?

    • Hi William,

      You can hit "Share..." and under "Who has access" you should select (by clicking "Change..." on the right) "Shared with specific people". Then you can put all the emails of the parents in the "Invite people:" box. Then all you have to do is copy the link in the "Link to share..." box and paste it on your web page. The people who click this link will be asked to log in. If a student logs in they won't be able to see the page. Only the google accounts whose emails you inserted in the "Share..." options of your document will be able to access the document.

      Only con about this is that if the parents don't have a gmail account it won't work.

      The other option you have is:
      Hit "Share..." and under "Who has access" you should select (by clicking "Change..." on the right) "Anyone with the link". You'd then have to email the link to the parents so that they could see it, but if you post it on the webpage everyone on the web who visits the page could see the spreadsheet by clicking the link.

      Please don't hesitate to ask if you have more questions.

      Best,

      Sara C

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>