How To Embed Google Drive Folders Into a Website

posted Jan 29, 2014, 6:51 PM by Jaybird Farrow [ updated Jul 18, 2014, 5:47 PM ]

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:

List View

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" width="800" height="600" frameborder="0"></iframe>

Grid View

<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:

Google Drive List View

Example of Grid View:

Google Drive Embed Grid 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.