Google Docs

Working with iframe and embed Shared Google Docs

While teaching some students on using iframe or embed tags for display shared documents from Google Docs I discovered an issue.

Prior to class I had created a links.html page with iframe and embed tag, with shared copy links from Google docs to go over with my students which worked great prior to class and after class.
I used the web page to go over in class before having them create the same from their Google docs account. These are students that will most likely be updating web pages or doing web maintenance so they are learning everything from HTML4, to HTML5 and CSS.
Goal here was to become familiar with iframe, embed and sharing documents from google docs.
However, the links they copy from their shared documents failed. After several minutes trying to figure out what they did wrong, I discovered the issues was with Google Docs.
Without get into steps by steps exhausting testing that I completed today, I wanted to share my findings with others.
Bottom line when you “copy link” for single public shared documents, your link may appear like one of two like this: Not sure why each one maybe different, but they are!
 https://drive.google.com/open?id=documentidnumbersandcharters  
Note I did remove the document id from these links. What’s important is to look at the path for each links.
By adding “preview” at the end of either one of these paths your document will work with either Iframe or embed!
It should appear like this link below! On the 2nd link you do need to remove the view?usp=sharing first before adding /preview to end of the path.
If you were to email either one of these three links to someone in an email, they will all work, but not in web page using iframe or embed. Unless you add preview.
How I discovered this, I noticed that my working link.html page I created before class had “preview” at the end of the path. I did not do anything different when I copy links from Google Docs
Conclusion if you are struggling with getting shared docs to appear on web page using iframe or embed add “/preview” at the end of the path will correct the issue.
Note it did not make any difference using Chrome or Firefox to display the web page(s).
I know that many colleges and public schools have made the move to Google Docs and do shared documents on their web page, so this may help to clear up any issues you are having. Maybe Google docs will come out with solutions or explain my findings.

 

Advertisements