Um guia simples para incorporar documentos do Google Drive no WordPress

Publicados: 2021-09-23

O WordPress é o sistema de gerenciamento de conteúdo (CMS) número um do planeta. O Google Drive é uma solução líder de armazenamento em nuvem do mecanismo de pesquisa número um do planeta. Dado isso, faz sentido que você queira incorporar documentos do Google Drive no WordPress. A boa notícia é que existem algumas maneiras de fazer isso.

O Google tem uma maneira funcional de incorporar documentos do Google Drive ao seu site WordPress, mas existem algumas desvantagens. Em vez disso, considere um plug-in dedicado, como o Google Drive Embedder. Isso lhe dá mais flexibilidade e ajuda a adaptar o fluxo de trabalho e a abordagem às necessidades do seu site.

Nesta postagem, forneceremos um guia simples para incorporar documentos do Google Drive no WordPress. Antes disso, vamos falar sobre como o WordPress funciona com o Google Docs pronto para uso.

Como o WordPress e o Google Docs funcionam juntos

O Google Docs e o WordPress tiveram um relacionamento difícil por um tempo. As empresas se deram bem, mas o CMS e o pacote de editoração eletrônica não. Isso ocorre porque o Google Docs, em particular, sofre do mesmo tipo de problema que o Microsoft Word: formatação personalizada sob o capô.

Na superfície, a tarefa de obter uma cópia do seu Google Doc para o WordPress deve ser simples. Copie o conteúdo e cole-o no WordPress. No entanto, isso geralmente não funciona da maneira que você espera ao usar o Editor Clássico ou alguns construtores de páginas de terceiros.

Isso ocorre porque há um HTML oculto usado para formatar o texto no Google Docs, e o WordPress não sabe o que fazer com as tags extras.

Documentos Google para o Editor Clássico

Por exemplo, temos um documento que gostaríamos de importar para nosso site WordPress:

A Google Doc file.

O processo simples é copiar e colar o conteúdo no WordPress, que no editor Visual fica bem:

The WordPress Classic Editor.

No entanto, se você der uma olhada no editor de texto, notará algumas tags adicionais:

The WordPress Classic Text editor.

Para seus próprios documentos, você pode descobrir que há mais tags do que isso ou nenhuma. A inconsistência é outro fator na relação entre o Google Docs e o WordPress.

Na maioria dos casos, você desejará encontrar e remover as seguintes tags:

  •   . Esta é uma tag HTML para denotar um espaço sem quebra.
  • <span> tags. Essas são tags HTML 'pega-tudo' que permitem adicionar elementos de estilo (e outros) a blocos de HTML.
  • Listar itens (<li>) com um atributo aria-level=”1” . Este é um atributo de acessibilidade que por si só não significa muito, e é por isso que podemos excluí-los neste caso.

Como vimos o WordPress evoluir, algumas dessas tags adicionais são removidas ao entrar na plataforma.

Documentos Google para o Editor de Blocos

O Block Editor faz um ótimo trabalho ao analisar as informações do Google Doc, com necessidade mínima de sua entrada.

Mesmo assim, o processo de transferência não preservará todas as suas alterações. Por exemplo, os títulos não vão para o WordPress, então você precisará passar por eles e configurá-los novamente.

Um elemento do Block Editor que poucos conhecem é o recurso de importação de imagens. Por exemplo, temos uma imagem em nosso documento que precisa entrar no WordPress:

A Google Doc that includes an image.

Se você fizer um simples copiar e colar, tudo ficará como esperado:

Pasting content into the WordPress Block Editor.

O título precisará ser definido e a imagem precisará de alinhamento, é claro. No entanto, a imagem ainda não faz parte da sua Biblioteca de mídia. Se você passar o mouse sobre a imagem e clicar no botão Carregar imagem externa, isso fará uma importação:

A WordPress Image Block.

É um bom passo para ajudar os usuários a colocar o Google Docs no WordPress, mas não é perfeito. Até lá, você vai querer encontrar uma maneira melhor que não corroa seu tempo.

Por que incorporar documentos do Google Drive no WordPress é uma boa ideia

Na maioria das circunstâncias, você desejará escrever o conteúdo do WordPress em um editor nativo (ou no editor do seu construtor de páginas favorito, é claro). No entanto, existem muitas razões pelas quais você deseja trabalhar no Google Drive e incorporar esse documento no WordPress:

  • Você terá mais segurança potencial para seu arquivo. Não queremos dizer no sentido malicioso, pois o WordPress é estável e sólido. Neste caso, estamos falando do armazenamento baseado em nuvem do Google Drive. Ter seu arquivo aqui significa que ele está com backup e seguro.
  • Você pode anotar seu documento como se fosse uma 'lista de tarefas pendentes'. Isso significa que você pode colaborar com outras pessoas no documento, mas também incorporá-lo ao WordPress ao mesmo tempo. É uma maneira eficiente e rápida de colocar seu trabalho online.
  • Falando nisso, os aspectos colaborativos dos documentos do Google Drive significam que vários membros da equipe podem trabalhar neles ao mesmo tempo. Com o WordPress, você tem restrições no número de membros da equipe em um post ou página por vez (geralmente um).

