By classifying and sorting various files that you want to share with members, board members, and/or voters into categories/folders, files on similar topics become easier to find. Also, web administrators can add new files on the same topic to a folder in your League’s Google Drive and have it appear on your MyLO site quickly, with no extra steps other than minor tweaks.

This guide provides the steps (including prerequisites) of how to embed Google Drive folders into your site; the steps for creating these Google Drive folders are also provided.

Note: you will need a Google/Gmail account before you start this process. A local League account is preferable to a personal one.***We recommend having a space to copy and write text (e.g., a notepad, texteditor, empty email, or Word document) open and ready to use as your workspace. You will be copying different pieces of text, and will need to keep them handy as you copy and paste other text.

The Prerequisites

FIRST SECTION - Sign in to Google account

SECOND SECTION - Upload files to Google Drive

1. First, you must upload the files you want to share (on any MyLO page) into your Google Drive. To upload files, click on +New. 
   
   
   

   SECOND SECTION - Step 1

2. Select File Upload. Files can be in a variety of formats, not just PDFs. 
   
   
   

   SECOND SECTION - Step 2

• TIP: it is quick and easy to upload many files at once, and can be done prior to creating folders.

THIRD SECTION - Create folders in Google Drive

1. Create the folders that these files will occupy. To do so, click on +New. Select +Folder.
   
   
   

   THIRD SECTION - Step 1

2. Name the folder by topic of the documents it will contain.
3. Once documents are uploaded, you can drag each into the appropriate folder OR you can right-click the file, and choose to Move to the appropriate folder.

FOURTH SECTION - Turning link sharing on in folder(s)

After the files are in folders, you will need to get a shareable link to the folders. Refer the screenshots below for instructions.

FOURTH SECTION - Step 1

1. Locate the Google Drive folder you are adding to MyLO. In this screenshot, the Google Drive folder Content Analysis is the target folder.

FOURTH SECTION - Step 2

2. Right click on the folder. A menu panel will open. Choose Get shareable link. This step allows those with the shareable link to view the documents within that folder. So the embed code you will create with this shareable link (and eventually add to your MyLO site) will grant viewing permission to your audience.  For more on changing permissions settings for your Google Drive folder, visit Share folders in Google Drive on the Google Drive Help Site.

FOURTH SECTION - Step 3

3. The link sharing capability for that folder is automatically turned on. The link will automatically be copied to your clipboard, too. Paste the link into a text file or other document file. From there, you can select the portion of the link that is YOURID to paste into the <iframe> where it goes. ***It's recommended that you use a text editor (such as Notepad, an empty email, or a Word document as your "clipboard"--because you will be copying and pasting for many of these steps, having a program like this open and accessible while doing this work will help you.

FOURTH SECTION - STEP 4

4. To confirm that you were successful in turning the link sharing on for this folder, you should see the icon of a head and shoulders appear. If you reach this step, you have successfully enabled link sharing for this folder!

The Final Steps

FIRST SECTION - Embedding Google Drive Folders

It will help to have a copy of the sample <iframe> code of either the list view or grid view copied and pasted into a text or other document file as a work space, before attempting to replace with the parts specific to your folder (parts to be replaced: YourID and Title/Description).

HTML embed code, a.k.a <iframe> code

• If you want your documents to be displayed in a simple list:
  <iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#list" width="100%" height="500" frameborder="0"title=”PDFs of SUBSTITUTE YOUR OWN FOLDER TOPIC HERE on Google Drive"></iframe>
• If you want your documents to be displayed in a grid with icons: 
  <iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#grid" width="100%" height="500" frameborder="0"title=”PDFs of SUBSTITUTE YOUR OWN FOLDER TOPIC HERE on Google Drive"></iframe>

Steps to make use of the desired embed code

1. Get the public URL of the folder; this is the same URL that was automatically copied to your clipboard in step 3 of the Fourth Section. This might look light like this: https://drive.google.com///#folders/unX9VBU8x9m66klrJdZv. Copy the folder ID, that's the last bit of the URL, in this example: unX9VBU8x9m66rJdZv. (include underscores if any).
1. TIP: copy the public URL for the folder you are adding to the embed code when you are activating link sharing. (Refer to step 3 of Fourth Section.)
2. Paste your folder ID into the text of the embed code where the text, YOURID is located in the URL. Be sure to not add spaces or alter the text in any way when pasting it into to the <iframe> you choose. If you do, the embed code will appear as text only.
3. Copy the iframe embed code with YOURID added, and customize the title (description) of the files in the folder. 
1. Example: title="Archives of our ByLaws on Google Drive". Adding this title will tell screen reader users what they are entering and enables them, and keyboard users, to tab into and out of it as if it were part of MyLO (since it is technically a portal into a separate website). PLEASE NOTE: the title will not appear on your MyLO page. It is for accessibility purposes (access by screen readers). Our main reason for moving away from PDFs is to increase accessibility, and this is one big way of doing that for individuals with low or no vision.
4. Return to your MyLO site, select the page you’d like to display the folders on, and add a New Draft or Edit (existing) Draft. In the Body window (or Formatted Text window), type in the desired header for this folder, and format heading style to your preference.
5. Select the Source option (List or Grid view) and paste the iframe embed code into the Body with Embed Code window. Click Save.

Do that for each folder. Use a new Formatted Text window and below it a new Body with Embed Code, to keep the various folders and embedded <iframe> codes straight and connected in the right place.

Publish and then refresh your web browser to view the page. The headings will display and the file icons and their names will be listed below. Different types of files will have different file icons.

SECOND SECTION - Layout

The final step is to tweak the layout on the page. In the pasted iframe embed code, a default height for the iframe is set at 500 (height="500"). You can change that number in each previously pasted code, depending on the number of files in each folder. Try 150, if a folder has just one item in it. Try 200 for folders with two items, and perhaps 250 for folders with three files. Publish and refresh to decide if the layout looks like you want.

---------------------------------

Examples