2/10/25, 5:00 PM html - How to embed a Google Drive folder in a web page - Stack Overflow

How to embed a Google Drive folder in a web page

Asked 11 years, 1 month ago Modified 1 year, 8 months ago Viewed 224k times

I have a folder in Google Drive that I'd like to embed in my web page. I can't find an embed
code or anything documented in Google Drive Help articles.
64
html google-drive-api embed

Share Improve this question edited Mar 29, 2023 at 6:56 asked Dec 19, 2013 at 12:37
Follow Mori
6,780 19 68 103

Is there a way to use <embed> to autosize the content better than an <iframe> ? – Merchako May 8,
2019 at 21:17

For a better alternative (with ability to navigate to sub-folders & previewing of files), see this:
medium.com/@thesumitsingh/… – ssy Jan 28, 2023 at 20:30

4 Answers Sorted by: Highest score (default)

Update
116 I just wrote a blog post and created an embed code generator to make your life a bit easier.

1. Go to your Google Drive.

2. Right-click on the folder.

3. Select Share.

4. Open the General access drop-down menu.

5. Select Anyone with the link to publish your folder.

6. Click Copy link and then Done.

You will get a URL like the following:
https://drive.google.com/drive/folders/1qGwpjmQIQO8rN1odas0njDSf72VRrTCa?
usp=sharing
You can see your folder ID in bold: 1qGwpjmQIQO8rN1odas0njDSf72VRrTCa

7. Google Drive folders can be embedded and displayed in list and grid views. Put the
folder ID in one of the following iframe sources:

List view
https://stackoverflow.com/questions/20681974/how-to-embed-a-google-drive-folder-in-a-web-page 1/8
2/10/25, 5:00 PM html - How to embed a Google Drive folder in a web page - Stack Overflow

<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>

Share Improve this answer Follow edited Jun 13, 2023 at 18:44 answered Dec 19, 2013 at 12:37
Mori
6,780 19 68 103

2 I just tried this extensively. Nothing at all renders in my iframes. Google Docs has always seemed so
close to be so much better than it is. Sigh. Even if I had to pay a little for a url that'd work, I'd consider
it. – James T Snell Feb 21, 2014 at 0:28

1 This works well - is there a way to grab just the URL's? – Richard Griffiths Feb 1, 2015 at 16:13

3 This works well in latest firefox and chrome. Minor concern here is all the folder/doc links open in a
separate window. Is there a way to browse drive folders within the same iframe?. is there a way we
could use <base target="_parent" />? – Anuruddha Mar 12, 2015 at 7:16

1 @Doc I used to get a blank IFRAME when I didn't have permission. I think it's better now, since a
message appears saying You need permission. The embedded folder view also returns some buttons
to help you Request access or Change accounts. Sadly, these buttons don't work inside an IFRAME
(at least not with the version of Chrome I'm using). If your browser lets you open the frame in another
tab, you can work around this. If you need to switch accounts to get access, the original embedded
access won't switch, but you can use the tabbed-out one. – Fuhrmanator Jan 13, 2016 at 17:57

3 Is there a way to change the sorting order? – pihentagy Apr 29, 2020 at 13:00

Embedding a Google Drive directory in an

30 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 and for private folders (as of 2022) RESOURCE-KEY with your own in:

List view

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

or without specifying a mode, since list mode is the default:

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

https://stackoverflow.com/questions/20681974/how-to-embed-a-google-drive-folder-in-a-web-page 2/8
2/10/25, 5:00 PM html - How to embed a Google Drive folder in a web page - Stack Overflow

Grid view

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

Obtaining your folder id

You can simply replace drive/folders/ with embeddedfolderview?id= in a standard Drive
sharing link.

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. The Resource
Key you can find in the sharing link, after copying it. For example, in:

`https://drive.google.com/drive/folders/0B9s5Ht8qysnFMXhaZDFfQlJEalE&resourcekey=0-
in7UrBAlXKTSN6poaUSl9g`

The Folder ID is 0B9s5Ht8qysnFMXhaZDFfQlJEalE and the Resource Key is 0-

in7UrBAlXKTSN6poaUSl9g .

Folder with G Suite/Google Apps domain

Since the introduction of the Resource Key parameter in 2022, and as of Jan 2023, embedding
G Suite domain folders fails with a 403 Error ("We're sorry but you do not have access to this
page. That's all we know."). The following is left just in case they fix it sometime.

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):

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

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:

1. If the user has not logged in to any Google account, then nothing appears in the frame.

2. 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.

https://stackoverflow.com/questions/20681974/how-to-embed-a-google-drive-folder-in-a-web-page 3/8
2/10/25, 5:00 PM html - How to embed a Google Drive folder in a web page - Stack Overflow

3. 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...

4. 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:

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

For a Google Suite/Apps Drive, the following is broken as of Jan 2023:

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

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)

