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.
This question is related to
html
google-drive-api
embed
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>
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
.
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.
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:
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.
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)
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>
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.
Source: Stackoverflow.com