How to embed a Google Drive folder in a website

Question

I have a folder in Google Drive that I d like to embed in my website  I can t find an embed code or anything documented in Google Drive Help articles

User · Accepted Answer

Google Drive folders can be embedded and displayed in list and grid views:

List view

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>

Grid view

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Q: What is a folder ID (FOLDER-ID) and how can I get it?

A: Go to Google Drive >> open the folder >> look at its URL in the address bar of your browser. For example:

Folder URL: https://drive.google.com/drive/folders/0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

Folder ID:
0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

Caveat with folders requiring permission

This technique works best for folders with public access. Folders that are shared only with certain Google accounts will cause trouble when you embed them this way. At the time of this edit, a message "You need permission" appears, with some buttons to help you "Request access" or "Switch accounts" (or possibly sign-in to a Google account). The Javascript in these buttons doesn't work properly inside an IFRAME in Chrome.

Read more at https://productforums.google.com/forum/#!msg/drive/GpVgCobPL2Y/_Xt7sMc1WzoJ

User · Answer

For business Gsuite apps or whatever they call them  you can specify the domain  had problem with 500 errors with the original answer when logged into multiple Google accounts     lt iframe    src  https   drive google com a YOUR COMPANY DOMAIN embeddedfolderview id FOLDER-ID     style  width 100   height 600px  border 0    gt   lt  iframe gt

User · Answer

Embedding a Google Drive directory in an IFRAME  Google Drive folders can be embedded and displayed in list and grid views  in which all you can do is click a file or folder to open it on a new tab    To do so  simply replace FOLDER-ID with your own in   List view   lt iframe src  https   drive google com embeddedfolderview id FOLDER-ID list  style  width 100   height 600px  border 0   gt  lt  iframe gt    or without specifying a mode  since list mode is the default    lt iframe src  https   drive google com embeddedfolderview id FOLDER-ID  style  width 100   height 600px  border 0   gt  lt  iframe gt    Grid view   lt iframe src  https   drive google com embeddedfolderview id FOLDER-ID grid  style  width 100   height 600px  border 0   gt  lt  iframe gt    Obtaining your folder id  The id is the hash  alphanumeric gibberish  after folders  in the URL of the folder   You can see the URL in the address bar of your browser when you open the Drive folder   For example  in   https   drive google com drive folders 0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2    The Folder ID is 0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2   Folder with G Suite Google Apps domain  If your folder is part of a Google Apps domain  you can add the domain to the URL to alleviate the permission problems  detailed further ahead     lt iframe src  https   drive google com a MY DOMAIN COM embeddedfolderview id FOLDER-ID grid  style  width 100   height 600px  border 0   gt  lt  iframe gt    Just replace MY DOMAIN COM and FOLDER-ID with your own   Caveat with folders requiring permission  This technique works best for folders with public access  Folders that are shared only with certain Google accounts can cause trouble when you embed them this way  depending on which Google accounts are active on the user s browser    If the user has not logged in to any Google account  then nothing appears in the frame  If the user is logged onto an account without authorisation to access the folder  the frame will contain the message You need permission  with some buttons to Request access or Switch accounts  but if you click on this last  the frame blanks out  If the user logs into an account without proper permissions  and later adds the authorised account  on loading the embedded Drive Google will resort to the first active account  and the user will see You need permission  unless    If the URL contains a Google Suite domain  and the user is logged into that domain s account  the embedded view will work  even if the user logged to another account first    The blank frames are because Google forbids embedding its login page in an IFRAME  presumably to prevent account stealing   via the X-Frame-Options header  which if set to SAMEORIGIN will cause any well-behaved browser to refuse to load the page if it s not in the same domain  v g  drive google com    You can see this in the developer console of your browser   TL DR  To get a list or grid view of a Drive folder  in which all you can do is click a file or folder to open it on a new tab   use    lt iframe src  https   drive google com embeddedfolderview id FOLDER-ID grid  style  width 100   height 600px  border 0   gt  lt  iframe gt    or alternatively  for a Google Suite Apps Drive    lt iframe src  https   drive google com a MY DOMAIN COM embeddedfolderview id FOLDER-ID grid  style  width 100   height 600px  border 0   gt  lt  iframe gt    Replace MY DOMAIN COM and FOLDER-ID with your own  remove  grid to get a detailed file list   For private folders  have your users log to the correct account before loading the page with the embedded folder  if the folder is in a Google Apps domain  you can add the domain to the URL   Else  they must log into the authorised account before any other    this answer is an edit of Mori s  but it was rejected as it changed his intent  somehow

User · Answer

At the time of writing this answer  there was no method to embed which let the user navigate inside folders and view the files without her leaving the website  the method in other answers  makes everything open in a new tab on google drive website   so I made my own tool for it  To embed a drive  paste the iframe code below in your HTML    lt iframe src  https   googledriveembedder collegefam com  key YOUR API KEY amp folderid FOLDER ID WHIHCH IS PUBLICLY VIEWABLE  style  border none   width  100   gt  lt  iframe gt    In the above code  you need to have your own API key and the folder ID  You can set the height as per your wish   To get the API key   1   Go to https   console developers google com  Create a new project   2   From the menu button  go to  APIs and Services  --   Dashboard  --  Click on  Enable APIs and Services    3   Search for  Google Drive API   enable it  Then go to  credentials  tab  and create credentials  Keep your API key unrestricted   4   Copy the newly generated API key   To get the folder ID   1  Go to the google drive folder you want to embed  for example   drive google com drive u 0 folders 1v7cGug e3lNT0YjhvtYrwKV7dGY-Nyh5u  this is not a real folder   Ensure that the folder is publicly shared and visible to anyone   2   Copy the part after  folders    this is your folder ID   Now put both the API key and folder id in the above code and embed   Note   To hide the download button for files  add   amp allowdl no  at the end of the iframe s src URL   I made the widget keeping mobile users in mind  however it suits both mobile and desktop  If you run into issues  leave a comment here  I have attached some screenshots of the content of the iframe here

[html] How to embed a Google Drive folder in a website

List view

Grid view

Caveat with folders requiring permission

Examples related to html

Examples related to google-drive-api

Examples related to embed