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.

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.

 

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.

 

49 thoughts on “Embed a Google Drive folder on your website

  1. 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?

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

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

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

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

  3. 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?

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

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

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

  6. 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?

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

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

  9. 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!

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

  11. 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?

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

      1. 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?

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

  14. 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!

  15. 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?

  16. 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/

Leave a Reply

Your email address will not be published. Required fields are marked *