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.

A mídia social tem sido fundamental para direcionar o tráfego para o 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 de fotos personalizado do Instagram para seu site WordPress.

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

A incorporação de um feed do Instagram em seu site WordPress permite que você mostre conteúdo novo aos seus visitantes sem muito trabalho extra. Isso 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 é atualizado automaticamente sempre que você publica novas fotos no Instagram. Você pode até mesmo mostrar as fotos de outras pessoas em seu site criando um feed de hashtag.

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 provas sociais valiosas e ganhar mais dinheiro on-line.

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 é usar o plugin Smash Balloon Instagram Feed. Ele é o melhor plug-in do Instagram para WordPress que permite exibir o conteúdo da sua conta do Instagram em um instante.

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

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

Tutorial em vídeo

Subscribe to WPBeginner

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

Como conectar uma conta do Instagram ao WordPress

Primeiro, você precisará instalar e ativar o plug-in Smash Balloon Instagram Feed. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá até a página Instagram Feed ” Settings (Configurações do feed do Instagram) no painel do WordPress

Depois disso, insira sua chave de licença do Smash Balloon no campo “License Key” (Chave de licença).

Você pode encontrar essas informações no e-mail de confirmação que recebeu quando comprou o Smash Balloon e também na sua conta do Smash Balloon.

Depois de fazer isso, clique no botão “Activate” (Ativar).

Agora você está pronto para criar um feed personalizado do Instagram. Para começar, selecione Instagram Feed ” All Feeds e, em seguida, clique no botão “Add New” (Adicionar novo).

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

Basta selecionar o tipo de feed que você deseja adicionar ao WordPress e clicar em “Next” (Avançar).

Se você quiser apenas exibir suas fotos do Instagram, poderá usar uma conta pessoal do Instagram. No entanto, você precisará de uma conta comercial do Instagram se quiser criar um feed de hashtag ou mostrar as publicações em que sua conta foi marcada.

Se você selecionar “Publish 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 “Next” (Avançar).

Deseja mostrar as postagens em que sua conta está marcada? Você precisará selecionar “Tagged Posts” e, em seguida, clicar em “Next”.

Independentemente do tipo de feed que estiver criando, você precisará conectar o WordPress à sua conta do Instagram.

Para começar, clique no botão “Add Source” (Adicionar fonte).

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

Se você selecionar o botão ao lado de “Personal”, 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 plug-in.

Ao escolher entre uma conta comercial e pessoal, basta clicar em “Login with Facebook”.

Agora, você pode selecionar a conta do Instagram que deseja apresentar em seu site do WordPress e clicar em “Next” (Avançar).

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

Feito isso, você precisa clicar no botão “Next” (Avançar).

Agora você verá uma janela 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 plug-in à sua conta do Instagram, basta clicar em qualquer um dos botões para mudar de “Sim” para “Não”. Esteja ciente de que isso pode afetar as fotos que aparecem em seu blog ou site do WordPress.

Com isso em mente, recomendamos deixar todos os botões ativados. Quando estiver satisfeito com a configuração do feed, vá em frente e clique em “Done” (Concluído).

Agora você verá um pop-up com a conta do Instagram que acabou de adicionar ao seu site.

Basta marcar a caixa ao lado dessa conta e clicar em “Adicionar”.

O Instagram Feed Pro o levará de volta à 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 “Next” (Avançar).

O plug-in agora criará um feed de fotos do Instagram que você pode adicionar a qualquer página, post ou área pronta para widget.

Como personalizar seu feed de fotos do Instagram

Por padrão, o Smash Balloon abrirá seu feed no editor, pronto para ser personalizado.

À direita, você verá uma visualização 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 abordaremos rapidamente algumas áreas importantes.

Para alterar o layout, basta clicar em “Feed Layout” no menu à esquerda. Agora você pode escolher entre um layout de grade, alvenaria ou carrossel.

Há também um layout Destacado que destaca cada terceira foto por padrão.

À medida que você clicar nas diferentes opções, a visualização ao vivo será atualizada automaticamente para mostrar o novo layout. Isso facilita a experimentação de diferentes designs e a descoberta do que você prefere.

