A compartilhamento de conteúdos é uma prática bastante comum. No entanto, apresentar o conteúdo de outro criador no seu site tem ramificações legais potenciais, ao hospedar grandes arquivos como vídeos podem prejudicar o desempenho do seu site. Felizmente, os iFrames fornecem uma solução simples para estes problemas.

Neste post, vamos explicar o que são iFrames e como usá-los com o seu site WordPress.

Pronto para mergulhar? Vamos a isso!

O que são iFrames (e porque são úteis)?

Um iFrame é uma forma de incorporar uma página web no conteúdo de outra página. Isso é feito usando tags HTML, a URL da página externa e especificações sobre como a janela deve aparecer em seu site.

Existem duas situações em que os iFrames são geralmente úteis.

A primeira é quando você deseja compartilhar conteúdo que não pertence a você. Na maioria dos casos, a incorporação de conteúdo através de um iFrame é não é considerado violação de direitos autorais (ver também regulamento da UE). Portanto, é geralmente um método legal e mais ético de compartilhar do que a maioria das outras opções. Além disso, o código dentro de um iFrame não pode ser acessado diretamente. Isso significa que um visitante do seu site não pode copiar o conteúdo incorporado e compartilhá-lo em outro lugar.

A segunda razão pela qual você pode querer incorporar iFrames é para compartilhar arquivos grandes, como vídeo, áudio ou até mesmo imagens. O YouTube é o exemplo perfeito aqui.

Com um iFrame, você pode exibir o conteúdo de um arquivo em seu site sem ter que hospedá-lo em seu Biblioteca multimédia WordPress. Isso é importante porque esses tipos de arquivos de mídia geralmente ocupam uma quantidade significativa de espaço de armazenamento e podem até mesmo abrandar o seu site.

Por hospedando seus vídeos em uma plataforma como o YouTube e, em seguida, incorporá-los em seu site do WordPress com iFrames, você pode evitar as desvantagens de carregá-los para o seu site diretamente. Esta técnica ajudará a torná-lo um membro mais ético da comunidade online e manter o seu site rápido e fácil de usar.

Como usar iFrames com WordPress (3 métodos)

Assim como existem vários cenários em que você pode querer usar um iFrame, existem vários métodos para implementar um. Abaixo, vamos explorar três das maneiras mais comuns de adicionar iFrames ao seu site do WordPress.

1. Adicionar iFrames no WordPress manualmente

O código básico para adicionar um iFrame a uma página é bastante simples. Tudo o que você precisa são as tags HTML de abertura e fechamento, e a URL da página web que você deseja incorporar:

<iframe src="example.com"></iframe>

Há algumas limitações a serem observadas em relação à URL de origem. Primeiro, o iFrames só pode exibir conteúdo de sites que usam o mesmo Protocolo de Transferência de Hipertexto que o seu. Em outras palavras, se seu site usa HTTPS, você só pode incorporar conteúdo de outros sites HTTPS. Da mesma forma, se você usa HTTP, você só pode incorporar URLs que também usam HTTP.

Além disso, alguns sites populares – tais como Facebook e YouTube – desative a incorporação manual do iFrame. Tentar exibir uma página de um site que não permite que o iFrame embeds exiba um erro na sua janela:

A incorporação do iFrame está desativada

A incorporação do iFrame está desativada

Se você é capaz de usar este método, é importante saber que você também pode personalizar seus iFrames para atender às necessidades do seu site. É aí que entram os parâmetros do iFrame. Algumas das mais comuns incluem:

Por exemplo, aqui está o que o código pareceria para um iFrame com um tamanho de janela de 900 pixels por 700 pixels, com visualização em tela cheia ativada, que é definido para download após o resto da página web:

<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>

No frontend, isto é o que aquele iFrame pode parecer:

Como um iFrame fica no frontend

Como um iFrame fica no frontend

outros parâmetros que você pode considerar usar também. No entanto, os listados acima devem permitir que você crie iFrames básicos para compartilhar vídeos do YouTube ou outro conteúdo em seu site.

2. Usar códigos incorporados para criar iFrames

Alguns sites têm restrições sobre se você pode incorporar manualmente seu conteúdo em iFrames. Isso pode dificultar o recurso de determinados tipos de conteúdo, como publicações no Facebook ou Vídeos do YouTube. No entanto, isso não significa que você não pode exibir conteúdo dessas fontes em iFrames.

Em vez disso, você simplesmente tem que acessar os códigos embutidos necessários para fazer isso. Vamos ver como isto funciona no YouTube como um exemplo. Vá até o vídeo que você deseja incorporar, seja ele seu ou de outro criador. Por baixo do leitor de vídeo, deverá ver um botão compartilhar:

Recurso de compartilhamento do YouTube

Recurso de compartilhamento do YouTube

