Como Incorporar um Flipbook no WordPress
Guia passo a passo para incorporar um flipbook interativo no seu site WordPress usando código de embed iframe. Funciona com qualquer tema ou page builder.
Por Que Incorporar um Flipbook no Seu Site WordPress?
PDFs estáticos escondidos atrás de links de download não fazem justiça ao seu conteúdo. Os visitantes clicam, esperam o arquivo baixar, abrem em um aplicativo separado e — na maioria das vezes — nunca voltam ao seu site. Incorporar um flipbook interativo diretamente na sua página WordPress muda completamente o jogo.
Com um flipbook incorporado, seus visitantes têm uma experiência rica de virada de página sem nunca sair do seu site. Isso significa sessões mais longas, taxas de rejeição menores e uma impressão muito mais profissional. Seja exibindo um catálogo de produtos, folheto empresarial, revista ou manual de treinamento, um flipbook incorporado mantém os leitores engajados exatamente onde você quer.
O FlipLink torna isso fácil. Depois de criar um flipbook a partir do seu PDF, você obtém um código de embed pronto para usar que funciona com qualquer tema, page builder ou editor do WordPress. Sem necessidade de plugins.
Se você é novo na conversão de PDFs em flipbooks, comece com nosso guia sobre como converter um PDF em flipbook online e depois volte aqui para incorporar.
Obtendo o Código de Embed do FlipLink
Antes de mexer no WordPress, você precisa do seu código de embed. Veja como obtê-lo:
- Faça login no painel do FlipLink em
go.fliplink.me - Abra o flipbook que deseja incorporar
- Clique no botão Compartilhar
- Selecione a aba Embed
- Copie o código iframe fornecido
Seu código de embed será parecido com isso:
<iframe
src="https://go.fliplink.me/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen
></iframe>
Isso é tudo que você precisa. O FlipLink cuida do lado de compartilhamento e distribuição — sua tarefa é simplesmente colar este código no WordPress.
Método 1: Editor de Blocos do WordPress (Gutenberg)
O Editor de Blocos é o editor padrão do WordPress e a forma mais simples de incorporar seu flipbook.
Passo a Passo
- Abra a página ou post onde deseja o flipbook
- Clique no botão + para adicionar um novo bloco
- Procure por HTML Personalizado e selecione
- Cole o código de embed iframe do FlipLink no bloco
- Clique em Visualizar para verificar se está correto
- Clique em Publicar ou Atualizar
Pronto. O flipbook será renderizado diretamente na sua página com total interatividade — virada de página, zoom, tela cheia e tudo mais.
Dica Profissional
Se quiser o flipbook centralizado com espaço ao redor, envolva em um div:
<div style="max-width: 900px; margin: 0 auto; padding: 20px 0;">
<iframe
src="https://go.fliplink.me/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen
></iframe>
</div>
Método 2: Elementor
O Elementor é um dos page builders mais populares do WordPress, e incorporar um flipbook leva apenas alguns cliques.
Passo a Passo
- Abra a página no editor visual do Elementor
- Procure no painel de widgets por HTML
- Arraste o widget HTML para a seção desejada
- Cole o código iframe do FlipLink no campo HTML
- Ajuste as margens e o padding na aba Avançado
- Clique em Atualizar para salvar
O Elementor renderiza o iframe ao vivo no editor, então você pode ver exatamente como seu flipbook ficará antes de publicar. Use os controles responsivos do Elementor para ajustar a altura para breakpoints de tablet e mobile se necessário.
Transforme Seus PDFs em Flipbooks Interativos
Teste grátis — todos os recursos incluídos, sem cartão de crédito.
Começar Teste GrátisMétodo 3: Editor Clássico
Ainda usando o Editor Clássico? Sem problema. O processo é igualmente simples.
Passo a Passo
- Abra sua página ou post no Editor Clássico
- Mude para a aba Texto (não Visual) na barra de ferramentas do editor
- Posicione o cursor onde deseja o flipbook
- Cole o código de embed iframe
- Volte para a aba Visual para confirmar que aparece
- Clique em Publicar ou Atualizar
Importante: Sempre cole códigos de embed na aba Texto. A aba Visual pode remover ou alterar seu HTML, o que pode quebrar o embed.
Dicas de Dimensionamento Responsivo
Seu flipbook deve ficar ótimo em qualquer dispositivo. Aqui estão algumas dicas práticas para incorporação responsiva.
Use Largura em Porcentagem
Sempre defina width="100%" no seu iframe para que preencha o container. Isso garante que o flipbook se adapte a qualquer tamanho de tela automaticamente.
Defina uma Altura Adequada
Uma altura fixa em pixels de 500 a 700 funciona bem para a maioria dos flipbooks no desktop. Para uma abordagem mais responsiva, use o truque da proporção:
<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
<iframe
src="https://go.fliplink.me/view/your-flipbook-id"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0"
allowfullscreen
></iframe>
</div>
Isso mantém uma proporção 4:3 independente da largura da tela. Ajuste o padding-bottom para mudar a proporção — use 56.25% para 16:9 ou 100% para quadrado.
Teste no Mobile
O visualizador do FlipLink é totalmente responsivo, mas sempre visualize sua página WordPress em um celular para garantir que o layout ao redor não crie espaçamentos estranhos. A maioria dos problemas vem do CSS da página, não do flipbook em si.
Usando Embed de Imagem Clicável como Alternativa
Nem toda página precisa de um embed interativo completo. Às vezes você quer algo mais leve — uma thumbnail bonita que abre o flipbook completo ao clicar. É exatamente para isso que serve o recurso de Embed de Imagem Clicável do FlipLink.
Em vez de um iframe, você obtém uma imagem com link. Isso é perfeito para:
- Barras laterais de blog onde um flipbook completo seria grande demais
- Landing pages onde você quer que os visitantes cliquem intencionalmente
- Newsletters por e-mail que vinculam de volta à sua página WordPress
- Bibliotecas de recursos listando múltiplas publicações como thumbnails
Você pode copiar o código de Embed de Imagem Clicável no mesmo diálogo de Compartilhamento no painel do FlipLink. Ele carrega mais rápido que um iframe e dá controle total sobre a aparência da thumbnail através das opções de identidade visual e design do FlipLink.
Solucionando Problemas Comuns
O Flipbook Não Aparece
- Certifique-se de que colou o código no modo Texto/HTML, não no editor Visual
- Verifique se seu tema WordPress não remove iframes (alguns plugins de segurança os bloqueiam)
- Confirme se o flipbook está publicado e não em modo rascunho no FlipLink
O Flipbook Está Muito Pequeno ou Grande Demais
- Ajuste o valor de
heightno código iframe - Use o div wrapper responsivo mostrado acima para dimensionamento consistente
- Verifique se a área de conteúdo do seu tema tem um max-width que está restringindo o embed
Flipbook Funciona no Desktop Mas Não no Mobile
- Certifique-se de que
width="100%"está definido (não uma largura fixa em pixels) - Verifique se há
overflow: hiddenem containers pai que podem estar cortando o iframe - O visualizador do FlipLink lida com gestos mobile nativamente, então o problema quase sempre está no layout da página
WordPress Remove o Código de Embed
Alguns plugins de segurança (como Wordfence ou iThemes Security) ou configurações do tema podem filtrar tags iframe. Se seu código de embed desaparece após salvar:
- Verifique as configurações do plugin de segurança para regras de filtragem de iframe
- Adicione
go.fliplink.meàs suas fontes de iframe permitidas - Tente usar um bloco HTML dedicado em vez de colar inline
Considerações de SEO
Flipbooks incorporados melhoram as métricas de engajamento do usuário, o que beneficia seu SEO indiretamente. Para máxima visibilidade, certifique-se de que configurou os previews de SEO e redes sociais do seu flipbook no FlipLink para que mecanismos de busca e plataformas sociais exibam metadados ricos quando sua página for compartilhada.
Para um mergulho mais profundo nas opções de incorporação além do WordPress, confira nosso guia completo sobre como incorporar um PDF em um site.
Comece a Incorporar Flipbooks no WordPress Hoje
Incorporar um flipbook FlipLink no seu site WordPress leva menos de cinco minutos. Sem plugins para instalar, sem configuração complicada — basta colar um código de embed e seus visitantes terão uma experiência interativa impressionante.
Pronto para começar? Crie sua conta gratuita no FlipLink e converta seu primeiro PDF em um flipbook incorporável. Com nosso lifetime deal a partir de $129 para 100 publicações ativas, você tem incorporação ilimitada em todas as suas páginas WordPress e além.
Confira nossa página de preços para encontrar o plano ideal para suas necessidades.
Pronto para Criar Seu Primeiro Flipbook?
Transforme seus PDFs em flipbooks e documentos interativos. Comece com a Oferta Vitalícia do FlipLink — apenas $129 por 100 publicações ativas.
Leituras Relacionadas
Como Incorporar um Flipbook com Iframe
Incorpore seu flipbook FlipLink em qualquer site usando um simples código iframe — funciona com WordPress, Wix, Squarespace e mais.
Como Incorporar PDF no Site: 5 Métodos
Aprenda a incorporar um PDF no seu site com 5 métodos comprovados, incluindo iframe, flipbook embed e mais. Exemplos de código e prós e contras de cada um.
Como Incorporar um Flipbook no Squarespace
Aprenda a adicionar um flipbook interativo ao seu site Squarespace. Guia passo a passo usando blocos de código e opções de embed.