With the Google Integration into Canvas it will allow you to embed files from your Google Drive. IT WILL NOT EMBED FOLDERS. However, there is a code that will allow you to do just that.
Within the Rich Content Editor (RCE)
To find the Google Drive access it is the 9th icon from the left, the one that is a down arrow. Click that and then a dropdown menu will show, within it is Google Apps (Google Drive).
Once you click on the button you will get a pop-up window as shown below. If you have not authorized Canvas to access your Google Drive account it will ask you to do so here. If you have allowed Canvas to authorized your Google Drive it will display you folders first and then your unfoldered files.
With this you can only link or embed files NOT folders.
If you wish to link a folder you will need to go to Google Drive site change the permission of the folder you wish to share to Anyone at LTU with this link can view, get the shareable link and paste into a page, assignment, discussion, anywhere there is the Rich Content Editor. If you want to embed the folder see the next accordion tab below this one.
- click the '+' in the Module you want you the file to be added too.
- Then from the drop-down select External Tool and look for Google Drive.
- Click that and it'll bring up the same image as above but instead of Embed and Link at the bottom it'll say Submit
- Choose your file and click submit.
Adding a folder will be in a similar way but instead of External Tool you'll use External URL and go to Google Drive site change the permission of the folder you wish to share to Anyone at LTU with this link can view, get the shareable link and paste into the sectioned for URL.
Creating the folder in Google Drive
Once folder is created in Google Drive, files added to folder, and permissions are set, now ready to incorporate and link the Google Drive Folder in Canvas.
Google Drive URL:
To embed this Drive folder within Canvas, you will need to extract the folder extension.
- Open the folder that you want to use in Canvas
- You will see the “ address” of the folder in the menu area
Highlight and copy to clipboard the text following /folders/172OPjI-zwa3fWL6nexsP-4i6Gj-hqsii
Method 1: HTML Code
< iframe width="700" height="500" src="https://drive.google.com/embeddedfolderview?id=YOURID#list" frameborder="0"></iframe >
This will show a list of files and folders within the folder you selected.
< iframe width="700" height="500" src="https://drive.google.com/embeddedfolderview?id=YOURID#grid" frameborder="0"></iframe >
Just make sure the folder is accessible to view, so check your folder permission within Google Drive, see above to view steps on how to do this.
To show a grid view (preview thumbnails of the files and folders), you simply alter the URL and change #list with #grid.
To quickly get the iframe code you can use this link:
Jacob Standish on the Canvas Community page created this page, http://canvas.cmslearns.org/tools/googleembedder/index.html, (Links to an external site.)to help faculty get the iframe code.
Once you have you code all set you will then copy and paste it into a Page in Canvas by:
- Clicking Edit
- Clicking HTML Editor
- Pasting the iframe code into the text box
Method 2: Design Tools
Add Drive Folder to Canvas Course
- Log into a Canvas Course and select Modules, create +New (Module), type in a name. Going to add a page in this module by clicking on the + to the right of the module
- Click down arrow and select Page from the list. Highlight/select New Page and type in a name to the right of Page Name. Click Add Item
- Once page opens, select +Edit. Need to add the HTML link to the Google folder in Edit mode.
- Open Design Tools(Rocket Ship appears at top right)
- Click “Add Advanced Elements” and HTML Snippets. Select Institutional Snippets, Google Drive Folder (List or Gird Views)
- Scroll up and click on Customize Style. Select Style iframes
- When Iframes open you will see the HTML code in the box under Source
- Click within this box and move cursor over until you see “YOURID”. Highlight only YOURID and replace with the folder address you copies earlier (see above picture. 172OPjI-zwa3fWL6nexsP-4i6Gj-hqsii). You may or may not see immediately, but once added.
Scroll down on the page and click Save