Além disso, você pode preservar toda a sua formatação e estilo do Google Doc, sem precisar trabalhar nos editores de código do WordPress. O tempo que você economiza aqui pode ir para outros aspectos importantes do seu site.

Como incorporar documentos do Google Drive no WordPress sem um plug-in

A boa notícia é que você não precisa de muito para incorporar documentos do Google Drive no WordPress. Na verdade, tudo o que você precisa está no menu Arquivo > Publicar na web em seu arquivo de documento do Google:

The Publish to the web option in Google Docs.

Clicar nele exibirá uma caixa de diálogo que permite escolher entre um link e um código de incorporação. Vamos querer o último. Se você clicar na guia Incorporar e, em seguida, no botão Publicar , verá uma caixa de diálogo de confirmação:

The Publish to the web dialog.

Quando você clicar para confirmar, isso exibirá um trecho de HTML que você deseja copiar e colar no WordPress:

Copying an iFrame link in Google Docs.

Em seu editor do WordPress, você desejará acessar o editor de código no menu Mais ações no lado direito:

The Code editor link in WordPress.

Nesta tela, encontre o local certo para sua incorporação e cole o código em:

Pasting an iFrame link into the WordPress Code editor.

A partir daqui, saia do editor de código usando o link do lado direito e você verá a incorporação. Você também notará que o documento usa um bloco clássico, embora você possa usar o botão Converter em blocos para fazer o necessário:

Adding an embed to WordPress.

Ainda assim, existem algumas desvantagens dessa abordagem, apesar de ser simples. Vamos discuti-los agora.

As desvantagens de incorporar documentos do Google Drive sem um plug-in

Embora a abordagem de incorporação direta seja boa, há algumas ressalvas e aspectos a serem observados sobre a experiência:

  • Você está limitado na forma como pode apresentar seu documento. Para a maioria dos Documentos, Planilhas e outros, não há como adaptar o visualizador às suas necessidades sem código adicional.
  • A formatação e o estilo padrão dos documentos do Google Drive significam que você ainda precisará trabalhar com as configurações para 'homogeneizar' seu documento.
  • Além das limitações de apresentar seu documento do Google, você também precisa trabalhar com o código se quiser colocá-lo em uma parte diferente da página. Este pode ser um processo simples, mas tem o potencial de ser um obstáculo ao projetar sua página.

Há também mais um problema que pode afetá-lo de maneiras imprevistas. Durante nossos testes, encontramos casos em que nos foi negada a chance de incorporar o documento do Google. Embora o iFrame tenha sido exibido bem, nosso conteúdo foi substituído por uma notificação de 'Termos de Serviço':

A restricted Google embed.

Nossa pesquisa sugere que há algum tipo de filtro de direitos autorais que verifica um documento em busca de violações. No nosso caso, o texto era da página de Política de Privacidade do WordPress, mas o filtro não saberia disso.

Como tal, pode ser que, dependendo do seu documento, você não consiga incorporar o conteúdo de qualquer maneira.

Apresentando o plug-in do Google Drive Embedder

Para desfrutar de uma experiência melhor ao incorporar documentos do Google Drive, convém recorrer a uma solução dedicada. O plug-in Google Drive Embedder é uma solução exclusiva para incorporar quase qualquer documento do Google Drive em seu site:

The Google Drive Embedder plugin.

Você pode acessar seus documentos por meio de uma caixa de diálogo pop-up e configurar o acesso personalizado. Por exemplo, você pode usar um visualizador interativo somente leitura para exibir documentos e também oferecer um link que leva a uma versão editável. Além disso, você também pode oferecer esses arquivos para download.

Embora o plug-in se concentre nas incorporações do Google Drive, não é toda a história. Você também pode exibir vários outros tipos de arquivo. Isso significa que, se você tiver documentos do Microsoft Word, arquivos ZIP, vídeos, imagens, PDFs e muito mais, poderá incorporá-los todos.

A boa notícia é que o plugin principal é gratuito. No entanto, há mais recursos disponíveis na versão premium. Por exemplo, você obtém uma integração mais próxima com o Google Drive, com a capacidade de navegar em pastas específicas, como as pastas Compartilhado comigo e Com estrela . Falando nisso, você também pode incorporar pastas em seu site.

Independentemente disso, a versão gratuita do plug-in é completa e simples de usar. Vamos mostrar a você como começar a usar o plug-in a seguir.

