Tutorial

Back to Tutorials

Embedding a Google folder

Quick tutorial showing how you can embed a Google Drive folder into a Frog site

Explore... Our MAT Solution

Share this Page

Embedding a Google folder


Very soon we hope to have some news for you about Google integration with FrogLearn, but if you can wait and want to embed a Google folder, you can already do this using the HTML widget.

 

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&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
 

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

Tutorials
 

Quicklinks