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.

Solution 1

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

Solution 2

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

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#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" 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>

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

<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.
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#grid" style="width:100%; height:600px; border:0;"></iframe>

or alternatively, for a Google Suite/Apps Drive:

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

Solution 3

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:

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

Solution 4

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

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

View more solutions

Comments

[E_Ri]

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.

[Victoria]

This solution is working for me, for some months now. It is true that the logged-in user must have view access to the folder to be listed.

[Richard Griffiths]

This works well - is there a way to grab just the URL's?

[Anuruddha]

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" />?

[iDVB]

I'm also interested in the same answer as @apremalal. Likely there is not going to be a happy answer as it seems that GDrive doesn't give even a ".." (back to parent) button in the view, so there would be no way to go back.

[Fuhrmanator]

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

[Siguza]

@Chema I just reviewed your suggested edit. You seem to have spent considerable time and effort on it, but one does not simply change the intent of a post, yet alone a highly upvoted one. IMO posting your own answer would be much better in this case.

[Chema]

@Siguza Will do (if I can find it somewhere), though could you clarify how did the intent change with my edit, exactly? As I recall, I simply added the bit about including the domain in the URL, and clarified in which situations you would get a blank frame or a permission request.

[Siguza]

@Chema This has been a much discussed topic, but roughly: the guidelines for editing answers are more strict than for questions, even changing formatting is a delicate thing. Your edit added new examples, new information and a new guiding section - all of which we cannot ad-hoc assume the author to have wanted to include. I think such an edit would have been fine on a wiki, but answers in Q&A aren't really that. I don't know if there's a source link to it, but you can see your edit here.

[Chema]

Thanks @Siguza! Only because of your thoughtful comments did I realise that my edit had been rejected (a notification would've been nice), and that SA is, indeed, not a wiki, but a whole different kind of animal. I won't bother trying to learn the psychology of it, though I now also understand why too often the top answer is obsolete. The Community Wiki thing seems a step in the right direction to allow more prompt updates, if a small one. Thanks again!

[Kuhan]

Is there any way to get a carrousel (>) arrow key for enlarging images of the iframe?

[Muniain]

If I have 1000 files in the folder, it does not show up everything.

[kkessell]

Is there a way to change the sorting order?

[Chips147]

It only displays the text: "Browse files"

[ssy]

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

[Max Makhrov]

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.

[ssy]

@MaxMakhrov the code isn't open. You can connect with me for specific help at studyforexams at gmail dot com