How to Embed a Google Drive Folder in a Website

How to embed a Google Drive folder in a website

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

Embedding google drive folder using embeddedfolderview does not seem to work anymore

... and now I found the real fix:
iframe src: https://drive.google.com/embeddedfolderview?id=0B0B_0Ab9ZYwkZzNFbzNWbWtLSkU&resourcekey=0-G7RnuTSb1qRJ55nGXkSofw#grid

after I Embedded a Google Drive folder on my web page is there any way to get number of files in to my web page?

Short answer

You can't.

Long answer

You can access an element inside an iframe of your page with javascript something like this:

 window.frames['frameid'].contentDocument.getElementById('elementid')

however, for security reasons, the "same origin policy" https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy applies. So, this method will not work in your case, because the domain in one origin the one of the iframe (drive.google.com) is not the same as the domain a different origin, your page.

How to embed Google Drive images into a webpage?

If I understand what you are aiming for, it's pretty much hosting the images from the Google Drive. Looked around the community and found some stuff that I think is what you're looking for or at the very least, can help you have an idea on how to do it.

First, is from this answer. You just have to use this URL format:

https://drive.google.com/uc?export=view&id=<fileId>

-- providing the file ID. There is a note though, Note: this link seems to be subject to quotas. So not ideal for public/massive sharing. But this proves that you can retrieve the files (in your case, images) from the file drive.

Second, is the top answer from the same post as above. Simply states that it is very much possible, provided that you put the files in a public folder, then retrieve it using the following URL:

https://googledrive.com/host/<folderID>/<filename>

Lastly, is to follow the tutorial video. It's similar to the second answer where the image should also be shared publicly (haven't really tried to tweak around, try it out maybe it can also work if it's only shared selected users), get the shared link and use gdurl.com which will turn the shared link and turn it into a hosted link which will be a direct link to the image.

---

Related Topics