7

I have a Google Docs collection that I would like to embed into an iframe:

https://docs.google.com/open?id=0B6yYgWS-CUJ2ZTUxZGI4MGUtMWM0Yy00YzY0LWIxOTMtMDFlN2RjNDAxNGM2

The problem here is that Google has set the X-Frame-Options header and so it seems they only allow this collection to be embedded into a Google site:

X-Frame-Options:    SAMEORIGIN

screenshot-with-shadow.png

Now I realize Google's reasons for not allowing their content in iframes some of the time, but this is one case where I feel like it would be nice to have the ability to do this.

With documents Google also allows two methods of "sharing"

  1. You can click on the "Share" button and set visibility, which will give you a link to a document
  2. Or you can click on "Publish to Web" and it will give you a link or an iframe option.

The iframe url is similar to the link URL except that it has the "&embedded=true" query variable at the end. The same thing is true for Google Maps except the parameter is "&output=embed"

Who while I believe there is nothing I can do with headers or Javascript on my site to allow the content of an iframe for a Google Docs collection to load, I was hoping someone might know of a way to generate embed code for a Google Docs collection which would allow it to be loaded in an iFrame.

Community
  • 1
  • 1
cwd
  • 53,018
  • 53
  • 161
  • 198
  • I think it might be possible to embed a Google Docs collection into a web page using a proxy server. See here: http://stackoverflow.com/a/7966754/975097 – Anderson Green Mar 24 '13 at 02:11
  • @AndersonGreen - just put that as the answer and I will accept it. Thanks! – cwd Mar 26 '13 at 14:52
  • I've been able to put Google Search in an iframe using a proxy server, but I've had no luck with Google Docs so far. With all of the proxy servers that I tried, I was redirected to Google Docs, outside of the proxy server (even when I tried to access Google Docs from within the proxy server). I'll have to keep trying - Google Docs seems to be circumventing proxy servers by redirecting out of them somehow. – Anderson Green Mar 26 '13 at 15:53
  • Here's a relevant Google Search query about proxy servers that might work with Google Docs: https://www.google.com/#hl=en&output=search&sclient=psy-ab&q=google+docs+proxy&oq=google+docs+prox&gs_l=hp.3.0.0l2j0i22i30l8.944.4912.1.6109.16.15.0.0.0.0.304.1576.11j3j0j1.15.0...0.0...1c.1.7.hp.jFHoqrXFPWM&psj=1&bav=on.2,or.r_cp.r_qf.&bvm=bv.44158598,d.dmQ&fp=dc8abc04c054405e&biw=1366&bih=596 – Anderson Green Mar 26 '13 at 16:07
  • This should help: [How to embed a Google Drive folder in a website](http://stackoverflow.com/q/20681974/478018) – Mori Dec 19 '13 at 12:43

2 Answers2

4

Update: It looks like Google has allowed embedding Google Docs/Drive items via iFrame. Here are the current headers for that page (note that this URL is after the redirect):

enter image description here

Rick Hanlon II
  • 20,549
  • 7
  • 47
  • 53
0

Try these:-

single – setting to true displays just one sheet in the spreadsheet. The default sheet it will display is the first one created in the spreadsheet. This can be changed using ‘gid’ below.

gid – this needs to be a numeric identifier of the sheet you want to display. The first sheet created is 0, but others will have longer identifiers. To find the ‘gid’ for the sheet you want to display, go to the spreadsheet in Google Apps itself, and click on to your desired sheet. The URL in your browser should change to something like this: https://docs.google.com/a/mycompany.com/spreadsheets/d /15B___SOYjsRmU9tiwZly318HZnFHOHeayS6UTHx7Pu2I/edit#gid=419657423

The bit at the end of the URL shows you the ‘gid’ for the sheet, and that is the number you need to bring into the shortcode in your website.

range – set this to the cell range you want to display within the sheet (or leave it out to display the whole sheet). In our example, we set this to f2:g6. Note if you’re being pedantic then you should really change the ‘:’ to ‘%3A’ since colons should be encoded in URLs – but most browsers should understand the colon, so don’t worry. If you like to be correct, you’d use range=f2%3Ag6 instead.

headers=false - Row numbers and column letters are not displayed.

widget – setting this to false removes the sheet selector bar when it’s embedded.

chrome – setting this to false removes the title bar showing the spreadsheet name, above the sheet.

So putting all together:-

<iframe> src="https://docs.google.com/spreadsheets/d/[Googlekey]/pubhtml?gid=28&range=a1:s45&single=true&widget=true&headers=false" </iframe>

Allan

Allan Thompson
  • 131
  • 1
  • 6