Una guía simple para incrustar documentos de Google Drive en WordPress

Publicado: 2021-09-23

WordPress es el sistema de gestión de contenido (CMS) número uno del planeta. Google Drive es una solución líder de almacenamiento en la nube del motor de búsqueda número uno del planeta. Dado esto, tiene sentido que desee incrustar documentos de Google Drive en WordPress. La buena noticia es que hay algunas maneras de hacerlo.

Google tiene una forma funcional de incrustar documentos de Google Drive en su sitio web de WordPress, pero existen algunos inconvenientes. En su lugar, querrá considerar un complemento dedicado, como Google Drive Embedder. Esto le brinda más flexibilidad y lo ayuda a adaptar el flujo de trabajo y el enfoque a las necesidades de su sitio.

En esta publicación, le daremos una guía simple para incrustar documentos de Google Drive en WordPress. Antes de esto, hablemos de cómo funciona WordPress con Google Docs desde el primer momento.

Cómo trabajan juntos WordPress y Google Docs

Google Docs y WordPress han tenido una relación difícil por un tiempo. Las empresas se han llevado bien, pero el CMS y la suite de autoedición no. Esto se debe a que Google Docs en particular sufre el mismo tipo de problemas que Microsoft Word: formato personalizado bajo el capó.

En la superficie, la tarea de obtener una copia de su Google Doc en WordPress debería ser simple. Copie el contenido y péguelo en WordPress. Sin embargo, esto a menudo no funciona de la manera que esperaría al usar el Editor clásico o algunos creadores de páginas de terceros.

Esto se debe a que se usa HTML oculto para formatear el texto dentro de Google Docs, y WordPress no sabe qué hacer con las etiquetas adicionales.

Documentos de Google al editor clásico

Por ejemplo, tenemos un documento que nos gustaría importar a nuestro sitio web de WordPress:

A Google Doc file.

El proceso simple es copiar y pegar el contenido en WordPress, que en el editor visual se ve bien:

The WordPress Classic Editor.

Sin embargo, si echa un vistazo al editor de texto, notará algunas etiquetas adicionales:

The WordPress Classic Text editor.

Para sus propios documentos, puede encontrar que hay más etiquetas que esta o ninguna. La inconsistencia es otro factor en la relación entre Google Docs y WordPress.

En la mayoría de los casos, querrá buscar y eliminar las siguientes etiquetas:

  •   . Esta es una etiqueta HTML para indicar un espacio sin interrupciones.
  • etiquetas <span> . Estas son etiquetas HTML 'catch-all' que le permiten agregar elementos de estilo (y otros) a bloques de HTML.
  • Enumere elementos (<li>) con un atributo aria-level=”1” . Este es un atributo de accesibilidad que por sí solo no significa mucho, por lo que podemos eliminarlos en este caso.

Como hemos visto evolucionar a WordPress, algunas de estas etiquetas adicionales se eliminan al ingresar a la plataforma.

Google Docs al editor de bloques

El Editor de bloques hace un gran trabajo al analizar la información de Google Doc, con una necesidad mínima de su entrada.

Aun así, el proceso de transferencia no conservará todos los cambios. Por ejemplo, los encabezados no viajarán a WordPress, por lo que deberá revisarlos y configurarlos nuevamente.

Un elemento del Editor de bloques que no muchos conocen es la función de importación de imágenes. Por ejemplo, tenemos una imagen en nuestro documento que debe ingresar a WordPress:

A Google Doc that includes an image.

Si lleva a cabo un simple copiar y pegar, todo se ve como cabría esperar:

Pasting content into the WordPress Block Editor.

Será necesario establecer el encabezado y, por supuesto, la imagen necesitará alineación. Sin embargo, la imagen aún no forma parte de su biblioteca multimedia. Si pasa el cursor sobre la imagen y hace clic en el botón Cargar imagen externa, esto llevará a cabo una importación:

A WordPress Image Block.

Es un buen paso para ayudar a los usuarios a incluir Google Docs en WordPress, pero no es perfecto. Hasta entonces, querrá encontrar una mejor manera que no erosione su tiempo.

Por qué incrustar documentos de Google Drive en WordPress es una buena idea

En la mayoría de las circunstancias, querrá escribir contenido de WordPress en un editor nativo (o en el editor de su creador de páginas favorito, por supuesto). Sin embargo, hay muchas razones por las que le gustaría trabajar en Google Drive e incrustar ese documento en WordPress:

  • Vas a tener más seguridad potencial para tu archivo. No queremos decir en un sentido malicioso, ya que WordPress es estable y sólido. En este caso, estamos hablando del almacenamiento basado en la nube de Google Drive. Tener su archivo aquí significa que está respaldado y es seguro.
  • Puede anotar su documento como si fuera una 'lista de tareas pendientes'. Esto significa que puede colaborar con otros dentro del documento, pero también incrustarlo en WordPress al mismo tiempo. Es una manera eficiente y rápida de publicar su trabajo en línea.
  • Hablando de eso, los aspectos colaborativos de los documentos de Google Drive significan que varios miembros del equipo pueden trabajar en ellos al mismo tiempo. Con WordPress, tiene restricciones en la cantidad de miembros del equipo dentro de una publicación o página a la vez (a menudo uno).