Clique neste botão e abrirá uma janela exibindo as várias opções de compartilhamento disponíveis. Um deles é o Embed:

Recurso de incorporação do YouTube

Recurso de incorporação do YouTube

Quando você seleciona a opção Incorporar, o YouTube exibirá um trecho HTML que você pode usar para adicionar o vídeo a um iFrame. Ele inclui certos parâmetros iFrame, que você pode copiar e usar se desejar. Caso contrário, você também pode optar por simplesmente copiar a URL de origem:

Código incorporado do YouTube

Código incorporado do YouTube

Quando você usa o código de incorporação, o vídeo será exibido em seu iFrame em vez do erro que você veria se você tentasse usar a URL padrão.

Para adicioná-lo a uma página ou postar no Editor de blocos, você pode usar um bloco HTML personalizado:

Incorporando iframe como um bloco HTML personalizado

Incorporando iframe como um bloco HTML personalizado

No Editor Clássico, você precisará mudar para o editor de texto e adicionar seu código no ponto relevante:

Incorporando iframe como um HTML personalizado no Classic Editor

Incorporando iframe como um HTML personalizado no Classic Editor

O resultado deve ser um iFrame funcional:

iFrame corretamente adicionado no WordPress

iFrame corretamente adicionado no WordPress

Você pode seguir um processo semelhante para incorporar uma publicação do Facebook em seu site. Navegue até a mensagem que deseja compartilhar e clique no ícone de três pontos no canto superior direito da mensagem:

Recurso incorporado do Facebook

Recurso incorporado do Facebook

Em seguida, selecione a opção Incorporar:

Cansado do suporte de hospedagem do WordPress de nível 1 e sem respostas? Experimente nossa equipe de suporte de classe mundial! Confira nossos planos

recurso de incorporação do Facebook

recurso de incorporação do Facebook

Isto mostrará um snippet HTML muito parecido com o do vídeo do YouTube que vimos anteriormente. Mais uma vez, a URL de origem é a parte mais importante deste código, embora você também possa usar os parâmetros predeterminados:

Código iframe do Facebook

Código iframe do Facebook

Adicione este código à sua página web e o post deve ser exibido sem qualquer problema:

iframe do Facebook incorporado no WordPress

iframe do Facebook incorporado no WordPress

Muitos sites populares de mídia social, incluindo LinkedIn, Instagram e Twitter, também oferecem códigos incorporados para suas postagens. Você normalmente encontrará essa opção nas configurações de cada postagem individual.

3. Adicionar iFrames ao WordPress usando um plugin

Naturalmente, os desenvolvedores do WordPress estão sempre trabalhando para simplificar tarefas como a incorporação de iFrames através do uso de plugins. Há duas opções que você pode querer considerar se a incorporação de conteúdo externo em seu site é algo que você planeja fazer com freqüência. A solução mais popular é o plugin iFrame:

iframe WordPress plugin

iframe WordPress plugin

Este plugin permite que você adicione iFrames ao seu site do WordPress usando atalhos. Você pode especificar todos os mesmos parâmetros como faria ao adicionar manualmente um iFrame via HTML. No entanto, você não precisa se preocupar em lidar diretamente com o código de suas páginas.

Alternativamente, você também pode tentar a opção Plugin iFrame avançado:

Avançado iFrame WordPress plugin

Avançado iFrame WordPress plugin

Mais uma vez, este plugin permite-lhe adicionar iFrames ao seu site utilizando atalhos. No entanto, ele também inclui vários recursos adicionais, como códigos de segurança para evitar que outros usuários incorporem iFrames sem a sua permissão, opções de estilo personalizadas e muito mais.

Por $20, você pode atualizar para um Licença avançada de seis meses do iFrame Pro. Esta versão produz iFrames responsivos, e habilita recursos como funcionalidade de zoom e Lazy Loading. Dependendo da frequência com que planeia utilizar o iFrames no seu site, estas opções podem valer a etiqueta de preço premium.

Precisa de apresentar um vídeo, clipes de áudio ou conteúdo de outra pessoa no seu site? Saiba como incorporar o código iFrame no WordPress com este guia detalhado! 📹🖼️Click to Tweet

Resumo

Manter o seu site funcionando bem e no lado direito da lei é vital. iFrames não só irá ajudá-lo a compartilhar o conteúdo dos outros de forma ética, mas também pode permitir que você exiba arquivos de vídeo e áudio sem ter que hospedá-los em seu site. Neste post, vimos três métodos para usar iFrames com WordPress:

  1. Incorporar sites WordPress e iFrames manualmente.
  2. Use códigos incorporados para criar iFrames.
  3. Adicione iFrames usando um plugin WordPress, como iFrame ou Advanced iFrame.

Você tem alguma dúvida sobre iFrames ou como usá-los em seu site WordPress? Deixe-nos saber na seção de comentários abaixo!


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos