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:
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:
- Largura: Este parâmetro permite-lhe definir uma largura específica para o iFrame em pixels.
- Altura: Tal como o parâmetro de largura, a altura determina o tamanho da janela iFrame na sua página web em pixels.
- Permitir: Com este parâmetro, pode definir determinados comportamentos ou funcionalidades predefinidos para o seu iFrame, tais como visualização em ecrã inteiro ou processamento de pagamentos.
- Importância: Você pode usar este parâmetro para especificar quando um iFrame deve ser carregado.
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:
Há 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:
Clique neste botão e abrirá uma janela exibindo as várias opções de compartilhamento disponíveis. Um deles é o Embed:
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:
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:
No Editor Clássico, você precisará mudar para o editor de texto e adicionar seu código no ponto relevante:
O resultado deve ser um iFrame funcional:
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:
Em seguida, selecione a opção Incorporar:
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:
Adicione este código à sua página web e o post deve ser exibido sem qualquer problema:
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:
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:
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.
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:
- Incorporar sites WordPress e iFrames manualmente.
- Use códigos incorporados para criar iFrames.
- 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!
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
Deixe um comentário