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.
The iframe HTML code is:
List view
<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#list" width="700" height="500" frameborder="0"></iframe>
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.
Grid view
<iframe src="https://drive.google.com/embeddedfolderview?id=YOURID#grid" width="700" height="500" frameborder="0"></iframe>
Just make sure the folder is accessible to view, so check your folder permission within Google Drive.
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?
I was wondering the very same thing. Is there anyway to remove that bit?
Hi Jason & Rose
As far as I know, Google does not allow hiding the name of the file/folder owner.
You may be able to do so using CSS, by using the
display: none;property.Pls how do i generate the google drive ID
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.
I forgot to mention that after doing this, you will see an option at the top “get shareable link”.
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,
changing the sorting to last modified did not work for me. Any ideas???
thanks
Michael
I had same thing – leaves them in alpha order
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?
Have you found a method to do this ?
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.
That’s indeed a drawback. Therefore I’m investigating Google Groups again to share files.
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.
Thanks for sharing
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?
Hi,
Interested in getting a solution to this as well.
Have you made any progress on this?
Thx
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?
I would also like a solution to this.
Is there a way to center iFrame content in the page? Thank you
Wrap it in a
Use this code in front of the iFrame:
Use this code after the iFrame:
Works great ! .. is it possible to have a search functionality enabled ?
I was wondering if it is possible to have it only show specific file types. ie PDF, VIDEO,
instead of have them all listed together
Thanks so much for sharing! This is super useful
Maybe it’s something I’m doing but the embed function stopped working. I even checked an old page that it was working on that hasn’t been changed and it doesn’t work as of today.
Awesome post! Thank you so much.
In fact, this functionality permit us to stop doing updates for our website and enable the users to control by thieir own the documentation.
Just one doubt, do you know if there is a funcionality to restrict the access to the folder to some users or I need to use the Google Drive sharing permissions in order to restrict the access.
Thank you!
I need a way to embed root folder. Can you help?
Thank you!
I want to sort the grid view, with newest files on top.
How can that be done?
Hi Jerome
Did you ever get this sorted. I have the same issues
why do a get a failure due to “X-Frame-Options’ set to ‘sameorigin”
Doesn’t work for me. Fails according to chrome diagnostics because link is set to “same origin in a frame”. This is an https setting so must be being set by Google?
I am wanting to embed google drive folders on my website. Is there any way I can set it up privately, so a client would have to login before seeing the embedded folders on the site?
Hoping clients can login and see their specific, private folders without leaving the site/
Hide Owner Info.
Please Help
Hide Owner Info.
please help.
Please help to hide owner info.
yPU ARE A GENIUS :)
please help to hide last modified column?