DEV Community

Cover image for How to embed Google Drive folders
Luiz Gonçalves ☕
Luiz Gonçalves ☕

Posted on

How to embed Google Drive folders

Many of my customers asked me how they could share files and photos in their websites and save some bandwidth/storage as well.

Here's a quick tip. I hope that helps you to achieve the same goal as them.

  1. Open the folder in Google Drive that you want to share
  2. Right-click on it.
  3. Select the option "Get shareable link"
  4. Switch the permissions to "Anyone with the link" and set the role to "Viewer"
  5. Copy the given link
  6. Extract the folder ID from the URL, like this:
https://drive.google.com/drive/folders/*ABCDEFEG223452345_A12*?usp=sharing
Enter fullscreen mode Exit fullscreen mode
  1. Copy the ID (e.g: ABCDEFEG223452345_A12)
  2. Replace the placeholder in code below with the folder ID:
<iframe src="https://drive.google.com/embeddedfolderview?id={{ID_HERE}}#grid" width="100%" height="480"></iframe>
Enter fullscreen mode Exit fullscreen mode

You're done!

Capturar.png

Top comments (0)