Back to Tutorials

Embedding a Google folder

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

Explore using Frog for CPD... Professional Development Platform

Embedding a Google folder


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:




We need to modify the following address, adding the code to the section id=




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>




If you are linking from your school Google account, the web address may be slightly different.  Instead of:




In front of the /embeddedfolderview? it will probably be something like:



Product HUBS

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