Tengo una carpeta en Google Drive que me gustaría incrustar en mi página web. No puedo encontrar un código de inserción ni nada documentado en los artículos de ayuda de Google Drive.

1. Ve a tu Google Drive.
2. Haga clic derecho en la carpeta.
3. Seleccionar Conseguir enlace.
4. Abre el Acceso general Menú desplegable.
5. Seleccionar Cualquiera con el link para publicar su carpeta.
6. Hacer clic Copiar link y luego Hecho.
   Obtendrá una URL como la siguiente:
   https://drive.google.com/drive/folders/1qGwpjmQIQO8rN1odas0njDSf72VRrTCa?usp=compartir_enlace

   Puede ver su ID de carpeta en negrita: 1qGwpjmQIQO8rN1odas0njDSf72VRrTCa

7. Las carpetas de Google Drive se pueden incrustar y mostrar en list y grid puntos de vista. Ponga el ID de la carpeta en uno de los siguientes iframe fuentes:

Vista de la lista

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

Vista en cuadrícula

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

Incrustar un directorio de Google Drive en un IFRAME

Las carpetas de Google Drive se pueden incrustar y mostrar en list y grid vistas (en las que todo lo que puede hacer es hacer clic en un archivo o carpeta para abrirlo en una nueva pestaña). Para hacerlo, simplemente reemplace ID DE CARPETA y para carpetas privadas (a partir de 2022) CLAVE DE RECURSO con el tuyo en:

Vista de la lista

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

o sin especificar un modo, ya que el modo de lista es el predeterminado:

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

Vista en cuadrícula

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

Obtención de su ID de carpeta

Simplemente puede reemplazar drive/folders/ con embeddedfolderview?id= en un enlace para compartir de Drive estándar.

El id es el hash (galimatías alfanuméricas) después folders/ en la URL de la carpeta. Puede ver la URL en la barra de direcciones de su navegador cuando abre la carpeta de Drive. La clave de recursos que puede encontrar en el enlace para compartir, después de copiarlo. Por ejemplo, en:

`https://drive.google.com/drive/folders/0B9s5Ht8qysnFMXhaZDFfQlJEalE&resourcekey=0-in7UrBAlXKTSN6poaUSl9g`

La identificación de la carpeta es 0B9s5Ht8qysnFMXhaZDFfQlJEalE y la clave de recurso es 0-in7UrBAlXKTSN6poaUSl9g.

Carpeta con dominio de G Suite/Google Apps

Desde la introducción del parámetro Resource Key en 2022 y a partir de enero de 2023, la inserción de carpetas de dominio de G Suite falla con un error 403 (“Lo sentimos, pero no tiene acceso a esta página. Eso es todo lo que sabemos”). . Se deja lo siguiente por si en algún momento lo arreglan.

Si su carpeta es parte de un dominio de Google Apps, puede agregar el dominio a la URL para aliviar los problemas de permisos (detallados más adelante):

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

solo reemplaza MI.DOMINIO.COM y ID DE CARPETA contigo mismo.

Advertencia con carpetas que requieren permiso

Esta técnica funciona mejor para carpetas con acceso público. Las carpetas que se comparten solo con ciertas cuentas de Google pueden causar problemas cuando las incrusta de esta manera, según las cuentas de Google que estén activas en el navegador del usuario:

1. Si el usuario no ha iniciado sesión en ninguna cuenta de Google, entonces nada aparece en el marco.
2. Si el usuario ha iniciado sesión en una cuenta sin autorización para acceder a la carpeta, el marco contendrá el mensaje necesitas permisocon unos botones para Solicitar acceso o Cambiar cuentaspero si hace clic en este último, el marco se queda en blanco.
3. Si el usuario inicia sesión en una cuenta sin los permisos adecuados y luego agrega la cuenta autorizada, al cargar la unidad integrada, Google recurrirá a la primera cuenta activa y el usuario verá necesitas permisoa menos que…
4. Si la URL contiene un dominio de Google Suite y el usuario ha iniciado sesión en la cuenta de ese dominio, la vista incrustada funcionará. incluso si el usuario inició sesión en otra cuenta primero.

