Como Mostrar um PDF do Google Drive Diretamente no seu Site (Guia Passo a Passo para Iniciantes)

Aprenda a incorporar um PDF do Google Drive direto no seu site para que seus visitantes leiam o documento sem precisar baixar nada. Guia fácil e sem complicações!

PDF Google Drive

Se você tem um jornal digital, um e-book, um cardápio ou qualquer documento em PDF e quer que as pessoas consigam lê-lo diretamente na página do seu site, exatamente como os grandes portais de notícias fazem, a forma mais fácil e gratuita de fazer isso é usando o Google Drive.

Quando você incorpora (ou "embute") um arquivo, o visitante não precisa baixar nada no celular ou no computador; o documento já aparece aberto na tela, fazendo parte do seu site.

Neste tutorial, você vai aprender como fazer isso passo a passo, mesmo que nunca tenha mexido com códigos antes!

Passo 1: Prepare o seu arquivo PDF

Antes de começar, certifique-se de que o seu documento está pronto e salvo no formato PDF no seu computador ou celular. Dê um nome claro e profissional ao arquivo (evite nomes confusos como "documento_final_v3_atualizado.pdf").

Passo 2: Envie o PDF para o Google Drive

Acesse o seu Google Drive com a sua conta do Google.
Clique no botão Novo (um botão com o símbolo de "+", que fica no canto superior esquerdo da tela).
Escolha a opção Upload de arquivo.
Procure o seu PDF no computador, clique em "Abrir" e aguarde o carregamento terminar.

Passo 3: Libere o acesso para o público (Muito Importante!)

Se você pular este passo, as pessoas que entrarem no seu site verão uma mensagem de "Acesso Negado". Precisamos avisar ao Google que qualquer pessoa pode ver esse arquivo.

No seu Google Drive, encontre o PDF que você acabou de subir e clique com o botão direito do mouse sobre ele.
Passe o mouse em Compartilhar e depois clique em Compartilhar novamente.
Na janela que abrir, procure pela seção Acesso geral. Você vai notar que provavelmente está escrito "Restrito".
Clique na palavra "Restrito" e mude para Qualquer pessoa com o link.
Verifique se ao lado dessa opção ficou escrito "Leitor". Se sim, clique no botão Concluído.

Passo 4: Pegue o "Código Secreto" de incorporação

O Google Drive esconde um pequeno código HTML que serve para criar essa "janela" dentro do seu site. Como o Google possui versões diferentes de tela, tente a Opção A. Se não encontrar, use a Opção B:

Opção A (A mais comum):

Dê dois cliques no seu PDF dentro do Google Drive para que ele abra na tela de visualização.
No canto superior direito, clique nos três pontinhos verticais (Mais ações).
Atenção aqui: Clique na opção Abrir em uma nova janela. O PDF vai abrir em uma nova aba do seu navegador.
Nessa nova aba, vá novamente ao canto superior direito e clique nos três pontinhos verticais.
Agora sim, uma nova opção chamada Incorporar item... vai aparecer. Clique nela e copie o código < iframe...

Opção B (Se a sua tela for diferente):

Com o arquivo aberto na tela, olhe para o canto superior esquerdo.
Clique no menu Arquivo (ou File).
Passe o mouse sobre Compartilhar e escolha a opção Acessar link de incorporação (ou Publicar na Web > Incorporar).
Uma caixinha ou aba vai se abrir com o código que começa com < iframe src=... Copie todo esse código!

Passo 5: Cole o código dentro do seu site

Agora você só precisa levar esse código para o painel onde você gerencia o seu site.

Se você usa o sistema JCS Notícias (JCSites): No editor da sua notícia ou página, clique no botão Código-Fonte (geralmente representado pelo ícone < >) ou vá no menu Inserir > Código e cole o texto.
Se você usa o WordPress (Editor de Blocos): No local da página onde quer colocar o PDF, adicione um novo bloco clicando no "+", procure por HTML personalizado e cole o código ali dentro.
Se você usa o Wix: Clique em Adicionar (+) > Incorporar código > Incorporar HTML e cole o código.

Dica de Ouro para o visual ficar perfeito!

O código padrão do Google vem configurado com um tamanho fixo e pequeno. Para fazer com que o PDF ocupe toda a largura da tela do seu visitante e fique muito mais elegante, mude apenas dois detalhes no código que você colou.

Procure por width="640" e height="480" dentro do código e altere para:

width="100%" (Isso faz com que ele se adapte perfeitamente ao tamanho da tela, tanto no computador quanto no celular).
height="800" (Isso deixa a janela mais comprida, permitindo que o leitor veja uma página inteira sem precisar rolar tanto a tela para baixo).

Pronto! Agora é só salvar ou publicar a sua página. O seu documento em PDF estará totalmente visível, bonito e interativo para os seus leitores!