Como incorporar facilmente o código iFrame no WordPress (3 métodos)

Quer incorporar um código iFrame em uma postagem ou página do WordPress?

IFrames fornecem uma maneira fácil de incorporar vídeos ou outro conteúdo em seu site sem enviá-los. Muitas plataformas de terceiros, como o YouTube, permitem que os usuários usem iframe para incorporar conteúdo de seus sites.

Neste artigo, mostraremos como incorporar facilmente o código iFrame no WordPress usando vários métodos.

Incorpore facilmente o código iFrame no WordPress

O que é iFrame?

Um iframe permite que você insira vídeos ou outro conteúdo em seu site. Isso significa que você pode exibir um vídeo em seu site sem precisar hospedá-lo.

O iframe é como abrir uma janela em seu site para exibir conteúdo externo. O conteúdo real ainda é carregado da fonte da qual você está incorporando.

Para adicionar um iframe, você deve adicionar um código HTML especial. Não se preocupe se isso soar técnico o suficiente.

Mostraremos a maneira mais fácil de incorporar um iframe em seu blog WordPress.

Por que usar iFrames?

Um dos principais motivos para usar iFrames é evitar ter de hospedar vídeos ou outros recursos em seu site, o que consumirá sua largura de banda e espaço de armazenamento.

Além disso, os iFrames permitem evitar a violação do conteúdo protegido por direitos autorais de outras pessoas. Em vez de baixar seu vídeo ou outro conteúdo e, em seguida, enviá-lo ao seu site, basta adicioná-lo à sua página usando um iFrame.

Outra vantagem é que se o conteúdo original for alterado, ele também será atualizado automaticamente no iframe.

Uma imagem de personagens de desenhos animados adicionando conteúdo a um site

Existem também algumas desvantagens de usar iframes. Nem todos os sites permitem que você coloque seu conteúdo em um iFrame. Além disso, o iFrame pode ser muito grande ou muito pequeno para a sua página e você precisará ajustá-lo manualmente.

Leia Também:  Como saber quando é a melhor hora para publicar um blog ou uma postagem social

Outro problema é que os sites HTTPS só podem usar iFrames para conteúdo de outros sites HTTPS. Da mesma forma, os sites HTTP só podem usar iFrames para conteúdo de outros sites HTTP.

É por isso que muitas plataformas como o WordPress preferem o oEmbed. Você pode usar o oEmbed para incorporar vídeos e outros tipos de conteúdo simplesmente colando um URL em sua postagem do WordPress. O conteúdo será redimensionado automaticamente para caber e terá o tamanho correto mesmo em dispositivos móveis.

Importante: O WordPress não oferece suporte para oEmbed para postagens no Facebook e Instagram. Para saber mais sobre isso, verifique nosso guia completo sobre o problema do oEmbed no Facebook / Instagram e como corrigi-lo.

Outra ótima alternativa para iFrames é usar um plugin de feed social. Recomendamos usar Smash Ballooncomplementos de. Eles permitem que você exiba conteúdo do Facebook, Instagram, Twitter e YouTube.

Dito isso, vamos dar uma olhada em três maneiras diferentes de adicionar iframes ao seu site.

1. Use o código de incorporação da fonte para adicionar iFrame no WordPress

Muitos sites grandes têm uma opção de incorporação para seu conteúdo. Isso fornece o código iFrame especial que você precisa adicionar ao seu site.

No YouTube, você pode obter esse código acessando o vídeo no YouTube e clicando no botão Compartilhar abaixo dele.

Clique no botão Compartilhar para o vídeo do YouTube escolhido

Você verá uma janela pop-up com várias opções de compartilhamento. Basta clicar no botão Inserir.

Clicar no botão Incorporar para obter o código de incorporação do YouTube

Agora o YouTube mostrará o código iFrame. Por padrão, o YouTube incluirá os controles do player. Também recomendamos que você habilite o modo de privacidade aprimorada.

Depois disso, vá em frente e clique no botão Copiar para copiar o código.

