Embeber elemento editable de Google Drive

Para poder embeber en una página de nuestro sitio web un elemento de Google Drive, principalmente un Documento u Hoja de Cálculo,  permitiendo que el mismo sea editable desde la página debemos hacer lo siguiente:

Compartir con edición el elemento de Google Drive

  1. Acceder al elemento en Google Drive
  2. Presionar sobre Compartir (arriba a la derecha)
  3. En el apartado “Quién tiene acceso” presionar sobre Cambiar…
  4. Elegir la opción “Cualquier persona que tenga el vínculo”
  5. En la opción que aparece (Acceso) cambiar “Puede ver” por “Puede editar”
  6. Confirmar presionando Guardar
  7. Copiar el vínculo para compartir
  8. Terminar el proceso presionando Finalizado

En este momento tendremos un vínculo copiado con la forma (puede variar un poco según el tipo de elemento):

https://docs.google.com/tipo_elemento/ccc?key=identificador_del_elemento&usp=sharing

Generar el código para embeber el documento42

A partir del código HTML para un iframe:

Importante: al utilizar este código, se debe borrar el espacio entre el signo < y el tag iframe. Debo escribirlo así por cuestiones de seguridad de WordPress

< iframe width='ancho' height='alto' frameborder='0' src='vinculo_elemento'></iframe>

establecemos los valores de ancho y alto a los deseados (podemos probar inicialmente con ancho 800 y alto 600) y reemplazar vinculo_elemento por el vínculo que hemos copiado en el paso anterior.

El código resultante sería:

< iframe width='800' height='600' frameborder='0' src='https://docs.google.com/tipo_elemento/ccc?key=identificador_del_elemento&usp=sharing'></iframe>

Debemos tener en cuenta que si el ancho es muy reducido, el menú y la barra de botones no se visualizarán correctamente.

Dependiendo de las necesidades se puede utilizar una alternativa que directamente oculta el menú y la barra de botones pero sigue permitiendo la edición del elemento (no tendremos la posibilidad de establecer formatos por ejemplo). Esto se consigue agregando al final del vínculo al elemento:
 &rm=minimal

Entonces, el nuevo código sería:

< iframe width='800' height='600' frameborder='0' src='https://docs.google.com/tipo_elemento/ccc?key=identificador_del_elemento&usp=sharing&rm=minimal'></iframe>

Tagged with: ,
Publicado en Aplicaciones