Además, puede conservar todo su formato y estilo del Documento de Google, sin tener que trabajar con los editores de código de WordPress. El tiempo que ahorre aquí puede dedicarse a otros aspectos importantes de su sitio.

Cómo incrustar documentos de Google Drive en WordPress sin un complemento

La buena noticia es que no necesita mucho para incrustar documentos de Google Drive en WordPress. De hecho, todo lo que necesitará está en el menú Archivo > Publicar en la web en su archivo de documento de Google:

The Publish to the web option in Google Docs.

Al hacer clic aquí, se mostrará un cuadro de diálogo que le permite elegir entre un enlace y un código para insertar. Querremos esto último. Si hace clic en la pestaña Insertar , luego en el botón Publicar , verá un cuadro de diálogo de confirmación:

The Publish to the web dialog.

Cuando haga clic para confirmar, se mostrará un fragmento de código HTML que querrá copiar y pegar en WordPress:

Copying an iFrame link in Google Docs.

En su editor de WordPress, querrá acceder al editor de código desde el menú Más acciones en el lado derecho:

The Code editor link in WordPress.

En esta pantalla, busque el lugar adecuado para su inserción y pegue el código en:

Pasting an iFrame link into the WordPress Code editor.

Desde aquí, salga del editor de código usando el enlace en el lado derecho y verá la inserción. También notará que el documento usa un bloque clásico, aunque puede usar el botón Convertir a bloques para hacer lo necesario:

Adding an embed to WordPress.

Aún así, hay algunos inconvenientes de este enfoque, a pesar de lo sencillo que es. Discutámoslos ahora.

Los inconvenientes de incrustar documentos de Google Drive sin un complemento

Si bien el enfoque de inserción directa está bien, hay algunas advertencias y aspectos a tener en cuenta sobre la experiencia:

  • Está limitado en la forma en que puede presentar su documento. Para la mayoría de Documentos, Hojas de cálculo y otros, no hay forma de adaptar el visor a sus necesidades sin código adicional.
  • El formato y el estilo predeterminados de los documentos de Google Drive significan que aún deberá trabajar con la configuración para "homogeneizar" su documento.
  • Además de las limitaciones de presentar su documento de Google, también debe trabajar con el código si desea colocarlo en una parte diferente de la página. Este puede ser un proceso simple, pero tiene el potencial de ser un bache en el camino al diseñar su página.

También hay un problema más que podría afectarlo de manera imprevista. Durante nuestras pruebas, nos encontramos con casos en los que se nos negó la oportunidad de incrustar el documento de Google. Si bien el iFrame se mostró bien, nuestro contenido fue reemplazado por una notificación de "Términos de servicio":

A restricted Google embed.

Nuestra investigación sugiere que existe un filtro de derechos de autor de algún tipo que escanea un documento en busca de infracciones. En nuestro caso, el texto era de la página de Política de privacidad de WordPress, pero el filtro no lo sabría.

Como tal, podría ser que, dependiendo de su documento, es posible que no pueda incrustar el contenido de todos modos.

Presentamos el complemento Google Drive Embedder

Para disfrutar de una mejor experiencia al incrustar documentos de Google Drive, querrá recurrir a una solución dedicada. El complemento Google Drive Embedder es una solución única para insertar casi cualquier documento de Google Drive en su sitio:

The Google Drive Embedder plugin.

Puede acceder a sus documentos a través de un cuadro de diálogo emergente y configurar un acceso personalizado. Por ejemplo, puede usar un visor interactivo de solo lectura para mostrar documentos y también ofrecer un enlace que lleva a una versión editable. Además, también puede ofrecer estos archivos para su descarga.

Aunque el complemento se enfoca en las incrustaciones de Google Drive, no es toda la historia. También puede mostrar una serie de otros tipos de archivos. Esto significa que si tiene documentos de Microsoft Word, archivos ZIP, videos, imágenes, archivos PDF y más, puede incrustarlos todos.

La buena noticia es que el complemento principal es gratuito. Sin embargo, hay más funciones disponibles en la versión premium. Por ejemplo, obtiene una integración más estrecha con Google Drive, con la capacidad de explorar carpetas específicas, como las carpetas Compartido conmigo y Destacado . Hablando de eso, también puede incrustar carpetas en su sitio.

De todos modos, la versión gratuita del complemento tiene todas las funciones y es fácil de usar. A continuación, le mostraremos cómo ponerse en marcha con el complemento.

Cómo incrustar Google Drive en WordPress usando el complemento Google Drive Embedder (en 3 pasos)

