Como Incorporar Código iFrame Facilmente no WordPress (3 Métodos)

Ao construir sites, frequentemente encontramos a necessidade de exibir conteúdo de fontes externas sem hospedá-lo nós mesmos. É aí que os iFrames se destacam.

Seja para incorporar um vídeo, um mapa ou um aplicativo de terceiros, os iFrames oferecem uma maneira integrada de adicionar conteúdo externo ao seu site WordPress.

Neste artigo, vamos guiá-lo por três métodos fáceis para adicionar código iFrame em posts ou páginas do WordPress. Desde o uso de códigos de incorporação pré-fabricados até a criação manual de seus próprios iFrames, nós o cobrimos. 

O que é iFrame?

Um iFrame (abreviação de inline frame) permite que você incorpore vídeos ou outro conteúdo em seu site sem realmente ter que hospedar esse vídeo. Isso pode economizar largura de banda e espaço de armazenamento, que é por que você nunca deve fazer upload de um vídeo diretamente para o WordPress.

Além de melhorar a velocidade e o desempenho do seu WordPress, o iFrame será atualizado automaticamente se o conteúdo original mudar. Isso significa que os visitantes sempre verão a versão mais recente do conteúdo.

Incorporar conteúdo protegido por direitos autorais via iFrame também não viola direitos autorais, o que pode ajudá-lo a se proteger contra processos judiciais.

Dito isso, vamos ver como você pode facilmente incorporar código iFrame no WordPress. Basta usar os links rápidos para pular diretamente para o método que você deseja usar:

Método 1: Incorporar iFrame do WordPress Usando o Código da Fonte (Rápido e Fácil)

Muitos sites de hospedagem de vídeo grandes têm uma opção 'Incorporar' que lhe dá acesso ao código iFrame que você precisa adicionar ao seu site.

Se o site tiver alguma configuração de 'Compartilhar' ou 'Incorporar', esta é frequentemente a maneira mais rápida e fácil de incorporar conteúdo.

As etapas exatas variarão dependendo da plataforma, mas vamos usar o YouTube como exemplo. Para incorporar vídeos do YouTube no WordPress, basta clicar no botão 'Compartilhar' abaixo do vídeo que você deseja usar.

Depois disso, você verá um pop-up com diferentes opções de compartilhamento.

Simplesmente prossiga e clique no botão 'Incorporar'.

O YouTube agora mostrará o código iFrame.

Por padrão, o YouTube marcará a caixa 'Mostrar controles do player', mas também recomendamos ativar o modo de privacidade aprimorada. Este modo permite que os visitantes assistam ao conteúdo incorporado em seu site WordPress sem que isso influencie a experiência de navegação deles no YouTube.

Depois disso, prossiga e clique no botão 'Copiar'.

Agora, você pode colar esse código em qualquer post ou página do seu site. Neste guia, adicionaremos a uma nova página no editor de blocos do WordPress.

Simplesmente abra a página e clique no botão ‘+’. No pop-up que aparecer, comece a digitar ‘HTML’ para encontrar o bloco HTML personalizado.

Quando o bloco correto aparecer, clique para adicioná-lo à sua página.

Em seguida, simplesmente cole o código iFrame do YouTube no bloco.

Agora você pode publicar sua página para ver o vídeo do YouTube ao vivo em seu blog WordPress.

Método 2: Incorporar com um Plugin WordPress de iFrame (Funciona com Todos os Sites)

Nem todo site de terceiros fornece um código de incorporação pronto. Se você não conseguir encontrar nenhuma configuração de ‘Compartilhar’ ou ‘Incorporar’, poderá facilmente criar seu próprio código iFrame usando o plugin iFrame.

Primeiro, você precisa instalar e ativar o plugin iFrame. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, o plugin começará a funcionar imediatamente, sem necessidade de configuração. Simplesmente vá para a página ou post onde você deseja incorporar conteúdo e adicione um bloco de Shortcode.

Depois disso, adicione o seguinte shortcode:

[iframe src="URL goes here"]

Simplesmente substitua 'URL vai aqui' pela URL do conteúdo que você deseja incorporar em seu site.

Como exemplo, vamos adicionar um Mapa do Google no WordPress, pois esta é uma maneira fácil para lojas, restaurantes e outros locais adicionarem direções em seu formulário de contato.

Depois disso, basta pré-visualizar ou publicar o post.

Agora você deve ver o conteúdo incorporado em seu site.

Para ver todos os parâmetros disponíveis, você pode dar uma olhada na página do plugin iFrame.

Método 3: Incorporar iFrames no WordPress Manualmente (Sem Plugin Necessário)

Se você não quiser usar um plugin do WordPress especial, então você pode criar o código iFrame manualmente. Para fazer isso, você precisa abrir a página ou post e, em seguida, adicionar um bloco HTML no editor de conteúdo do WordPress.

Primeiro, cole o seguinte código no seu bloco HTML:

<iframe src="URL goes here"></iframe>

Simplesmente substitua 'URL goes here' pelo URL direto do conteúdo que você deseja incorporar.

Aqui, estamos incorporando um Mapa do Google:

Você pode adicionar parâmetros extras para alterar a aparência do conteúdo em seu site. Por exemplo, estamos definindo a largura para 600 pixels e a altura para 200 pixels:

<iframe src="URL goes here" width="600" height="300"></iframe>

Isso é útil se você precisar exibir o conteúdo incorporado em um espaço menor. Por exemplo, você pode querer redimensionar o conteúdo após testar a versão mobile do seu site WordPress.

Quais são algumas alternativas de iFrame?

Existem algumas desvantagens em incorporar iFrames.

Nem todos os sites permitem que você coloque o conteúdo deles em um iFrame, e você pode precisar ajustar manualmente o conteúdo para que ele fique bom no espaço disponível.

Outra questão é que sites HTTPS só podem usar iFrames para conteúdo de outros sites HTTPS. Da mesma forma, sites HTTP só podem usar iFrames para conteúdo de outros sites HTTP.

É por isso que muitas plataformas como o WordPress preferem oEmbed.

Frequentemente, você pode usar oEmbed para incorporar vídeos e outros conteúdos simplesmente colando um URL no post do WordPress. O WordPress redimensionará automaticamente o oEmbed para caber no espaço disponível, de modo que sempre ficará perfeito em desktops, smartphones e tablets.

Se você deseja exibir feeds sociais em seu site, recomendamos o uso de um plugin de mídia social em vez de iFrames.

Por exemplo, Smash Balloon facilita a incorporação de conteúdo do Facebook, Instagram, Twitter e YouTube.

Aqui estão alguns tutoriais sobre como adicionar feeds de mídia social com o Smash Balloon:

• Como Incorporar Tweets Reais em Posts de Blog do WordPress
• Como Incorporar Vídeos do TikTok no WordPress
• Como Incorporar uma Playlist do YouTube no WordPress (Melhor Método)

Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente iframes no WordPress. Você também pode querer conferir nossos guias sobre como incorporar SoundCloud no WordPress e como desativar incorporações no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.