Embedding a Google Folder Into Your Teacher Site

Embedding a Google Folder is one of those things that is easy to do in a Google Site, but takes a little tinkering for other types of websites. My school system uses the SchoolWires CMS and my teachers routinely embed Google folders for newsletters, parent forms, and photos. This elegant solution makes updating your teacher site painless; just add the newsletter to the folder and it appears on your website. Lets look at how it’s done. If you are comfortable with creating and sharing Google folders, skip to Step 4.

Step 1

The first step is to create the folder in Google Drive and name it appropriately. Simply go to https://drive.google.com/ and click the red “Create” button on the left. Then, select “Folder.” Once you have named this new folder, it’s time to share it.

Step 2

Find the folder you’ve created in your Google Drive and double click to open. Once open, you will see breadcrumbs at the top telling you the path to this folder. This will look something like “My Drive > Your Folder Name.” Next to the name of your folder is a down-pointing arrow. Click this arrow to see the folder options menu. Then click "Share."

Step 3

The “share” window will appear. Find the small “Advanced” link on the bottom right and click this. The Advanced window will give you a few choices. The embedded folder will behave according to the sharing permissions that you set. From here you can share with specific people, share with a group, just your domain (if you are a GAfE school,) or make the folder public. We are going to make the folder public so that anyone visiting the website can see the contents. Click “Change” next to “Private - Only you can access.” Then, click the radio button next to “On- anyone with the link.” Press “Save,” then “Done.”

Step 4

Now that the folder is shared, you need copy the Folder ID. This is the string of letters and numbers at the end of the folder URL, after the last “/.” Select and copy this.

Step 5

With the folder ID copied, we are ready to create the iframe code. In the snippet below I have changed the color of the variables.

<iframe src="https://drive.google.com/embeddedfolderview?id=0BwdSULI4DlDjY3JEdHBtb0F1NXc#grid" width="100%" height="400" frameborder="1"></iframe>

• The green text is where you paste your folder ID. Replace what’s there with your own.
• The red #grid can also be #list. This changes how the iframe looks within your site.
• I like to keep my iframe widths at "100%" so that the iframe will expand to the available space. You could also use a fixed width by typing in a set number of pixels.
• Set the number of pixels that you need for the height. This might require some trial and error. ;)
• Finally, set whether you want the iframe to have a border. If so, a small pixel number is best, 1 or 2. Otherwise, leave it at "0."

Once you’ve edited your version of the iframe code above, copy and paste it into the HTML version of a webpage. For my teachers, they have to log into Schoolwires and navigate to the page where they want to embed the Google folder. Then, they have to click a “HTML” button on the page editor. This will open the HTML version of the page and they can paste in the code. I've added the above code to the bottom of this post.

That’s it! Despite the length of this post, it is really simple. Especially if you already know how to create and share a folder. One tip, the iframe will always sort alphabetically and this is not always ideal. I tell my teachers to number or date the files that they add to the folder so that they show in the intended order. I hope this is helpful, let me know if you’ve used a folder iframe!

Our Google Folder Embed: