How to Embed Google Drive Folders on to your Website

For some of our website clients, the ease and convenience of using Google Drive to hold their files and share them publicly on the website makes it a useful tool. In many cases once the embedded code is in place on the website, it means that there is no need to log in to the back-end of the website, but to simply go on to the relevant Google Drive folder and replace or upload new files there.

Sharing settings

Before you can share files or a folder, from Google Drive publicly (or in a limited way) on a website, you need to define the settings on the encompassing folder.

To do this go to the Upper level folder (the one that contains the folder you wish to share). This could also be the root drive, that is fine.

Right click on the folder. Click on Share. Then click Share again.

 

A pop-up windown will allow you to specify people and groups you might want to share the folder with.

In our case, we usually set the General access to Public to allow the public to view or download the files without needing to login.

Once the folder settings are in place, you can then work on Embedding the folder on to your website.

How to embed a folder from Google Drive

The generic embed code is as below.

Embed code:

<iframe src=”https://drive.google.com/embeddedfolderview?id=33characterlongidforfolderyouwishtoembed” width=”100%” height=”600px” frameborder=”0″ scrolling=”no”></iframe>

The iframe src means that the Google Drive folder is simply ‘displayed’ as seen on the Google Drive itself. The files are still located on the Google Drive and in using the embed code, you are simply ‘displaying’ the contents of that folder.

The key to understanding the embed code is that each folder on the Google Drive has a unique 33character id. This id is located at the end of the URL of the folder.

https://drive.google.com/drive/folders/33characterlongidforfolderyouwishtoembed

How to order files in the embed folder

This is a slightly more tricky process depending on how files are named and how they are uploaded. According to this discussion: https://stackoverflow.com/questions/47553645/embedded-google-drive-ordering it is possible to use an orderBy parameter:

And you can actually sort it by using the parameter orderBy.

A comma-separated list of sort keys. Valid keys are ‘createdTime’, ‘folder’, ‘modifiedByMeTime’, ‘modifiedTime’, ‘name’, ‘name_natural’, ‘quotaBytesUsed’, ‘recency’, ‘sharedWithMeTime’, ‘starred’, and ‘viewedByMeTime’. Each key sorts ascending by default, but may be reversed with the ‘desc’ modifier. Example usage: ?orderBy=folder,modifiedTime desc,name. Please note that there is a current limitation for users with approximately one million files in which the requested sort order is ignored.

So you can orderBy a range of different parameters depending on what you require.

For most commonly named files it is straightforward process. However if your filenames contain numbers then it is important to not that the prefix 1 will always be ordered first. So, 1, 10, 11, 12 will come before 2.

In order to circumvent this issue, we found that it was possible to rearrange the files in an order that we desired by simply adding a space to certain filenames. For example, we wanted the order of the files to be from Y7 to Y11, but we kept finding that Y10 and Y11 would appear at the top of the list.

To resolve this issue, we put a space between Y and numbers 7, 8 and 9. This allowed us to maintain the order of the files as above.

How to share a file from Google Drive

To share just a file from Google Drive, you will need the link to the file.

To find the link of the file on Google Drive, right click on the file.
Click on Share.

Then Click on Get link.

On the pop-up window, click on Copy link.

 

The link to that file will now be on the Clipboard.

Just paste it where you need it to be.