How to Embed a Google Drive Folder in the RCE

Difficulty: Advanced

One of the easiest ways to make a lot of files available for students is to use Google Drive to store your files, then embed that into a Canvas page. Here is an example using the grid view.

Jacob Standish created a tool for faculty to use to generate the code for this Links to an external site..

Here are the steps to do this:

  1. Use your own Google account to create the file folder you want to share
  2. Right-click the folder in Google
  3. Click Get shareable link
  4. Copy the URL that is generated
  5. Paste the URL into http://canvas.cmslearns.org/tools/googleembedder/index.html Links to an external site.
  6. Copy the code created

To embed this in Canvas:

  1. Create a new page
  2. Edit the page
  3. Click the HTML Editor link
  4. Paste in the code
  5. Save

You can adjust the generated code in a couple of important ways. You can change the height depending on what folder you are embedding and how many files there are. It's probably best to keep this in the 250 to 600 range.

You can create a list or a grid by changing one word. It defaults to list, so just change the word list to grid to get a display like the example above.

Example List View:

<iframe src="https://drive.google.com/embeddedfolderview?id=0B3IELnKUZKRqMjQ4MjQ4ZjktZjY2Ni00NWI3LWIwNmQtNjYyOD#list" width="100%" height="600">Loading...</iframe>

Example Grid View:

<iframe src="https://drive.google.com/embeddedfolderview?id=0B3IELnKUZKRqMjQ4MjQ4ZjktZjY2Ni00NWI3LWIwNmQtNjYyOD#grid" width="100%" height="600">Loading...</iframe>