Search code examples
htmlgoogle-drive-apiembed

How to embed a Google Drive folder in a web page

I have a folder in Google Drive that I'd like to embed in my web page. I can't find an embed code or anything documented in Google Drive Help articles.

Solution

  • Update

    I just wrote a blog post and created an embed code generator to make your life a bit easier.

    1. Go to your Google Drive.
    2. Right-click on the folder.
    3. Select Share.
    4. Open the General access drop-down menu.
    5. Select Anyone with the link to publish your folder.
    6. Click Copy link and then Done.
      You will get a URL like the following:
      https://drive.google.com/drive/folders/1qGwpjmQIQO8rN1odas0njDSf72VRrTCa?usp=sharing
      You can see your folder ID in bold: 1qGwpjmQIQO8rN1odas0njDSf72VRrTCa
    7. Google Drive folders can be embedded and displayed in list and grid views. Put the folder ID in one of the following iframe sources:

    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>