Share Improve this answer Follow edited Jan 11, 2023 at 22:26 community wiki
5 revs, 2 users 99%
Chema

Is there any way to get a carrousel (>) arrow key for enlarging images of the iframe? – Kuhan Jan 4,
2020 at 16:18

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,
5 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:
https://stackoverflow.com/questions/20681974/how-to-embed-a-google-drive-folder-in-a-web-page 4/8
2/10/25, 5:00 PM html - How to embed a Google Drive folder in a web page - Stack Overflow

<iframe src="https://googledriveembedder.collegefam.com/?
key=YOUR_API_KEY&folderid=FOLDER_ID_WHIHCH_IS_PUBLICLY_VIEWABLE" style="border:none;"
width="100%"></iframe>

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: This works only for files and subfolders you actually uploaded in the GDrive folder,
not the subfolders you add as 'shortcut'. If a subfolder is displaying improperly, download
it's contents and upload it to drive inside that specific folder. If you 'Move' folder within
google drive, GDrive adds it as a 'shortcut'.

To hide the download button for files, add '&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.

https://stackoverflow.com/questions/20681974/how-to-embed-a-google-drive-folder-in-a-web-page 5/8
2/10/25, 5:00 PM html - How to embed a Google Drive folder in a web page - Stack Overflow

https://stackoverflow.com/questions/20681974/how-to-embed-a-google-drive-folder-in-a-web-page 6/8
2/10/25, 5:00 PM html - How to embed a Google Drive folder in a web page - Stack Overflow

Share Improve this answer Follow edited Dec 14, 2022 at 14:12 answered Apr 4, 2020 at 21:03
ssy
169 3 9

2 It only displays the text: "Browse files" – Chips147 Oct 19, 2020 at 12:37

1 @Chips147 probably the API key or folder id is incorrectly copied. Or maybe the specific folder you are
trying to display is not publicly viewable (sharing permissions-> anyone with link can view) – ssy Oct
20, 2020 at 20:45

https://stackoverflow.com/questions/20681974/how-to-embed-a-google-drive-folder-in-a-web-page 7/8
2/10/25, 5:00 PM html - How to embed a Google Drive folder in a web page - Stack Overflow

Thanks for the solution! Note: all subfolders and files should be also open. Questions: 1) is there an
open code for the project? 2) Can the developer contact me or my client? They want to ask for help
with a similar task. – Max Makhrov Apr 4, 2022 at 7:25

1 @MaxMakhrov the code isn't open. You can connect with me for specific help at studyforexams at
gmail dot com – ssy Apr 5, 2022 at 9:00

1 @AnkitChauhan You can place security restrictions on your api key from GCP, which will make it safe.
Even i thought about this earlier, but then i saw that on Google Drive, even google's key is exposed.
(you can check the api calls Google Drive makes). They have protected it by adding domain restrictions.
So if somebody else gets the key, they can't use it. – ssy Sep 7, 2022 at 13:22

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
3 accounts).

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

Share Improve this answer Follow answered Jan 14, 2017 at 0:09
ElDog
1,427 12 19

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this
question. The reputation requirement helps protect this question from spam and non-answer activity.

https://stackoverflow.com/questions/20681974/how-to-embed-a-google-drive-folder-in-a-web-page 8/8