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.

googledrive

 

Step 3

 

In your Frog page, add in an HTML widget HTML.pngand 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&amp;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&amp;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&amp;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&amp;id=0BzjtF_3pq5baU3dXazhKbVZvV3M#list


Product HUBS
 

FrogLearn 600_600.png  FrogPlay 600_600.png  FrogProgress-600_600.png  MobileApps_600_600.png

Quicklinks
 

BLOGS