Como incorporar o Google Drive no WordPress usando o plug-in do Google Drive Embedder (em 3 etapas)

Há três etapas entre você e um documento incorporado do Google Drive. Sua primeira tarefa é configurar dois plugins no WordPress. Vamos olhar para ambos, por sua vez, primeiro.

1. Instale e ative o plug-in de login do Google Apps

Para usar o Google Drive Embedder, você também precisará instalar o plug-in de login do Google Apps:

The Google Apps Login plugin.

É um plug-in crucial para ajudar os usuários existentes a fazer login no Google com autenticação segura. Além disso, se você estiver conectado ao Gmail, não precisará inserir esses detalhes novamente para acessar os arquivos. Como tal, é necessário.

O processo é simples, especialmente se você fizer isso na tela Plugins > Adicionar Novo no WordPress:

The WordPress Add Plugins screen.

Aqui, use a barra de pesquisa para encontrar o plug-in de login do Google Apps e clique no botão Instalar agora :

The Google Apps Login plugin install screen.

Após alguns momentos, você verá o botão mudar para Ativar . Você pode clicar nele novamente, quando retornará à tela principal de Plugins .

Antes de prosseguir, vá para a tela Configurações > Login do Google Apps :

The Google Apps Login setup screen.

Antes que o plug-in funcione, há algumas tarefas a serem concluídas aqui. Você precisa vincular o Google Drive à sua conta do WordPress por meio de um ID de cliente e um segredo do cliente dedicados. A boa notícia é que há um link para as instruções completas na parte superior da tela de configurações. Como tal, não abordaremos esses detalhes aqui.

Quando estiver pronto, você pode começar a instalar o plug-in Google Drive Embedder.

2. Instale e ative o plug-in do Google Drive Embedder

O processo para este plug-in é semelhante ao Login do Google Apps. A única diferença é que você pesquisará o Google Drive Embedder:

The Google Drive Embedder install screen.

Novamente, clique em Instalar agora , depois em Ativar e o WordPress instalará o plug-in em seu sistema. Com a versão gratuita do Google Drive Embedder, não há necessidade de configuração adicional! No entanto, se você atualizar para a versão premium, poderá encontrar todas as configurações na tela Configurações > Google Drive Embedder .

3. Incorpore seus documentos do Google Drive ao WordPress

A etapa final é incorporar seu documento no WordPress. Para fazer isso, vá para qualquer postagem ou página e procure adicionar um novo bloco ao seu conteúdo. Você está procurando o Bloco Incorporador do Google Drive:

The Google Drive Embedder Block.

Depois de adicionar isso ao seu layout, dê uma olhada no menu de configurações do bloco na barra lateral direita. Isso permitirá que você escolha seu documento do Google Drive:

The Select Google File button.

A partir daqui, você verá uma caixa de diálogo para ajudá-lo a escolher seu documento:

[IMAGE google-file-dialog]

Observe que na primeira vez que você acessar isso, talvez seja necessário autenticar o acesso com o Google, embora esse processo seja semelhante a outros processos de autenticação:

Google's authentication screen.

Depois de fazer isso, você verá uma lista de seus documentos do Google Drive na caixa de diálogo pop-up:

Choosing a document within Google.

Depois de escolher seu documento, você obtém acesso aos três botões de opção abaixo da caixa de diálogo de seleção:

The Embed document radio button.

Tudo isso é intuitivo e rápido de usar; as opções Incorporar documento permitem definir a largura e a altura da incorporação, enquanto o link de arquivo do Visualizador permite abrir o arquivo em uma nova janela e exibir um ícone. O botão de opção Fazer download do link do arquivo permitirá que você defina opções para que os usuários baixem seu arquivo se esse documento não for um documento nativo do Google.

Depois de clicar no botão Inserir arquivo, você verá o espaço reservado do código de acesso que está na atualização da tela. Se você visualizar a página daqui, verá a aparência da sua incorporação. A partir deste ponto, os usuários poderão interagir com o documento no front-end do seu site.

Conclusão

O Google oferece um conjunto estelar de aplicativos que permitem criar documentos de texto, planilhas e muito mais. Se você é proprietário de um site WordPress, é tentador querer combiná-los. Felizmente, isso está bem dentro do reino da possibilidade.

Embora você não queira confiar na funcionalidade de incorporação nativa do Google Drive, convém empregar um plug-in como o Google Drive Embedder. Isso oferece uma maneira de incorporar documentos do Google Drive em praticamente qualquer lugar da página. Além disso, você obtém algumas opções de personalização para tornar o visualizador e a experiência do seu jeito.

Você precisa incorporar documentos do Google Drive e esse plug-in o ajudará? Compartilhe seus pensamentos na seção de comentários abaixo!