Как встроить папку Google Диска на сайт

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Ответ 2 · рейтинг 20 · Community

Встраивание каталога Google Диска в IFRAME

Папки Google Диска можно встраивать и отображать в представлениях list и grid (в которых все, что вы можете сделать, это щелкнуть файл или папку, чтобы открыть их на новой вкладке). Для этого просто замените FOLDER-ID своим собственным в:

Список

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#list" style="width:100%; height:600px; border:0;"></iframe>

или без указания режима, поскольку по умолчанию используется режим списка:

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID" style="width:100%; height:600px; border:0;"></iframe>

Сетка

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Получение идентификатора вашей папки

Идентификатор - это хэш (буквенно-цифровая тарабарщина) после folders/ в URL-адресе папки. Вы можете увидеть URL-адрес в адресной строке браузера, когда открываете папку на Диске. Например, в:

https://drive.google.com/drive/folders/0B1iqp0kGPjWsNDg5NWFlZjEtN2IwZC00NmZiLWE3MjktYTE2ZjZjNTZiMDY2

Папка с доменом G Suite/Google Apps

Если ваша папка является частью домена Google Apps, вы можете добавить домен к URL-адресу, чтобы облегчить проблемы с разрешениями (подробности ниже):

<iframe src="https://drive.google.com/a/MY.DOMAIN.COM/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Просто замените MY.DOMAIN.COM и FOLDER-ID на свои.

Предупреждение о папках, требующих разрешения

Этот метод лучше всего работает для папок с общим доступом. Папки, которые используются только определенными учетными записями Google, могут вызвать проблемы при встраивании их таким образом, в зависимости от того, какие учетные записи Google активны в браузере пользователя:

1. Если пользователь не вошел ни в одну учетную запись Google, то в кадре ничего не появляется.
2. Если пользователь вошел в учетную запись без авторизации для доступа к папке, фрейм будет содержать сообщение Вам требуется разрешение с некоторыми кнопками Запросить доступ или Переключиться учетные записи, но если вы нажмете на нее последней, рамка исчезнет.
3. Если пользователь входит в учетную запись без соответствующих разрешений, а затем добавляет авторизованную учетную запись, при загрузке встроенного Диска Google будет использовать первую активную учетную запись, и пользователь увидит Вам требуется разрешение, если только. ..
4. Если URL-адрес содержит домен Google Suite и пользователь вошел в учетную запись этого домена, встроенное представление будет работать, даже если пользователь сначала вошел в другую учетную запись.

Пустые фреймы связаны с тем, что Google запрещает встраивать свою страницу входа в IFRAME (предположительно, чтобы предотвратить кражу учетной записи) через заголовок X-Frame-Options, который, если установлено значение SAMEORIGIN, приведет к тому, что любой браузер с хорошим поведением откажется загружать страницу, если она не находится в тот же домен (vg drive.google.com). Вы можете увидеть это в консоли разработчика вашего браузера.

TL;DR

Чтобы получить список или сетку папки на Диске (в которой все, что вы можете сделать, это щелкнуть файл или папку, чтобы открыть ее на новой вкладке), используйте:

<iframe src="https://drive.google.com/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

или, альтернативно, для Google Suite/Apps Drive:

<iframe src="https://drive.google.com/a/MY.DOMAIN.COM/embeddedfolderview?id=FOLDER-ID#grid" style="width:100%; height:600px; border:0;"></iframe>

Замените MY.DOMAIN.COM и FOLDER-ID собственными; удалите #grid, чтобы получить подробный список файлов.

Для личных папок попросите пользователей войти в правильную учетную запись перед загрузкой страницы со встроенной папкой; если папка находится в домене Google Apps, вы можете добавить домен к URL-адресу. В противном случае они должны войти в авторизованную учетную запись перед любой другой.

(этот ответ является правкой Мори, но он был отклонен, так как каким-то образом изменил его намерение)

Ответ 3 · рейтинг 2 · ElDog

Для бизнес-приложений / приложений Gsuite или как они их называют, вы можете указать домен (была проблема с 500 ошибками с исходным ответом при входе в несколько учетных записей Google).

<iframe
  src="https://drive.google.com/a/YOUR_COMPANY_DOMAIN/embeddedfolderview?id=FOLDER-ID"
  style="width:100%; height:600px; border:0;"
>
</iframe>

Ответ 4 · рейтинг 2 · ssy

На момент написания этого ответа не было метода встраивания, который позволял бы пользователю перемещаться внутри папок и просматривать файлы, не покидая веб-сайт (метод в других ответах открывает все в новой вкладке на веб-сайте Google Диска), поэтому я сделал свой собственный инструмент для этого. Чтобы встроить диск, вставьте приведенный ниже код iframe в свой HTML:

<iframe src="https://googledriveembedder.collegefam.com/?key=YOUR_API_KEY&folderid=FOLDER_ID_WHIHCH_IS_PUBLICLY_VIEWABLE" style="border:none;" width="100%"></iframe>

В приведенном выше коде вам нужно иметь собственный ключ API и идентификатор папки. Вы можете установить высоту по своему желанию.

Чтобы получить ключ API:

1.) Перейдите на страницу https://console.developers.google.com/ и создайте новый проект. .

2.) Из кнопки меню перейдите в "API и службы" -> "Панель инструментов" -> нажмите "Включить API и службы".

3.) Найдите "API Google Диска", включите его. Затем перейдите на вкладку "Учетные данные" и создайте учетные данные. Не ограничивайте свой ключ API.

4.) Скопируйте вновь сгенерированный ключ API.

Чтобы получить идентификатор папки:

1.) Перейдите в папку на Google Диске, которую вы хотите встроить (например, drive.google.com/drive/u/0/folders/1v7cGug_e3lNT0YjhvtYrwKV7dGY-Nyh5u [это не настоящая папка]). Убедитесь, что папка общедоступна. и виден любому.

2.) Скопируйте часть после "folders/", это идентификатор вашей папки.

Теперь поместите ключ API и идентификатор папки в приведенный выше код и вставьте.

Примечание. Чтобы скрыть кнопку загрузки для файлов, добавьте "&allowdl=no" в конце URL-адреса источника iframe.

Я сделал виджет с учетом мобильных пользователей, однако он подходит как для мобильных устройств, так и для компьютеров. Если у вас возникнут проблемы, оставьте комментарий здесь. Я прикрепил несколько скриншотов содержимого iframe здесь.