Por padrão, o Smash Balloon mostra o mesmo número de fotos em computadores desktop e dispositivos móveis. Você pode visualizar como o feed do Instagram será exibido 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, portanto, talvez seja melhor mostrar menos fotos e vídeos do Instagram em dispositivos móveis.

Para fazer isso, basta digitar um número diferente no campo “Celular” em “Número de postagens”.

Por padrão, o Smash Ballon dividirá suas fotos em 4 colunas no desktop, 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 “Columns” (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 tenha uma boa aparência em dispositivos móveis, é inteligente visualizar a versão móvel do seu site WordPress.

Depois de fazer suas alterações, clique no link “Customize” (Personalizar). Isso o levará de volta ao editor principal do Smash Balloon, pronto para você explorar a próxima tela de configurações, que é “Color Scheme” (Esquema de cores).

Por padrão, o Smash Balloon usa um esquema de cores herdado do seu tema do WordPress, mas também tem temas “Claro” e “Escuro” que você pode querer usar para o seu feed do Instagram.

Você pode até mesmo criar seu próprio esquema de cores selecionando “Personalizado” e, em seguida, usando as configurações para alterar a cor do link, a cor do plano 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 essas imagens estão vindo.

Para alterar a aparência dessa seção, volte à tela principal de configurações e selecione “Header” (Cabeçalho).

Nessa tela, você pode alterar a cor do plano 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, talvez você queira mostrar uma imagem diferente, como o logotipo personalizado do seu site.

Para alterar a foto do perfil, clique em “Add Image” (Adicionar imagem) em “Show custom avatar” (Mostrar avatar personalizado). Em seguida, você pode escolher uma imagem da biblioteca de mídia do WordPress ou carregar uma nova foto.

Você também pode adicionar uma biografia diferente. Por exemplo, você pode adicionar uma chamada para ação que incentive as pessoas a visitarem sua página do Instagram.

Para criar uma biografia exclusiva no Instagram, basta digitar na caixa “Adicionar biografia personalizada”.

Quando estiver satisfeito com a aparência do cabeçalho, clique no link “Customize” (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 publicações individuais dentro do feed do Instagram.

Para fazer isso, selecione “Post Style”.

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

Se você selecionar “Boxed”, poderá alterar a cor do plano de fundo, adicionar uma sombra de caixa e aumentar o raio da borda para criar cantos curvos.

Quando estiver satisfeito com as alterações, basta clicar no link “Posts” para voltar à tela anterior do Smash Balloon.

Dessa vez, selecione “Images and Videos” (Imagens e vídeos).

O Smash Balloon analisa automaticamente suas fotos do Instagram e as mostra na melhor resolução. Recomendamos usar essas configurações padrão, pois elas foram projetadas para aumentar a velocidade e o desempenho do WordPress. No entanto, você pode aumentar ou diminuir o tamanho das imagens do Instagram, se necessário.

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

Mais uma vez, clique no link “Posts” para retornar à tela anterior.

Dessa vez, selecione “Caption” (Legenda). Na próxima tela, você pode mostrar a legenda do Instagram ao lado de cada imagem clicando no controle deslizante “Enable” (Ativar).

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

Feito isso, basta clicar no link “Posts” para voltar à tela anterior.

A próxima configuração é “Like and Comment Summary” (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 publicações no Instagram obtiverem uma boa quantidade de engajamento, esses números poderão incentivar as pessoas a visitar sua página do Instagram ou começar a segui-lo nas mídias sociais.

Como sempre, você precisa clicar em “Posts” para retornar à tela anterior.

A última opção é “Hover State”, que é a sobreposição que o Smash Balloon adiciona a uma publicação quando você passa o mouse sobre ela.

Aqui, você pode escolher as informações que o Smash Balloon mostra quando alguém passa o mouse sobre uma publicação usando as configurações em “Informações a serem exibidas”.

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

Quando estiver satisfeito com as alterações feitas, clique no link “Customize” (Personalizar).

Isso o leva de volta à página principal de configurações do Smash Balloon, onde você pode clicar na guia “Load More Button” (Carregar mais botões).

Aqui, você pode ajudar o botão “Load More” a se destacar alterando a cor do plano de fundo, a cor do texto e o estado do mouse.

Você também pode tentar adicionar sua própria mensagem ao botão, digitando-a no campo “Texto”.

Embora recomendemos deixar esse botão ativado, você pode removê-lo. Por exemplo, você pode incentivar as pessoas a visitarem 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 “Enable” (Ativar) para que ele fique cinza.

Se os visitantes gostarem do que estão vendo, eles podem decidir se inscrever usando o botão “Seguir no Instagram” que aparece abaixo do feed incorporado.

Como se trata de um botão tão importante, talvez você queira adicionar um estilo personalizado para ajudá-lo a se destacar. Para fazer isso, selecione “Customize” (Personalizar) para retornar à tela principal de configurações. Em seguida, selecione “Follow Button” (Botão Seguir) no menu à esquerda.

Aqui, você pode alterar a cor de fundo do botão, o estado do mouse e a cor do texto.

Por padrão, o botão mostra um rótulo “Seguir no Instagram”.

Você pode substituí-la por sua própria mensagem, digitando-a no campo “Texto”.

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

Para configurar esse recurso, volte à tela principal de configurações do Smash Balloon e clique em “Lightbox”.

Aqui, você pode alterar a quantidade de comentários que o Smash Balloon mostrará na lightbox.

Se você não quiser usar o recurso lightbox, poderá desativá-lo usando o controle deslizante “Enable” (Ativar).

Quando estiver satisfeito com a aparência do feed do Instagram, não se esqueça de clicar em “Save” (Salvar) para armazenar suas alterações.

Agora você está pronto para adicionar o feed do Instagram ao seu site WordPress.

Exibindo um feed de 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ê tiver criado mais de um feed usando o Smash Balloon, precisará saber o código do feed para usar um widget ou bloco.

Para obter esse código, você deve ir para Instagram Feed ” All Feeds e, em seguida, copiar o texto em “Shortcode”.

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

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

Basta abrir a página ou o post em que 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 mostrará um de seus feeds do Instagram por padrão. Se você quiser mostrar um feed diferente do Smash Balloon, localize “Shortcode Settings” (Configurações do código curto) no menu à direita.

Aqui, basta adicionar o shortcode e clicar em “Apply Changes” (Aplicar alterações).

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

Outra opção é adicionar o widget de feed do Instagram ao seu site. Essa é 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 Appearance ” Widgets. Em seguida, clique no ícone azul “+” na parte superior da tela.

No painel que aparece, digite “Instagram Feed” para encontrar o widget certo.

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

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

O widget mostrará automaticamente um dos feeds que você criou usando o Smash Balloon. Se esse não for o feed personalizado do Instagram que você acabou de criar, digite o código do feed na caixa “Shortcode Settings” (Configurações de código curto).

Depois disso, clique em “Apply Changes” (Aplicar alterações).

Agora você pode ativar o widget clicando no botão “Update” (Atualizar). Para obter 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, publicação ou área pronta para widget usando um shortcode.

Basta acessar Instagram Feed ” All Feeds e copiar o código na coluna “Shortcode”. Agora você pode adicionar esse 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 sites completo para adicionar o bloco Instagram Feed em qualquer lugar do seu site WordPress.

No painel, vá para Appearance ” Editor.

Por padrão, o editor de site completo mostrará o modelo inicial do tema.

Se quiser adicionar o feed do Instagram a uma área diferente, clique em “Template” (Modelo) ou “Template Parts” (Partes do modelo).

O editor agora mostrará uma lista de todas as partes do modelo que compõem o tema do WordPress.

Basta clicar no modelo em que você deseja exibir o feed do Instagram.

O WordPress agora mostrará uma visualização do design.

Para editar esse modelo, clique no ícone de lápis pequeno.

Depois de escolher um modelo, passe o mouse sobre a área em que 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 nele para adicioná-lo ao modelo.

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

Bônus: Permita que os clientes comprem seus produtos pelo Instagram

Se você tiver uma loja on-line, também poderá usar seu feed personalizado do Instagram para vender facilmente seus produtos.

OSmash 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 pelas páginas dos produtos. Isso pode aumentar as vendas e aumentar os lucros de sua loja.

Para obter mais detalhes, consulte 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. Talvez você também queira saber como adicionar um brinde do Facebook no WordPress para aumentar o engajamento e nossa lista de estatísticas de mídia social para iniciantes.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.