Como Criar um Feed de Fotos Personalizado do Instagram no WordPress

Um feed do Instagram pode manter seu site atualizado e, ao mesmo tempo, gerar mais curtidas, compartilhamentos e seguidores no Instagram. Ele ajuda você a se conectar com seu público em várias plataformas e aumenta o engajamento.

As mídias sociais têm sido fundamentais para direcionar tráfego para nosso site e expandir nosso público. Ao compartilhar conteúdo envolvente e interagir com nossos seguidores, conseguimos aumentar o reconhecimento da marca e atrair novos visitantes.

Neste artigo, mostraremos como criar facilmente um feed personalizado de fotos do Instagram para o seu site WordPress.

Por que incluir um feed do Instagram no seu site WordPress?

Incorporar um feed do Instagram no seu site WordPress permite que você mostre conteúdo novo aos seus visitantes sem muito trabalho extra. Também incentiva os leitores a seguirem você no Instagram.

Em vez de adicionar imagens manualmente no editor de blocos do WordPress, você pode simplesmente criar um feed que se atualiza automaticamente toda vez que você posta novas fotos no Instagram. Você pode até mesmo mostrar fotos de outras pessoas em seu site criando um feed de hashtags.

Na imagem a seguir, você pode ver um exemplo de uma marca que usa um feed personalizado do Instagram para mostrar conteúdo gerado pelo usuário.

Dessa forma, você pode usar um feed personalizado do Instagram para fornecer prova social valiosa e ganhar mais dinheiro online.

Dito isso, vamos ver como você pode criar um feed de fotos personalizado do Instagram no WordPress.

Como Criar um Feed de Fotos Personalizado do Instagram no WordPress

A maneira mais fácil de adicionar um feed de fotos do Instagram ao seu site é usando o plugin Smash Balloon Instagram Feed. É o melhor plugin do Instagram para WordPress que permite exibir conteúdo da sua conta do Instagram instantaneamente.

É também a maneira mais fácil de corrigir o problema de oEmbed do Facebook e Instagram no WordPress.

Cobriremos várias etapas em nosso tutorial, e você pode usar os links rápidos abaixo para pular para as diferentes seções:

• Como Conectar uma Conta do Instagram ao WordPress
• Como Personalizar Seu Feed de Fotos do Instagram
• Exibindo um Feed das Suas Fotos do Instagram no WordPress
• Bônus: Deixe os Clientes Comprarem Seus Produtos Através do Instagram

Tutorial em Vídeo

Inscreva-se no WPBeginner

Se você preferir instruções escritas, continue lendo.

Como Conectar uma Conta do Instagram ao WordPress

Primeiro, você precisará instalar e ativar o plugin Smash Balloon Instagram Feed. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, acesse a página Instagram Feed » Configurações no painel do WordPress.

Depois disso, insira sua chave de licença do Smash Balloon no campo 'Chave de Licença'.

Você pode encontrar essas informações no e-mail de confirmação que recebeu ao comprar o Smash Balloon e também em sua conta Smash Balloon.

Assim que fizer isso, clique no botão 'Ativar'.

Agora você está pronto para criar um feed personalizado do Instagram. Para começar, selecione Instagram Feed » Todos os Feeds e, em seguida, clique no botão 'Adicionar Novo'.

O Smash Balloon agora mostrará todos os diferentes tipos de feeds do Instagram que você pode criar.

Simplesmente selecione o tipo de feed que você deseja adicionar ao WordPress e clique em 'Próximo'.

Se você deseja apenas exibir suas fotos do Instagram, pode usar uma conta pessoal do Instagram. No entanto, você precisará de uma conta comercial do Instagram se quiser criar um feed de hashtags ou mostrar as postagens em que sua conta foi marcada.

Se você selecionar 'Publicar Hashtag', precisará digitar as hashtags que deseja usar. Para mostrar várias hashtags no mesmo feed, basta separar cada hashtag com uma vírgula.

Depois de fazer isso, basta clicar em 'Avançar'.

Você deseja mostrar postagens em que sua conta foi marcada? Você precisará selecionar 'Postagens Marcadas' e, em seguida, clicar em 'Avançar'.

Não importa o tipo de feed que você está criando, você precisará conectar o WordPress à sua conta do Instagram.

Para começar, clique no botão 'Adicionar Fonte'.

Depois disso, escolha se deseja mostrar imagens de uma conta pessoal ou comercial.

Se você selecionar o botão 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 manualmente nas configurações do plugin.

Ao escolher entre uma conta comercial e pessoal, basta clicar em 'Entrar com o Facebook'.

Agora você pode selecionar a conta do Instagram que deseja apresentar em seu site WordPress e clicar em 'Avançar'.

Depois disso, marque a caixa ao lado da página do Facebook que está vinculada à conta do Instagram que você deseja usar.

Com isso feito, você precisa clicar no botão 'Avançar'.

Agora você verá um pop-up com todas as informações às quais o Instagram Feed Pro terá acesso e as ações que ele pode executar.

Para restringir o acesso do plugin à 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 que aparecem no seu blog WordPress ou site.

Com isso em mente, recomendamos deixar todos os interruptores ativados. Quando estiver satisfeito com a configuração do feed, 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 Instagram Feed Pro agora o levará de volta para a tela Feeds do Instagram » Todos os Feeds.

Para criar um feed personalizado do Instagram, 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.

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 mídia social.

A maioria dessas configurações é autoexplicativa, mas cobriremos rapidamente algumas áreas-chave.

Para alterar o layout, basta clicar em 'Layout do Feed' no menu esquerdo. Agora você pode escolher entre um layout de Grade, Mosaico ou Carrossel.

Há também um layout Destacado que destaca a cada três fotos por padrão.

Ao clicar nas diferentes opções, a prévia ao vivo será atualizada automaticamente para mostrar o novo layout. Isso facilita a experimentação de diferentes designs e a descoberta daquele que você prefere.

Por padrão, o Smash Balloon exibe o mesmo número de fotos em computadores e dispositivos móveis. Você pode visualizar como o feed do Instagram ficará em computadores, 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 'Number of Posts'.

Por padrão, o Smash Ballon dividirá suas fotos em 4 colunas em desktops, 2 colunas em tablets e uma única coluna em dispositivos móveis.

Deseja usar um número diferente de colunas? Então, basta rolar até a seção ‘Colunas’ no menu à esquerda.

Agora você pode digitar um novo número nos campos Desktop, Tablet ou Mobile.

Para garantir que seu feed do Instagram fique bom em dispositivos móveis, é inteligente visualizar a versão móvel do seu site WordPress.

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 também possui temas ‘Claro’ e ‘Escuro’ que você pode querer usar para seu feed do Instagram.

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 e muito mais.

Por padrão, o Smash Balloon adiciona um cabeçalho ao feed do Instagram, que é sua foto de perfil e o nome da sua página. Isso pode fornecer um contexto extra útil para que os visitantes entendam de onde vêm essas imagens.

Para alterar a aparência desta seção, retorne à tela principal de configurações e selecione ‘Cabeçalho’.

Nesta tela, você pode alterar a cor de fundo, mostrar sua biografia do Instagram, alterar o tamanho do cabeçalho e muito mais.

Por padrão, o cabeçalho inclui sua foto de perfil do Instagram. No entanto, você pode querer mostrar uma imagem diferente, como o logotipo personalizado do seu site.

Para alterar a foto do perfil, clique em ‘Adicionar Imagem’ em ‘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 biografia diferente. Por exemplo, você pode adicionar um chamada para ação que incentive as pessoas a visitar sua página do Instagram.

Para criar uma biografia exclusiva do Instagram, basta digitar na caixa ‘Adicionar biografia personalizada’.

Quando estiver satisfeito com a aparência do cabeçalho, clique no link ‘Personalizar’ para voltar à tela principal de configurações.

Agora, você precisa clicar em ‘Posts’.

Para começar, você pode alternar entre layouts em caixa e regulares para as postagens individuais dentro do feed do Instagram.

Para fazer isso, selecione ‘Estilo da Postagem’.

Agora você pode clicar para selecionar o layout que deseja usar.

Se você selecionar ‘Em caixa’, poderá alterar a cor de fundo, adicionar uma sombra em caixa e aumentar o raio da borda para criar cantos arredondados.

Quando estiver satisfeito com suas alterações, basta clicar no link ‘Posts’ para retornar à tela anterior do Smash Balloon.

Desta vez, selecione ‘Imagens e Vídeos’.

O Smash Balloon analisa automaticamente suas fotos do Instagram e as exibe na melhor resolução. Recomendamos o uso dessas configurações padrão, pois elas são projetadas para aumentar a velocidade e o desempenho do seu WordPress. No entanto, você pode tornar as imagens do Instagram maiores ou menores, se precisar.

Para alterar o tamanho da imagem, basta abrir o menu suspenso ‘Resolução’ e escolher um dos tamanhos de imagem padrão do WordPress da lista.

Mais uma vez, clique no link ‘Posts’ para retornar à tela anterior.

Desta vez, selecione ‘Legenda’. Na próxima tela, você pode exibir a legenda do Instagram ao lado de cada imagem clicando no controle deslizante ‘Ativar’.

Isso abrirá algumas novas opções de personalização, onde você pode alterar o tamanho e a cor do texto e definir um comprimento máximo de texto.

Com isso feito, basta clicar no link ‘Posts’ para retornar à tela anterior.

A próxima configuração é ‘Resumo de Curtidas e Comentários’.

Aqui, você pode adicionar ou ocultar o número total de curtidas e comentários em cada imagem. Se suas postagens do Instagram tiverem um bom engajamento, esses números podem incentivar as pessoas a visitar sua página do Instagram ou a segui-lo nas redes sociais.

Como sempre, você precisa clicar em ‘Posts’ para retornar à tela anterior.

A opção final é ‘Estado de Destaque’, que é a sobreposição que o Smash Balloon adiciona a uma postagem quando você passa o mouse sobre ela.

Aqui, você pode escolher as informações que o Smash Balloon exibe quando alguém passa o mouse sobre uma postagem usando as configurações em ‘Informações a exibir’.

Você também pode alterar a cor da sobreposição de destaque.

Quando estiver satisfeito com as alterações feitas, clique no link 'Customize'.

Isso o leva de volta à página principal de configurações do Smash Balloon, onde você pode clicar na guia ‘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 deixar 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 desativar 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 tão importante, você pode querer adicionar alguns estilos personalizados para ajudá-lo a se destacar. Para fazer isso, selecione ‘Personalizar’ para retornar à tela principal de configurações. Em seguida, 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 substituí-lo por sua própria mensagem digitando no campo ‘Texto’.

O Smash Balloon vem com uma lightbox integrada que permite aos visitantes abrir suas fotos e vídeos do Instagram sem sair do seu site.

Para configurar este recurso, volte para a tela principal de configurações do Smash Balloon e clique em ‘Lightbox’.

Aqui, você pode alterar quantos comentários o Smash Balloon exibirá na lightbox.

Se você não quiser usar o recurso de lightbox, poderá desativá-lo usando o controle deslizante ‘Ativar’.

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.

Exibindo um Feed das Suas Fotos do Instagram no WordPress

Você pode adicionar o feed personalizado do Instagram ao seu site usando um bloco, um widget ou um shortcode.

Se você criou mais de um feed usando o Smash Balloon, precisará saber o código do feed para usar um widget ou bloco.

Para obter este código, você deve ir para Instagram Feed » Todos os Feeds e, em seguida, copiar o texto em ‘Shortcode’.

Na imagem a seguir, precisaremos usar instagram-feed feed=4.

Se você quiser incorporar o feed do Instagram em uma página ou postagem, poderá usar o bloco do Instagram Feed.

Basta abrir a página ou postagem onde você deseja incorporar seu feed personalizado 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 exibirá um dos seus feeds do Instagram por padrão. Se você quiser mostrar um feed diferente do Smash Balloon, localize ‘Configurações do Shortcode’ no menu do lado direito.

Aqui, basta adicionar o shortcode e clicar em ‘Aplicar Alterações’.

Se você estiver satisfeito com a aparência do feed personalizado do Instagram, poderá publicar ou atualizar a página.

Outra opção é adicionar o widget do Instagram Feed ao seu site. Esta é uma ótima maneira de mostrar um feed do Instagram em todas as páginas do seu site. Por exemplo, você pode adicionar o widget do Instagram à barra lateral ou ao rodapé do tema do WordPress.

Para adicionar o widget do Instagram Feed ao seu site, vá para Aparência » Widgets. Você pode então clicar no ícone azul ‘+’ na parte superior da tela.

No painel que aparece, digite ‘Instagram Feed’ para encontrar o widget correto.

Como você pode ver na imagem a seguir, existem dois widgets do Instagram Feed, portanto, certifique-se de usar o correto.

Em seguida, basta arrastar o widget para a área onde você deseja exibir o feed do Instagram, como a barra lateral ou uma seção semelhante.

O widget exibirá automaticamente um dos feeds que você criou usando o Smash Balloon. Se este não for o feed personalizado do Instagram que você acabou de criar, digite o código do feed na caixa 'Configurações do 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 de Shortcode. Para obter ajuda para colocar o shortcode, consulte nosso guia sobre como adicionar um shortcode.

Você está usando um tema habilitado para blocos? Então você pode usar o editor de site completo para adicionar o bloco Instagram Feed em qualquer lugar do seu site WordPress.

No painel, vá para 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 'Modelo' ou 'Partes do Modelo'.

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 de fazer isso, você precisa digitar 'Instagram Feed'.

Quando o bloco correto aparecer, clique para adicioná-lo ao modelo.

Como sempre, o Smash Balloon exibirá um feed por padrão. Você pode alterar este feed adicionando um shortcode seguindo o mesmo processo descrito acima.

Bônus: Deixe os Clientes Comprarem Seus Produtos Através do Instagram

Se você tem uma loja online, então você também pode usar seu feed personalizado do Instagram para vender seus produtos facilmente.

Smash Balloon Instagram Feed Pro permite que você marque suas imagens do Instagram com links de produtos para que os usuários possam clicar neles e comprá-los diretamente, em vez de navegar por suas páginas de produtos. Isso pode aumentar as vendas e impulsionar os lucros em sua loja.

Para mais detalhes, você pode ver nosso guia completo sobre como adicionar imagens compráveis do Instagram no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como criar um feed personalizado do Instagram no WordPress. Você também pode querer aprender como adicionar um sorteio no Facebook no WordPress para aumentar o engajamento e nossa lista de estatísticas de mídias sociais para iniciantes.

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.