General Information
      Back to home
      1. Help Center
      2. Google
      3. General Information

      Embed a Google Drive folder on your web page

      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 appear on your website... all without even having to log in!

      googledriveembedn.jpg

      1. Create a folder in your Google Drive and load your files into it. 
      2. To get the URL for the folder, make sure to select the folder that you just created and click on the chain-link icon (Get Link) located at the top of the window to the right of Search.  On the window pop up that will appear make sure to share it with Anyone with the link and then click Copy Link.  This will give you a public URL that looks similar to this: https://drive.google.com/drive/folders/1H12L_dOFKErKtKQp55xLFwvAjs4Mwv3bvd?usp=sharing (that's just an example link of course). 
      3. Edit the page you wish to list the files on. Select the Google Drive Embed widget. Paste the URL of the folder 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: 1H12L_dOFKErKtKQp55xLFwvAjs4Mwv3bvd
      4. Click the Create button and be sure to Save/Publish your page.

      There is an alternate way to place a Google Dive onto a page using the HTML Source widget. For those wanting to dig deeper into this alternate way, 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), 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 it publicly accessible. Otherwise, your site visitors could get an access denied message from Google Drive.


      Additional Articles