How To Embed Google Drive Folders Into a Website
Post date: Jan 30, 2014 2:51:21 AM
Embedding Google Drive Folders
When searching the Google Drive Support website, I can find no explanation of how to embed an entire Google Drive folder into a website page. However, I was able to find a simple way to add a drive folder to a Google Sites page. Nevertheless, what I was looking for is a way to embed a drive folder into a Ning Network and after figuring this out, I wanna share. So, below you will find both my workaround for hacking it into a web page and the solution for embedding a Google Drive Folder into a Google Sites Page.
Grid and List Views
Embed Google Drive Folder into a Ning Webpage
Google Drive folders can be embedded and displayed in list and grid views:
<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list"width="800" height="600" frameborder="0"></iframe>
<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid"width="800" height="600" frameborder="0"></iframe>
Sharing the Folder for Embed
Simply share your Drive Folder to "Anyone with the Link" so that it shows up in the page you embed it in. Now look in the address bar for the FOLDER-ID and replace it in the cod above. Example: If you have a folder address like this: https://drive.google.com/?tab=mo&authuser=0#folders/0B4wHVemz7IveTFRBTnRHcHBmTEU Folder ID will be: 0B4wHVemz7IveTFRBTnRHcHBmTEU
Example for List View:
Embed Google Drive Folder into a Google Sites Page
Just open the Sites editor, Insert>Folder and select the checkbox next to the folder you want to appear. Modify the gadget properties box to meet your requirements, click Save and then Save your page and you're done. Here is a short video on how to embed a Google Drive Docs List into a Google Site.
Example of Grid View: