Você quer incorporar feeds do Instagram no WordPress?
Mostrar fotos e vídeos do Instagram em seu site ajuda a manter seu conteúdo atualizado, aumenta o engajamento do usuário e constrói confiança. É também uma ótima maneira de promover sua conta do Instagram e obter mais seguidores.
Neste artigo, mostraremos como incorporar o Instagram no WordPress, passo a passo.

Por que incorporar o Instagram no seu site WordPress?
De acordo com nossa pesquisa de estatísticas de marketing, o Instagram tem mais de 2 bilhões de usuários ativos mensais. Isso significa que é um ótimo lugar para promover seus produtos e serviços, construir reconhecimento de marca e aumentar seu público.
No entanto, as pessoas não verão seu conteúdo do Instagram se apenas visitarem seu site. Com isso em mente, é inteligente incorporar seu feed do Instagram no WordPress, para que todos possam vê-lo.
Esta é uma maneira fácil de promover sua página de mídia social e incentivar mais pessoas a segui-lo no Instagram.
Todo esse conteúdo extra pode melhorar a otimização para mecanismos de busca (SEO) do seu site e incentivar os visitantes a voltarem para conferir as últimas postagens. Comentários e curtidas positivas também são prova social poderosas que podem construir confiança e gerar mais vendas.
Dito isso, vamos ver como você pode incorporar um feed do Instagram no WordPress.
Como Instalar um Plugin de Fotos do Instagram
A melhor maneira de incorporar o Instagram no WordPress é usando o plugin Smash Balloon Social Photo Feed.
Este plugin gratuito permite que você exiba fotos de uma ou mais contas do Instagram em um feed totalmente personalizável.

É também a maneira mais fácil de corrigir o problema de oEmbed do Facebook e Instagram no WordPress.
Após colocar o feed em seu site, ele será atualizado automaticamente toda vez que você fizer uma nova postagem no Instagram. Dessa forma, você pode manter seu site atualizado e interessante sem ter que atualizá-lo manualmente.
Neste guia, usaremos a versão gratuita do Smash Balloon, pois ela tem tudo o que você precisa para adicionar um feed do Instagram ao seu site WordPress. No entanto, também existe uma versão pro que permite exibir feeds de hashtags, adicionar imagens compráveis do Instagram e muito mais.
Antes de começar, você precisará conectar sua conta do Instagram a uma página do Facebook. Se você tiver uma conta pessoal do Instagram, talvez também queira transformá-la em uma conta comercial, pois isso permite que o Smash Balloon mostre sua biografia e cabeçalho do Instagram automaticamente.
Para instruções passo a passo sobre como fazer ambas as coisas, consulte a seção de Perguntas Frequentes no final deste guia.
Quando estiver pronto, prossiga e instale e ative o plugin Smash Balloon Social Photo Feed. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.
Como Conectar uma Conta do Instagram ao WordPress
Após ativar o plugin, sua primeira tarefa é conectar sua conta do Instagram ao WordPress. Simplesmente vá para Instagram Feed » Configurações e clique em ‘Adicionar Novo’.

Com o Smash Balloon pro, você pode criar feeds de posts marcados e hashtags, ou até mesmo criar uma parede social com conteúdo de vários sites de mídia social diferentes.
Como estamos usando o plugin gratuito, simplesmente selecione ‘Linha do tempo do usuário’ e clique em ‘Próximo’.

Agora, simplesmente escolha a conta que você usará em seu feed de fotos personalizado do Instagram.
Para começar, clique no botão 'Adicionar Fonte'.

Na próxima tela, escolha se deseja mostrar fotos de uma conta pessoal ou comercial do Instagram.
Se você marcar a caixa ao lado de ‘Pessoal’, o Smash Balloon não incluirá o avatar e a biografia do Instagram em seu cabeçalho por padrão. No entanto, você sempre pode adicionar o avatar e a biografia do Instagram posteriormente nas configurações do plugin.

Após escolher ‘Personal’ ou ‘Business,’ prossiga e clique em ‘Login with Facebook.’
Agora você pode selecionar a conta do Instagram que deseja destacar em seu site WordPress e clicar em ‘Próximo’.

Depois disso, marque a caixa ao lado da página do Facebook vinculada à sua conta do Instagram.
Quando terminar, clique no botão ‘Próximo’.

Agora você verá um pop-up com todas as informações às quais o Smash Balloon terá acesso e as ações que ele pode realizar.
Para restringir o acesso do Smash Balloon à sua conta do Instagram, basta clicar em qualquer um dos interruptores para mudá-lo de ‘Sim’ para ‘Não’. Esteja ciente de que isso pode afetar as fotos e vídeos que você pode exibir em seu blog ou site WordPress.
Com isso em mente, recomendamos deixar todos os interruptores ativados.
Quando estiver satisfeito com as configurações, clique em ‘Concluído’.

Agora você verá um pop-up com a conta do Instagram que você acabou de adicionar ao seu site.
Simplesmente marque a caixa ao lado dessa conta e clique em ‘Adicionar’.

O Smash Balloon agora o levará de volta à tela Feeds do Instagram » Todos os Feeds.
Para adicionar um feed de mídia social ao WordPress, basta marcar a caixa ao lado da conta do Instagram que você deseja usar. Em seguida, clique em ‘Próximo’.

O plugin agora criará um feed de fotos do Instagram que você pode adicionar a qualquer página, postagem ou área pronta para widgets. Por exemplo, você pode exibir fotos do Instagram em uma barra lateral do WordPress.
No entanto, antes de incorporar o feed do Instagram, você pode querer personalizar sua aparência e adicionar quaisquer informações ausentes.
Como Personalizar Seu Feed de Fotos do Instagram
Por padrão, o Smash Balloon abrirá seu feed em seu editor, pronto para você personalizar.
À direita, você verá uma prévia do seu feed de fotos do Instagram. No lado esquerdo estão todas as configurações que você pode usar para personalizar o feed de fotos.

A maioria dessas configurações é autoexplicativa, mas cobriremos rapidamente algumas áreas-chave.
Para começar, você pode alterar o layout das fotos do Instagram e adicionar preenchimento selecionando ‘Feed Layout’ no menu esquerdo.
À medida que você faz alterações, a prévia será atualizada automaticamente para que você possa experimentar diferentes configurações e ver o que fica melhor.

Por padrão, o Smash Balloon mostra o mesmo número de fotos, independentemente de o usuário estar em um computador desktop ou dispositivo móvel.
Você pode pré-visualizar como o feed do Instagram ficará em computadores desktop, tablets e smartphones usando a linha de botões no canto superior direito.

Smartphones e tablets geralmente têm telas menores e menos poder de processamento, então você pode querer exibir menos fotos e vídeos do Instagram em dispositivos móveis.
Para fazer isso, basta digitar um número diferente no campo ‘Mobile’ em ‘Número de Posts’.

Ao criar layouts diferentes para smartphones, tablets e computadores desktop, você pode garantir que o feed fique ótimo, independentemente do dispositivo que o visitante estiver usando.
Por padrão, o feed do plugin mostra menos colunas em smartphones e tablets, em comparação com computadores desktop. Isso ajuda suas fotos e vídeos a caberem confortavelmente em telas menores.
Para alterar essas configurações padrão, basta digitar novos números nas configurações de ‘Colunas’.

Após fazer suas alterações, clique no link ‘Personalizar’.
Isso o levará de volta ao editor principal do Smash Balloon, pronto para você explorar a próxima tela de configurações, que é 'Esquema de Cores'.

Por padrão, o Smash Balloon usa um esquema de cores herdado do seu tema do WordPress, mas ele também tem temas ‘Claro’ e ‘Escuro’ que você pode querer usar em vez disso.
Você pode até criar seu próprio esquema de cores selecionando ‘Personalizado’ e, em seguida, usando as configurações para alterar a cor do link, a cor de fundo, a cor do texto no WordPress, e mais.

Por padrão, o Smash Balloon adiciona um cabeçalho ao feed do Instagram, que é a sua foto de perfil e o nome da sua página. Para alterar a aparência desta seção, clique em ‘Header’ no menu à esquerda.
Nesta tela, você pode alterar a cor de fundo, mostrar sua bio do Instagram, alterar o tamanho do cabeçalho e muito mais.

Às vezes, você pode querer mostrar uma foto de perfil diferente. Por exemplo, se o seu avatar do Instagram não se destacar do seu tema, você pode usar um logotipo personalizado em vez disso.
Para alterar a foto de perfil, clique em ‘Add Image’ (Adicionar Imagem) em ‘Show custom avatar’ (Mostrar avatar personalizado). Você pode então escolher uma imagem da biblioteca de mídia do WordPress ou fazer o upload de uma nova foto.

Você também pode adicionar uma bio diferente. Por exemplo, você pode incentivar as pessoas a visitá-lo no Instagram ou a começar a seguir sua conta.
Para criar uma biografia exclusiva do Instagram, basta digitar na caixa ‘Adicionar biografia personalizada’.

O Smash Balloon analisa automaticamente suas fotos do Instagram e as exibe na melhor resolução. Recomendamos o uso dessas configurações padrão, mas você pode tornar as imagens do Instagram maiores ou menores, se necessário.
Para alterar o tamanho da imagem, clique em ‘Posts’ no menu à esquerda. Em seguida, selecione a opção ‘Imagens e Vídeos’.

Agora você pode escolher entre miniaturas, imagens médias e de tamanho completo usando o menu suspenso que aparece.
Para mais informações sobre este tópico, consulte nosso guia para iniciantes sobre tamanhos de imagem no WordPress.
Se você não estiver satisfeito com a aparência do feed, poderá retornar a esta tela a qualquer momento e selecionar 'Detectar automaticamente (Recomendado)' no menu suspenso.

Por padrão, o Smash Balloon adiciona um botão 'Carregar mais' à parte inferior do seu feed do Instagram para que os visitantes possam percorrer suas fotos e vídeos.
Você pode alterar a aparência deste botão selecionando 'Botão Carregar mais'.

Aqui, você pode fazer o botão ‘Carregar Mais’ se destacar alterando sua cor de fundo, cor do texto e estado de destaque.
Você também pode tentar adicionar sua própria mensagem ao botão, digitando no campo 'Texto'.

Embora recomendemos manter este botão ativado, você pode removê-lo. Por exemplo, você pode incentivar as pessoas a visitar seu Instagram limitando o número de fotos que elas podem ver em seu site.
Para remover o botão, basta alternar o controle deslizante 'Ativar' para que ele fique cinza.

Se os visitantes gostarem do que veem, eles podem decidir se inscrever usando o botão ‘Seguir no Instagram’ que aparece abaixo do feed incorporado.
Como é um botão muito importante, você pode querer adicionar alguns estilos personalizados para ajudá-lo a se destacar. Para fazer isso, selecione 'Botão Seguir' no menu à esquerda.
Aqui, você pode alterar a cor de fundo do botão, o estado de passagem do mouse e a cor do texto.

Por padrão, o botão exibe o rótulo ‘Seguir no Instagram’.
Você pode substituir isso por sua própria chamada para ação digitando no campo 'Texto'.

Quando estiver satisfeito com a aparência do feed do Instagram, não se esqueça de clicar em 'Salvar' para armazenar suas alterações.
Agora você está pronto para adicionar o feed do Instagram ao seu site WordPress.
Como Incorporar o Feed do Instagram no WordPress
Você pode adicionar o feed do Instagram ao seu site usando um bloco, widget ou shortcode.
Se você criou mais de um feed usando o Smash Balloon Social Photo feed, precisará saber o código do feed se for usar um widget ou bloco.
Para obter este código, vá para Instagram Feed » Todos os Feeds e copie o texto em 'Shortcode'.
Na imagem a seguir, precisaremos usar instagram-feed feed=1.

Se você quiser incorporar o feed do Instagram em uma página ou postagem, recomendamos usar o bloco Instagram Feed.
Observação: Se você estiver usando um tema habilitado para blocos, poderá seguir as instruções abaixo para adicionar o bloco em qualquer lugar do seu site usando o editor de site completo.
Basta abrir a página ou postagem onde você deseja incorporar seu feed de fotos e vídeos do Instagram. Em seguida, clique no ícone '+' para adicionar um novo bloco e comece a digitar 'Instagram Feed'.
Quando o bloco correto aparecer, clique para adicioná-lo à página ou postagem.

O bloco mostrará um dos seus feeds do Smash Balloon por padrão. Se você quiser mostrar um feed do Instagram diferente, procure por ‘Configurações de Shortcode’ no menu à direita.
Aqui, basta adicionar o códigoinstagram-feed feed=1e clicar no botão 'Aplicar Alterações'.

O bloco agora mostrará as fotos e vídeos da sua conta do Instagram. Basta publicar ou atualizar a página para que o feed fique ativo em seu site.
Você também pode adicionar o feed do Instagram a qualquer área pronta para widgets. Por exemplo, você pode adicioná-lo ao rodapé do seu site WordPress, ou à seção da barra lateral. Dessa forma, os visitantes poderão ver o feed em todas as páginas do seu site.
Simplesmente vá para Aparência » Widgets no painel do WordPress e clique no botão azul '+'.

Na barra de pesquisa, digite 'Instagram Feed' e selecione o widget correto quando ele aparecer.
O WordPress tem um bloco 'Instagram Feed' integrado, portanto, certifique-se de escolher aquele que exibe o logotipo oficial do Instagram.

Depois disso, basta arrastar o widget para a área onde você deseja exibir o feed do Instagram.
O widget mostrará automaticamente um dos feeds que você criou usando o Smash Balloon. Se você quiser mostrar um feed diferente do Instagram, basta digitar o shortcode do feed na caixa 'Configurações de Shortcode'.
Depois disso, clique em 'Aplicar Alterações'.

Agora você pode tornar o widget ativo clicando no botão ‘Atualizar’. Para mais informações, consulte nosso guia passo a passo sobre como adicionar e usar widgets no WordPress.
Outra opção é incorporar o feed do Instagram em qualquer página, postagem ou área pronta para widgets usando um shortcode.
Simplesmente vá para Instagram Feed » Todos os Feeds e copie o código na coluna ‘Shortcode’. Agora você pode adicionar este código a qualquer bloco Shortcode.
Para obter ajuda na colocação do shortcode, consulte nosso guia sobre como adicionar um shortcode.
Finalmente, se você tiver um tema habilitado para blocos, você pode usar o editor de site completo para adicionar o bloco Instagram Feed em qualquer lugar do seu site.
No painel do WordPress, basta ir em Aparência » Editor.

Por padrão, o editor de site completo exibirá o modelo inicial do tema.
Se você quiser adicionar o feed do Instagram a uma área diferente, clique em ‘Template’ ou ‘Template Parts.’

O editor agora mostrará uma lista de todas as partes do modelo que compõem seu tema WordPress.
Simplesmente clique no modelo onde você deseja exibir o feed do Instagram.

O WordPress agora mostrará uma prévia do design.
Para editar este modelo, vá em frente e clique no pequeno ícone de lápis.

Após escolher um modelo, passe o mouse sobre a área onde você deseja adicionar o feed de fotos do Instagram.
Em seguida, clique no botão azul '+'.

Depois disso, comece a digitar ‘Instagram Feed.’
Quando o bloco correto aparecer, clique para adicioná-lo ao modelo.

Como sempre, o Smash Balloon mostrará um feed por padrão se você não adicionar um shortcode específico. Você pode alterar este feed adicionando um shortcode seguindo o mesmo processo descrito acima.
Perguntas Frequentes Sobre Incorporar Instagram no WordPress
O Smash Balloon facilita a exibição de fotos e vídeos do Instagram em seu site. Dito isso, aqui estão algumas das perguntas mais frequentes sobre como adicionar um feed do Instagram no WordPress.
Como Crio uma Conta Comercial no Instagram?
O Smash Balloon Social Photo Feed pode exibir fotos de uma conta pessoal ou comercial do Instagram.
No entanto, o Smash Balloon não consegue buscar automaticamente o avatar e a biografia do Instagram de uma conta pessoal. Com isso em mente, você pode querer verificar se tem uma conta pessoal ou comercial e, em seguida, mudar para uma conta comercial para que o Smash Balloon possa buscar seu avatar e biografia automaticamente.
Para verificar, basta visitar sua conta do Instagram e clicar no ícone de três linhas no menu lateral.

Depois disso, selecione ‘Configurações.’
Se você não tiver uma conta comercial, esta tela mostrará ‘Mudar para conta profissional’ no menu esquerdo.

Se você atualmente tem uma conta pessoal e deseja mudar para uma conta comercial, basta clicar neste link.
Como Conecto uma Página do Facebook a uma Conta do Instagram?
Antes de poder adicionar um feed do Instagram ao WordPress, você precisará conectar sua conta do Instagram a uma página do Facebook.
Para fazer isso, acesse a página do Facebook que você deseja usar e clique em 'Configurações' no menu à esquerda.
Depois disso, clique em ‘Conta Vinculada.’ Agora você pode selecionar ‘Instagram’ e clicar no botão ‘Conectar.’

O Facebook agora mostrará todas as informações que ele poderá acessar e as ações que ele pode realizar no Instagram.
Se você estiver feliz em prosseguir, clique no botão ‘Conectar.’

Apenas esteja ciente de que qualquer outra pessoa que gerencie sua página do Facebook poderá ver suas mensagens do Instagram e responder a elas. Se você quiser manter suas mensagens do Instagram privadas, clique para desativar a opção.
Quando estiver feliz e pronto para prosseguir, clique em ‘Confirmar’.

Isso abre um pop-up onde você pode digitar seu nome de usuário e senha do Instagram.
Depois disso, prossiga e clique em ‘Entrar’.

Após alguns momentos, você verá uma mensagem dizendo que suas contas do Instagram e Facebook estão agora conectadas.
Esperamos que este artigo tenha ajudado você a aprender como incorporar facilmente o Instagram no WordPress. Você também pode querer ver nosso guia sobre como criar um feed personalizado do Facebook no WordPress, ou ver nossa seleção especializada dos melhores plugins de mídia social para 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.


Ayanda Temitayo
Esta é a primeira vez que estou incorporando o Instagram no meu site WordPress e parece de alguma forma fácil com este guia. Adoro a maneira como você usa ilustrações e imagens para explicações. É um post de blog muito longo, mas valeu a pena.
Obrigado por este guia. Você tem algum link útil para incorporar o feed do Twitter também?
WPBeginner Support
Nós temos um guia para incorporar tweets em nossa página abaixo!
https://www.wpbeginner.com/plugins/how-to-embed-actual-tweets-in-wordpress-blog-posts/
Admin
Ekene
Como faço para incorporar um plugin de vídeo do YouTube ao meu blog
WPBeginner Support
Existem várias opções para adicionar um vídeo do YouTube ao seu site, você vai querer dar uma olhada em nosso guia abaixo:
https://www.wpbeginner.com/beginners-guide/how-to-easily-embed-videos-in-wordpress-blog-posts/
Admin
Todd
Adicionei um vídeo do Instagram no WordPress com o oAuth, mas estou tendo um problema. Tenho a página dividida em 2 colunas com vídeos descendo a página e os vídeos do Instagram têm um grande espaço em branco abaixo deles. Você sabe uma maneira de consertar isso? Aqui está o meu site http://www.BeardGrowl.com
Obrigado por qualquer ajuda que você possa oferecer.
Stephen Clark
Implementei este snippet interessante como você instruiu, no entanto, quando ele foi renderizado no meu blog/site WP, era uma foto em miniatura. Esse é o comportamento pretendido? Ou ele deveria renderizar a imagem em tamanho real, o que significa que há algo no meu código que preciso investigar?
Equipe Editorial
A imagem está sendo redimensionada? Se sim, olhe em Configurações > Mídia para ver a largura máxima de incorporação.
Admin
Julien Maury
Receio que este código será inútil com o WordPress 3.5 :
https://twitter.com/jmlapam/status/264101995357540354
Julien Maury
Desculpe : o link está aqui : http://core.trac.wordpress.org/changeset/22351
greg
It’s best practise to omit the last ?> from an all php file.
Cool article!
Mia
Obrigado WPB..seus artigos têm sido muito úteis!
Equipe Editorial
Thanks for the kind words Mia
Admin
Richard Wells
Não quero ser chato, mas a tag de fechamento ?> está faltando no snippet de código.
Equipe Editorial
O WordPress cuida disso por padrão. Não deve dar nenhum erro.
Admin
Richard Wells
Sim, percebi depois que postei o comentário, estou me sentindo tolo…
Javier Villanueva
O WP não adiciona uma tag de fechamento ?>, ela simplesmente não é necessária em arquivos php e, de modo geral, é uma boa prática omiti-la para evitar o envio acidental de espaços em branco extras
Konstantin Kovshenin
Or you can simply wait for WordPress 3.5, which will ship with oEmbed support for SoundCloud, Instagram and SlideShare
Equipe Editorial
Nem vi isso nos recursos para 3.5. Bem, pelo próximo mês ou mais, as pessoas ainda podem usar isso.
Admin