Los marcos en blanco se deben a que Google prohíbe incrustar su página de inicio de sesión en un IFRAME (presumiblemente para evitar el robo de cuentas), a través de la X-Frame-Options encabezado, que si se establece en SAMEORIGIN hará que cualquier navegador que se comporte bien se niegue a cargar la página si no está en el mismo dominio (vg drive.google.com). Puede ver esto en la consola de desarrollador de su navegador.

TL;RD

Para obtener una vista de lista o cuadrícula de una carpeta de Drive (en la que todo lo que puede hacer es hacer clic en un archivo o carpeta para abrirlo en una nueva pestaña), use:

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

Para Google Suite/Apps Drive, lo siguiente no funciona a partir de enero de 2023:

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

Reemplazar MI.DOMINIO.COM y ID DE CARPETA contigo mismo; eliminar #grid para obtener una lista detallada de archivos.

Para carpetas privadas, haga que sus usuarios inicien sesión en la cuenta correcta antes de cargar la página con la carpeta incrustada; si la carpeta está en un dominio de Google Apps, puede agregar el dominio a la URL. De lo contrario, deben iniciar sesión en la cuenta autorizada antes que cualquier otra.

(esta respuesta es una edición de Mori, pero fue rechazada porque cambió su intenciónde alguna manera)

Al momento de escribir esta respuesta, no había ningún método para incrustar que permitiera al usuario navegar dentro de las carpetas y ver los archivos sin salir del sitio web (el método en otras respuestas hace que todo se abra en una nueva pestaña en el sitio web de Google Drive), así que hice mi propia herramienta para ello. Para incrustar una unidad, pegue el siguiente código iframe en su HTML:

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

En el código anterior, debe tener su propia clave API y la ID de la carpeta. Puede establecer la altura según su deseo.

Para obtener la clave API:

1.) Ir a https://console.developers.google.com/ Crear un nuevo proyecto.

2.) En el botón de menú, vaya a ‘API y servicios’ –> ‘Panel’ –> Haga clic en ‘Habilitar API y servicios’.

3.) Busque ‘Google Drive API’, habilítelo. Luego vaya a la pestaña “credenciales” y cree credenciales. Mantenga su clave API sin restricciones.

4.) Copie la clave API recién generada.

Para obtener el ID de la carpeta:

1.) Vaya a la carpeta de Google Drive que desea incrustar (por ejemplo, drive.google.com/drive/u/0/folders/1v7cGug_e3lNT0YjhvtYrwKV7dGY-Nyh5u [this is not a real folder]) Asegúrese de que la carpeta se comparta públicamente y sea visible para cualquier persona.

2.) Copie la parte después de ‘carpetas/’, esta es su ID de carpeta.

Ahora coloque la clave API y la identificación de la carpeta en el código anterior e incruste.

Nota: Esto funciona solo para los archivos y subcarpetas que cargó en la carpeta GDrive, no para las subcarpetas que agrega como ‘acceso directo’. Si una subcarpeta se muestra incorrectamente, descargue su contenido y súbalo a la unidad dentro de esa carpeta específica. Si ‘Mover’ la carpeta dentro de Google Drive, GDrive la agrega como un ‘acceso directo’.

Para ocultar el botón de descarga de archivos, agregue ‘&allowdl=no’ al final de la URL src del iframe.

Hice el widget teniendo en cuenta a los usuarios de dispositivos móviles, sin embargo, se adapta tanto a dispositivos móviles como de escritorio. Si tiene problemas, deje un comentario aquí. He adjuntado algunas capturas de pantalla del contenido del iframe aquí.

Para aplicaciones comerciales/Gsuite o como las llamen, puede especificar el dominio (tuvo un problema con 500 errores con la respuesta original cuando inició sesión en varias cuentas de Google).

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