Update on embedding Google Drive folders

As I have written about before, embedding Google Drive folders is a great way to manage content on your LMS. Rather than logging in, uploading, and waiting, you simply copy files into a folder on your computer, and they magically show up in your LMS for students to view.The only drawback was that last year Google blocked iFrame embedding on all Google Drive folders and Google Sites pages.

 

Thankfully, Wes Fryer posted about this same thing and I was able to get back on track using the following code.

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>

Finding the Folder ID can be a pain, especially if you are trying to embed a folder within a folder within a folder. I tend to create folders for everything, so I have to make sure I use the correct Folder ID. For example, here is the URL for one of my folders that is nested 4 folders deep. I have color-coded each level of the URL (which has been slightly altered to keep the folder private).

https://drive.google.com/drive/u/0/#folders/0B5YVN51uO5e_ZHZlc3Zxd09pU3M/0B5YVN51uO5e_VlhYN1Q3MVoydjA/0B5YVN51uO5e_ei1aYmdFcW9EUWc/0B5YVN51uO5e_TFJkYzFhZ0ltbWs

The last sting of characters is for the folder I actually want to embed. I just need to copy that code and paste into the URL above where it says FOLDER-ID, like I did below:

<iframe src=”https://drive.google.com/embeddedfolderview?id=0B5YVN51uO5e_TFJkYzFhZ0ltbWs#grid” width=”800″ height=”600″ frameborder=”0″></iframe>

You can always change the width and height to make the folder fit the space on your page. The process is pretty simple, and once you have done it a few times, it’s actually quite easy. Good luck!

2 thoughts on “Update on embedding Google Drive folders

  1. Pingback: Curby Alexander » Using Google Drive as a file server | Teaching. Learning. Technology. Creativity.

Comments are closed.