Leia Também:  Baixe 10 plug-ins grátis para acelerar seu site WordPress

Copiando o código de incorporação para vídeo do YouTube

Agora, você pode colar esse código em qualquer postagem ou página do seu site. Vamos adicioná-lo a uma nova página no editor de blocos.

Para criar uma nova página, vá para Páginas »Adicionar novo no painel do WordPress.

Em seguida, adicione um bloco HTML à sua página.

Adicionar um bloco HTML personalizado ao WordPress

Agora, você precisa colar o código iFrame do YouTube neste bloco.

Cole o código HTML do YouTube no bloco iFrame

Você pode então visualizar ou postar sua página para ver o vídeo do YouTube incorporado nela.

Veja o vídeo incorporado ao vivo em seu site

Dica: Se você estiver usando o editor clássico antigo, ainda poderá adicionar o código iFrame. Você deve fazer isso na visualização de Texto.

Adicione o código iFrame do YouTube no editor clássico

Alternar entre a visualização visual e de texto no Editor Clássico pode causar problemas com o código iFrame.

2. Usando o plugin iFrame WordPress para incorporar um iFrame

Este método é útil porque permite que você crie um iframe para incorporar conteúdo de qualquer fonte, mesmo se essa fonte não fornecer um código de incorporação.

Primeiro, você deve instalar e ativar o iframe plugue. Para obter mais detalhes, verifique 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 a necessidade de configuração. Vá em frente e edite ou crie uma postagem ou página. Em seguida, adicione um bloco de código curto.

Adicionar um bloco de shortcode no editor de bloco

Depois disso, você pode usar este código curto para inserir seu código iFrame.

[iframe src="URL goes here"]

Apenas substitua URL vai aqui com a URL do conteúdo que você deseja incorporar ao seu site. Estamos incorporando um mapa do Google.

Dica: Pode ser necessário usar a opção Incorporar para obter o URL direto do conteúdo. Você deve usar apenas o URL, não o resto do código de incorporação.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

O shortcode para incorporar um mapa do Google

Em seguida, visualize ou publique sua postagem. Você deverá ver o mapa do Google embutido em seu site.

O mapa do Google embutido no site

Opcionalmente, você pode adicionar parâmetros ao código de acesso iFrame para alterar como o conteúdo incorporado é exibido. Por exemplo, você pode definir a largura e a altura e adicionar ou remover uma barra de rolagem ou borda. Você pode encontrar detalhes no Página do plugin IFrame.

Dica: Se você estiver usando o editor clássico, pode simplesmente colar o código de acesso em sua postagem ou página. Você não precisa mudar para a visualização de Texto.

Adicione o shortcode no editor clássico

3. Criação manual do código iFrame e incorporação no WordPress

Se preferir não usar um plug-in iFrame, você pode criar o código iFrame manualmente. Para fazer isso, você precisa adicionar um bloco HTML no editor de conteúdo do WordPress.

Adicionar um bloco HTML personalizado

Primeiro, você precisa colar este código em seu bloco HTML.

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

Basta substituir “URL vai aqui” pelo URL direto do conteúdo que você deseja inserir. Você só precisa do próprio URL.

Aqui, estamos incorporando um mapa do Google.

Insira o código iFrame para o mapa do Google

Você pode adicionar parâmetros adicionais à tag HTML. Por exemplo, você pode definir a largura e a altura do seu iFrame. O código a seguir significa que seu conteúdo incorporado exibirá 600 pixels de largura e 300 pixels de altura.

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

Isso é útil se você precisar restringir o conteúdo incorporado a um espaço menor.

O mapa do Google no site com altura e largura definidas

Esperamos que este artigo tenha ajudado você a aprender como incorporar facilmente código iFrame no WordPress. Você também pode verificar nosso guia definitivo sobre como acelerar seu site WordPress e nossa comparação das melhores ferramentas de pesquisa de palavras-chave para melhorar sua classificação de SEO.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: