Muitos proprietários de sites querem adicionar a reprodução automática de vídeos incorporados do Instagram às suas páginas para chamar instantaneamente a atenção dos visitantes.
Infelizmente, colar o código nativo no seu site e esperar que o vídeo seja reproduzido automaticamente irá deixá-lo desapontado.
Sei exatamente como é frustrante passar tempo ajustando HTML apenas para perceber que o iframe padrão do Instagram bloqueia completamente a reprodução automática.
Parece um grande obstáculo quando se quer apenas que o seu conteúdo social dinâmico se destaque e mantenha os utilizadores envolvidos.
A boa notícia é que ainda pode obter os benefícios atraentes do vídeo em movimento sem as desvantagens do método manual defeituoso.
Neste guia, explicarei por que a reprodução automática nativa falha e mostrarei uma solução muito melhor para exibir os seus vídeos sem falhas.
- É possível ativar a reprodução automática em um vídeo incorporado do Instagram?
- A melhor maneira de exibir vídeos incorporados do Instagram no seu site
- Como incorporar vídeos do Instagram no seu site [Método recomendado]
- Pronto para incorporar vídeos do Instagram da maneira certa?
É possível ativar a reprodução automática em um vídeo incorporado do Instagram?
Não, não é possível ativar a reprodução automática num vídeo padrão incorporado no Instagram.
Se já tentou adicionar a reprodução automática ao seu código incorporado do Instagram e nada aconteceu, não está sozinho.
Em vez de incorporar o vídeo, o código oficial de incorporação do Instagram gera um iframe que mostra como o vídeo se parece.
Quando um visitante clica no vídeo, ele simplesmente o redireciona para o Instagram. Isso significa que está a perder um visitante do site — o que é um grande problema.
Aqui está um breve resumo do que precisa saber:
- The native Instagram embed uses an <iframe>, and browsers block autoplay on <iframe> content from third-party sources by default.
- O sistema de incorporação do Instagram não suporta o atributo autoplay — adicioná-lo ao código não tem efeito.
- Existe uma solução alternativa que proporciona o mesmo resultado chamativo sem depender da reprodução automática defeituosa — e abordaremos isso neste guia.
A reprodução automática nas incorporações do Instagram é mesmo uma boa ideia?
A reprodução automática pode chamar a atenção rapidamente, mas tem desvantagens reais que vale a pena ponderar antes de optar por ela.
A resposta honesta é: depende dos seus objetivos, pois há vantagens e desvantagens genuínas em ambos os lados.
Aqui está uma análise equilibrada dos prós e contras:
| O caso a favor da reprodução automática | O caso CONTRA a reprodução automática |
|---|---|
| Chama instantaneamente a atenção do visitante | Diminui a velocidade de carregamento da página — os vídeos são recursos pesados |
| Mantém os utilizadores envolvidos na página | Não suportado por incorporações nativas do Instagram |
| Mostra conteúdo dinâmico sem precisar clicar | Os navegadores bloqueiam cada vez mais a reprodução automática e o som |
| Pode parecer intrusivo para os visitantes |
A boa notícia é que existe uma maneira de obter os benefícios da reprodução automática, que chama a atenção, sem prejudicar a velocidade da página.
A melhor maneira de exibir vídeos incorporados do Instagram no seu site
O método manual de incorporação do Instagram falha na reprodução automática porque não tem controlo sobre o comportamento do reprodutor do Instagram.
When you copy the official embed code from Instagram, it generates an <iframe> tag that loads Instagram’s external player directly onto your page.
Mesmo que o Instagram suportasse a reprodução automática, os navegadores modernos provavelmente iriam bloqueá-la de qualquer maneira.
“Como deve ter notado, os navegadores da Web estão a adotar políticas mais rigorosas em relação à reprodução automática, a fim de melhorar a experiência do utilizador, minimizar os incentivos para instalar bloqueadores de anúncios e reduzir o consumo de dados em redes caras e/ou restritas.”
– Chrome para programadores
O resultado final é que a reprodução automática em vídeos incorporados de terceiros é bloqueada de duas maneiras ao mesmo tempo: pelo Instagram e pelo próprio navegador.
A melhor maneira: obtenha um comportamento semelhante ao da reprodução automática com o Instagram Feed Pro
O Instagram Feed Pro é um plugin do WordPress que permite obter os benefícios atraentes da reprodução automática sem as desvantagens.
Em vez de carregar um ficheiro de vídeo pesado no momento em que a sua página é aberta, o Instagram Feed Pro exibe uma miniatura leve.
Quando um visitante clica nele, o vídeo é reproduzido diretamente no seu site em uma lightbox, sem redirecioná-lo para o Instagram.
Isso significa que você obtém uma experiência de vídeo dinâmica e atraente, sem prejudicar a velocidade da página ou correr o risco de perder visitantes para o Instagram.
Aqui está uma rápida visão geral do que o plugin pode fazer:
- Atualizações automáticas com as suas últimas publicações no Instagram — sem necessidade de atualização manual
- Personalizador visual integrado para controlar a aparência do feed de vídeos do Instagram
- Temas e modelos pré-construídos para escolher rapidamente um design apelativo
- Suporta feeds de hashtags do Instagram, @menções, álbuns de fotos e Stories
- Os vídeos são reproduzidos no seu site (em uma caixa de luz), para que os visitantes não precisem sair da sua página.
Como os vídeos só são carregados quando o visitante clica em reproduzir, a velocidade da sua página permanece rápida, mesmo quando você exibe muitos vídeos.
Além de proporcionar uma melhor experiência aos visitantes, isso também é ótimo para o SEO do seu site.
Pronto para adicionar vídeos incorporados do Instagram e aproveitar os benefícios da reprodução automática?
Pode inscrever-se no Instagram Feed Pro aqui!
Como incorporar vídeos do Instagram no seu site [Método recomendado]
Aqui está um passo a passo de como configurar o Instagram Feed Pro no seu site WordPress. Todo o processo leva cerca de 5 minutos.
Passo 1: Instalar e ativar o plug-in Instagram Feed Pro
Para começar, você precisará comprar e baixar o Instagram Feed Pro aqui.
Depois de obter o ficheiro do plugin, instale-o e ative-o no seu site WordPress (consulte este guia para principiantes para obter ajuda com esta etapa).
Passo 2: Crie um feed de vídeos no Instagram
Agora é hora de criar o seu primeiro feed de vídeo do Instagram. Vá para Feed do Instagram » Todos os feeds no seu painel do WordPress.
Clique no botão Adicionar novo para iniciar o processo de configuração.
Em seguida, ser-lhe-á pedido que escolha um tipo de feed — pode selecionar entre Linha do tempo do utilizador, Hashtag público ou Publicações marcadas.
Depois de ter feito a sua seleção, clique em Seguinte para avançar.
Passo 3: Ligar a sua conta do Instagram
No ecrã seguinte, terá de ligar a sua conta do Instagram para que o plugin possa extrair o seu conteúdo. Clique no botão Adicionar fonte para começar.
Será solicitado que escolha um tipo de ligação: Básica ou Avançada.
Funciona basicamente como um feed simples do Instagram, que permite exibir as suas próprias publicações.
Por outro lado, uma ligação avançada permite mostrar feeds de hashtags, histórias do Instagram e menções.
Selecione o que melhor se adapta às suas necessidades e clique em Conectar.
Como estamos a utilizar um feed básico, pode clicar no botão «Ligar ao Instagram ».
Uma ligação avançada significa que terá de se ligar usando o Facebook, mas o processo é o mesmo.
Em seguida, pode optar por conceder ao plugin acesso apenas de leitura à sua conta do Instagram.
Nota: Como se trata de acesso somente leitura, o plugin só pode visualizar as suas informações e não poderá fazer alterações. Saiba mais sobre por que o Smash Balloon é seguro
Basta clicar em Permitir para conceder ao plugin permissão para aceder à sua conta.
Por fim, selecione a sua conta do Instagram como fonte e clique em Avançar.
Passo 4: Personalize as suas incorporações de vídeo do Instagram
É aqui que pode controlar exatamente a aparência dos seus vídeos do Instagram e qual conteúdo é exibido.
No ecrã seguinte, selecione um tema de feed entre as opções. Cada tema altera as cores, os ícones, o estilo das publicações e muito mais.
Depois de selecionar uma opção, clique em Avançar.
Em seguida, passe para a seleção de um modelo que combine com o seu design. Cada modelo exibirá as suas publicações num layout diferente.
Como antes, pode clicar em Avançar para confirmar a sua escolha.
Filtrar o seu feed para mostrar apenas vídeos
Se quiser, pode usar este feed para mostrar vídeos e fotos incorporados do Instagram de uma só vez.
Para mostrar apenas vídeos, primeiro clique em Configurações na parte superior e selecione Filtros e moderação.
Desça até à secção Mostrar tipos específicos de publicações.
Desmarque a opção Fotos para que o seu feed exiba apenas conteúdo de vídeo.
Em seguida, pode escolher se deseja mostrar vídeos do feed, reels ou ambos.
Quando estiver satisfeito com a sua seleção, clique em Guardar alterações.
Agora clique no botão Configurações para abrir o personalizador visual mais uma vez.
Desta vez, clique no separador Personalizar na parte superior.
Escolher um layout de feed
À direita, tem uma pré-visualização ao vivo das suas incorporações do Instagram. E à esquerda, tem um painel com as opções de personalização.
Primeiro, clique em Layout do feed para verificar os layouts disponíveis.
Depois disso, o painel mostrará quatro layouts à sua escolha: Grade, Carrossel, Alvenaria ou Destaque.
Uma grelha funciona muito bem para mostrar várias publicações do Instagram de uma só vez. Por outro lado, pode usar um layout em alvenaria para manter as proporções originais dos seus vídeos do Instagram.
Você também pode usar um layout carrossel para tornar o seu site interativo ou destacar determinados vídeos com um layout de destaque.
Clique em Guardar depois de escolher o seu layout.
Ajustando o estilo da publicação
Primeiro, vamos voltar às principais opções de personalização. Basta clicar no botão Personalizar no canto superior esquerdo.
Ainda no personalizador, clique em Publicações para ajustar a forma como as publicações individuais aparecem.
A partir daqui, pode personalizar a aparência de cada publicação do Instagram, com opções como:
- Estilo de publicação
- Imagens e vídeos
- Legenda
- Resumo de curtidas e comentários
- Estado de suspensão
Por enquanto, clique na opção Estilo da publicação aqui.
Em Estilo da publicação, pode escolher entre Caixa ou Normal, dependendo da aparência que preferir.
Como antes, clique em Guardar para armazenar as suas alterações antes de continuar.
Um vídeo em caixa será exibido separadamente do seu fundo, e você poderá escolher a cor do fundo, o tamanho da borda e a sombra.
Da mesma forma, um vídeo normal do Instagram será colocado na página ou no fundo da barra lateral sem separação.
Passo 5: Adicione vídeos incorporados do Instagram ao seu site
Depois de configurar e personalizar os seus vídeos do Instagram, é hora de adicioná-los ao seu site.
O Instagram Feed Pro oferece duas maneiras fáceis de fazer isso: numa página ou numa área de widget na barra lateral ou rodapé.
Como mostrar vídeos incorporados do Instagram numa página
Clique no botão Incorporar na parte superior para ver como adicionar conteúdo do Instagram ao seu site.
Como pode ver, o Instagram Feed Pro fornece um código de atalho ou permite exibir vídeos numa página ou widget.
Na janela pop-up, pode clicar em Adicionar a uma página.
Isto mostra uma lista das páginas que publicou no seu site.
Selecione a página do WordPress onde deseja que o feed apareça e clique em Adicionar.
Quando estiver no editor de páginas, clique no ícone de mais (+) para adicionar um novo bloco.
Funciona como qualquer outro bloco do WordPress — sem necessidade de lidar com códigos incorporados.
Pesquise por «Instagram» e selecione o bloco Feed do Instagram nos resultados.
Quando estiver satisfeito com a aparência final, clique em Publicar para ativar o feed na sua página.
Como mostrar vídeos incorporados do Instagram na sua barra lateral ou rodapé
Também pode adicionar os seus vídeos a uma área de widget, se preferir. Isso só funciona se o seu tema WordPress suportar widgets na barra lateral ou no rodapé.
Primeiro, aceda ao Feed do Instagram » Todos os feeds e clique no feed de vídeo do Instagram que criou.
Como anteriormente, clique na opção Incorporar para abrir a janela pop-up.
Verá as mesmas opções de antes.
Desta vez, clique na opção Adicionar a um widget na janela pop-up.
Após aguardar um segundo, o plugin irá redirecioná-lo para a página Widgets do seu site.
A partir daqui, selecione o painel Barra lateral ou escolha o painel Rodapé.
O passo final é o mesmo em ambos os casos, por isso selecione o local que desejar para os seus vídeos.
Clique no ícone de mais (+) dentro da área do widget e selecione o widget Feed do Instagram para adicioná-lo.
O seu feed de vídeo aparecerá agora na área do widget escolhida em todo o seu site.
Pronto para incorporar vídeos do Instagram da maneira certa?
Se pretende que os seus vídeos do Instagram envolvam os visitantes sem tornar o seu site mais lento ou redirecionar as pessoas para o Instagram, o Instagram Feed Pro é a solução mais simples que testámos.
Você obtém o impacto visual da reprodução automática, tempos de carregamento extremamente rápidos e controle total sobre o design do seu vídeo do Instagram.
Pronto para adicionar vídeos do Instagram ao seu site? Obtenha uma cópia do Instagram Feed Pro aqui!
Enquanto estiver aqui, também pode consultar este guia sobre como adicionar o chat do Instagram ao seu site WordPress.