Hay tres pasos entre usted y un documento de Google Drive incrustado. Su primera tarea es configurar dos complementos dentro de WordPress. Los veremos a ambos a la vez, primero.

1. Instale y active el complemento de inicio de sesión de Google Apps

Para utilizar Google Drive Embedder, también deberá instalar el complemento de inicio de sesión de Google Apps:

The Google Apps Login plugin.

Es un complemento crucial para ayudar a los usuarios existentes a iniciar sesión en Google con autenticación segura. Además, si ha iniciado sesión en Gmail, no tendrá que volver a introducir esos datos para acceder a los archivos. Como tal, es obligatorio.

El proceso es sencillo, especialmente si lo hace desde la pantalla Complementos > Agregar nuevo dentro de WordPress:

The WordPress Add Plugins screen.

Aquí, use la barra de búsqueda para encontrar el complemento de inicio de sesión de Google Apps y haga clic en el botón Instalar ahora :

The Google Apps Login plugin install screen.

Después de unos momentos, verá que el botón cambia a Activar . Puede hacer clic aquí nuevamente, momento en el que volverá a la pantalla principal de Complementos .

Antes de continuar, dirígete a la pantalla Configuración > Inicio de sesión de Google Apps :

The Google Apps Login setup screen.

Antes de que el complemento funcione, hay algunas tareas que completar aquí. Debe vincular Google Drive a su cuenta de WordPress a través de un ID de cliente y un Secreto de cliente dedicados. La buena noticia es que hay un enlace a las instrucciones completas en la parte superior de la pantalla de configuración. Como tal, no cubriremos esos detalles aquí.

Cuando esté listo, puede comenzar a instalar el complemento Google Drive Embedder.

2. Instale y active el complemento Google Drive Embedder

El proceso para este complemento es similar al inicio de sesión de Google Apps. La única diferencia es que buscará Google Drive Embedder en su lugar:

The Google Drive Embedder install screen.

Nuevamente, haga clic en Instalar ahora , luego en Activar , y WordPress instalará el complemento en su sistema. ¡Con la versión gratuita de Google Drive Embedder, no se necesita más configuración! Sin embargo, si actualiza a la versión premium, puede encontrar todas las configuraciones en la pantalla Configuración> Google Drive Embedder .

3. Incruste sus documentos de Google Drive en WordPress

El paso final es incrustar su documento en WordPress. Para hacer esto, diríjase a cualquier publicación o página y busque agregar un nuevo bloque a su contenido. Estás buscando el bloque Google Drive Embedder:

The Google Drive Embedder Block.

Una vez que agregue esto a su diseño, eche un vistazo al menú de configuración de Bloque en la barra lateral derecha. Esto le permitirá elegir su documento de Google Drive:

The Select Google File button.

Desde aquí, verá un cuadro de diálogo que lo ayudará a elegir su documento:

[IMAGEN google-archivo-diálogo]

Tenga en cuenta que la primera vez que acceda a este, es posible que deba autenticar el acceso con Google, aunque este proceso es similar a otros procesos de autenticación:

Google's authentication screen.

Cuando hayas hecho esto, verás una lista de tus documentos de Google Drive en el cuadro de diálogo emergente:

Choosing a document within Google.

Una vez que elige su documento, obtiene acceso a los tres botones de radio debajo del cuadro de diálogo de selección:

The Embed document radio button.

Todos estos son intuitivos y rápidos de usar; las opciones del documento incrustado le permiten establecer el ancho y el alto de la incrustación, mientras que el enlace del archivo Viewer le permite abrir el archivo en una nueva ventana y mostrar un icono. El botón de opción Descargar enlace de archivo le permitirá establecer opciones para que los usuarios descarguen su archivo si ese documento no es uno nativo de Google.

Una vez que haga clic en el botón Insertar archivo, verá el marcador de posición de código abreviado que se encuentra en la actualización de la pantalla. Si obtiene una vista previa de la página desde aquí, verá cómo se ve su inserción. Desde este punto, los usuarios podrán interactuar con el documento en la parte frontal de su sitio.

Conclusión

Google ofrece un conjunto estelar de aplicaciones que le permiten crear documentos de texto, hojas de cálculo y más. Si es propietario de un sitio de WordPress, es tentador querer combinar ambos. Afortunadamente, esto está dentro del ámbito de la posibilidad.

Si bien es posible que no desee confiar en la funcionalidad de inserción nativa de Google Drive, querrá emplear un complemento como Google Drive Embedder. Esto le brinda una forma de incrustar documentos de Google Drive en casi cualquier lugar de la página. Además, obtienes algunas opciones de personalización para que el espectador y la experiencia sean tuyos.

¿Necesita incrustar documentos de Google Drive? ¿Le ayudará este complemento? ¡Comparte tus pensamientos en la sección de comentarios a continuación!