Embed a Google Drive folder on your website
If you want to show a folder from Google Drive on your website or blog, you can use an iframe to accomplish this.
First, get the public URL of the folder. This might light like this: https://drive.google.com/#folders/unX9VBU8x9m66rJdZv (not an actual link). That last bit is the folder ID: unX9VBU8x9m66rJdZv.
This will show a list of files and folders within the folder you selected. To show a grid view (preview thumbnails of the files and folders), you simply alter the URL and change #list with #grid.
Just make sure the folder is accessible to view, so check your folder permission within Google Drive.
Share the Knowledge
Author Bio
Thank you for your interest in my blog! On this miniblog, I write mostly short (technical) blog posts that might interest other people. Read more about me or feel free to contact me.
50 thoughts on “ Embed a Google Drive folder on your website ”
Hello, We are using iframe to embed google drive folders into our updated webpages. This is really beneficial as it will allow different departments to update documents and save in the drive without having to actually post them on the web. However, we have an issue with the display of the last modified by user name being visible in the embedded drive. Is there a way to remove this or a filter code available where the name of the user can be hidden in some way?
Navigate to the Folder containing the Folder you want to share, then right click on the folder and select “Share”. Under the share options, click on “advanced” (lower right) and choose the option “Anyone who has the link can view”. This will allow sharing the folder without having to enter a password. Also, select “View only” to prevent others to add files to the folder.
Hi Thomas, I was wondering if there is any way to change the order in which documents are displayed. The iframe has the documents listed alphabetically and I would like to have it listed by last added first? Can this be done? Thanks
Hey Kaylynne
Yes, this is indeed possible.
Head over to the Google Drive website and go to the folder you are embedding on your webpage.
Then, sort by last modified. Once you refresh the page with the iframe embed, the documents or files will be sorted by last modified.
Hi Thomas,
Was there any improvement on this topic? Till now it is impossible to sort the embedded iframe.
This has been really helpful. Thank you so much! One problem I’m still having is that if I embed a folder in list view, the folders inside that folder open in grid view. Any way to make subfolders continue opening in list view?
This method has a serious drawback if you have to switch Google accounts (multiple account access). Let’s say a user needs permission to read the folder, but she’s logged in with a different Google account. Google will show a message saying “You need permission” and a helpful “Switch account” button. However, these buttons contain javascript that (as of the time of my writing, using the Chrome browser) do not work inside an IFRAME. It’s therefore not a great way to do this when permissions are required.
You need to enable link sharing for the folder. In sharing mode, click “get sharable link” to allow others to view the document if they have the link. This will allow anyone accessing the folder on your web page to be able to view the folder.
Thank you very much for this very helpful post. It would be nice, though, if Google offered as a widget similar to what box.com, for example, offers.
We migrate website content for customers from their old site, to their new site. We bulk download all the files from their live site and position them for them on the new site. Most of our customers are G Suite customers. Is it possible to somehow place and organize these files, and embed the iframe on their site… but have them OWN the files in the end? I don’t want these files showing up on my drive, in my searches, and frankly eating up my quota. Thoughts?
When I open a folder in Google Drive, and I’m logged into my Google account, I can search for words or phrases within documents. However, if I do the same without being logged in, I do not have the search feature. Can I incorporate the search feature as part of the embed? I’m very inexperienced with this; sorry if it’s a dumb question. The purpose is to post minutes to local government meetings on the government website. Citizens will search by subject matter; they won’t necessarily know the date on which a subject was discussed.
https://drive.google.com/open?id=0B7VbNz9IXmKyZkMtS0t5OWpZNUk
Hi! I followed your instructions but obviously there is something wrong : the backend I view the item correctly and when I go to view the article from frontend there is no trace … Thanks in advance.
First, thanks for share this!
Second, do you know some app or way to show a GooglDrive folder (gallery) on my website AND open the image inside my website(like a lightbox)? Actually when you click in some image you’ll be redirected to google drive image.
I found this great service http://www.lghtbx.com/u/hashdog/0B_8z1_9Z4GzdZHp4WklMaWpxLWM but they have a insecure protocol http and I need https! So… do you know something to help? Thanks a lot!
Hi Franco, I’m looking for the same thing, alolowing download on my website without being redirected to the drive site, did you find a solution? Thanks!
We are too looking for a solution for the download problem. f.e. a zip-file opens in the browser in stead of a download, pretty annoying.
Hi,
Thanks for the how to, that’s great!
I intend to use this as a resource library and I am wondering if there may be a way to display the description field as an additional column in the list.
Anyway would know if that’s possible?
Thanks!
Vincent
Fantastc post! One drawback with this is that it chooses to display the content in the native language of the location. Is there a way to force it to only display the embedded content in English?
This thing is little unusable, since you can not really SORT and it always shows the latest and usually most interesting document down below.
Hello, Thanks For Share, We are using iframe to embed google drive folders into our updated webpages but image not show in front view. Error :
Not Found Error 404
Hi,
Is there a way to open the sub-folders within the iframe instead of a new tab opening every time which redirects to the folder on google drive?
I am also eager to find out… Searched the internet and no quick answers to this. Is it not common for people to share google drive folders with sub-folders?
How do I use a Google Drive image in HTML and on a website?
Google Drive allows you to store various types of content such as images, videos, PDFs, docs, applications, and many others, on their own Google hosting platform. In the case of images, Google Drive will generate its own version of the filename for each image you upload.
When you look carefully at the image name by right click on it and getting the URL, you will find the file name is changed to another form and will be different from what you provided earlier also images will not have any extensions like jpg, png, etc. This is google’s way of securing the images in Google Drive.
When you want to share a file from Google Drive in some pages or blogs and want to use it in the img src tag of HTML by directly copying the link from Google Drive, it won’t work because Google has protected your file from unauthorized access outside the Google domain. Even if you have shared the images, no one can use them outside of the Google platform. They can, for example, only open that image in Google Drive, Google Photos, and so on.
However, there is a way to use the images stored in Google Drive with a few hacks, and here are the steps for using Google Drive Images in HTML, blogs, and websites.
What to do if I have a google drive link with usp=sharing?