Tutorial
Back to Tutorials
Embedding a Google folder
Quick tutorial showing how you can embed a Google Drive folder into a Frog site
Register to attend Frog's Release Showcase... Register Now
Embedding a Google folder
UPDATE:
We've turned this tutorial into a FrogCode widget - click here if you'd prefer to use that instead
Step 1
Create a folder in Google. Set the sharing settings to the level you wish. If you do not set the access to Anyone with a link, you should probably include a link on your Frog page to your Google SSO in order to allow users to quickly gain access.
Add the files you want to view to this folder (their sharing settings will be set to the same as the folder) unless you change them
Step 2
Copy the web address of the folder.
Step 3
In your Frog page, add in an HTML widget and add in the following code:
<iframe frameborder="0" style="width:660px; height:220px; overflow-x:hidden;" src="your_modified_url" ></iframe>
The code required for your_modified_url is not the web address of your folder. We need to modify it slightly. We want the unique ID at the end of the web address. In the example I'm using, it's the section in red:
https://drive.google.com/drive/u/0/folders/0B4-LF_moG8y7Ty1EREtSNkMyNXM
We need to modify the following address, adding the code to the section id=
https://drive.google.com/embeddedfolderview?hl=en&id=0B4-LF_moG8y7Ty1EREtSNkMyNXM#list
So, our end result looks like:
<iframe frameborder="0" style="width:660px; height:220px; overflow-x:hidden;" src="https://drive.google.com/embeddedfolderview?hl=en&id=0B4-LF_moG8y7Ty1EREtSNkMyNXM#list" ></iframe>
NOTE:
If you are linking from your school Google account, the web address may be slightly different. Instead of:
https://drive.google.com/embeddedfolderview?hl=en&id=0B4-LF_moG8y7Ty1EREtSNkMyNXM#list
In front of the /embeddedfolderview? it will probably be something like:
https://drive.google.com/a/your_school/embeddedfolderview?hl=en&id=0BzjtF_3pq5baU3dXazhKbVZvV3M#list