If your team uses Google Drive, then you probably have folders of files for everything. Wouldn't it be nice to designate a folder in your Drive that houses the files listed on your web page? It's easy.


The Google Drive Embed widget is used to target that folder on your Drive. Once done, when you drop files into your Drive folder, they'll just appear on your website. When you update a file, the same file is updated on your website... all without even having to log in!

googledriveembedn.jpg


  1. Create a folder in Drive and load some files into it. 
  2. Select 'Get shareable link' for this folder. This will give you a public URL that looks similar to this: https://drive.google.com/open?id=0BysuoErY3Zdn2eRkWEl5cnsTFU (that's just an example link of course). 
  3. Go edit the page you wish to list the files on. Select the Google Drive Embed widget. Copy the URL into the "Google Folder ID" field of the widget. Remove the parts of that URL that are not needed. We only want to keep the unique ID part of the URL, and it's the part that follows the = sign. The widget will help you identify the folder ID. It will look something like this: 0BysuoErY3Zdn2e1kWEl5cnsTFU
  4. Click the "Create" button and be sure to Save/Publish your page.

For those wanting to dig deeper into the details, see the examples below. The iFrame HTML code that is used is:


For List view

 

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDERID#list" width="600" height="500" frameborder="0"></iframe>

 

   

This will show a list of files, and folders if you have any in there, within the Drive folder you targeted. To show a grid view (a preview thumbnails of the files and folders), you simply alter the URL, changing #list with #grid. Again, if you are using the widget, this is a simple selection in the widget properties.


Grid view

 

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDERID#grid" width="600" height="500" frameborder="0"></iframe>

 

   

You can also adjust the width and height of your iFrame using pixels or percentages. The figures above are just suggestions. Finally, remember to check the permissions you have set on this folder to make sure it's publicly accessible. Otherwise, your site visitors could get an access denied message from Google Drive.




Additional Articles