Como criar um feed de fotos personalizado do Instagram no WordPress

Você quer criar um feed personalizado do Instagram no WordPress?

Um feed do Instagram pode manter seu site atualizado e envolvente, ao mesmo tempo que proporciona mais curtidas, compartilhamentos e seguidores no Instagram.

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

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

Adicionar um feed do Instagram ao seu site WordPress permite que você mostre conteúdo novo aos visitantes sem muito trabalho extra. Também incentiva os leitores a segui-lo no Instagram.

Em vez de adicionar imagens manualmente no editor de blocos do WordPress, você pode simplesmente criar um feed que será atualizado automaticamente sempre que você postar novas fotos no Instagram. Você pode até mostrar fotos de outras pessoas em seu site criando um feed de hashtag.

Na imagem a seguir, você pode ver um exemplo de 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 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 o conteúdo da sua conta do Instagram em um instante.

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

Abordaremos 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

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

Depois de instalar o plugin, vá para Instagram Feed »Configurações .

Agora você pode inserir 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 quando comprou o Smash Balloon e também na sua conta do Smash Balloon.

Depois de adicionar sua chave de licença, vá em frente e clique no botão ‘Ativar’.

Depois de fazer isso, você estará pronto para criar um feed personalizado do Instagram. Para começar, selecione Instagram Feed »Todos os feeds e clique no botão ‘Adicionar novo’.

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

Basta selecionar o tipo de feed que deseja adicionar ao WordPress e clicar em ‘Avançar’.

Se você deseja apenas exibir suas fotos do Instagram, você pode usar uma conta pessoal do Instagram. No entanto, você precisará de uma conta Business Instagram se quiser criar um feed de hashtag ou mostrar as postagens nas quais sua conta está marcada.

Dica: não tem uma conta comercial? Para converter sua conta pessoal do Instagram em uma conta comercial, basta seguir as instruções passo a passo do Smash Balloon.

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’.

Quer mostrar postagens nas quais sua conta está marcada? Você precisará selecionar 'Postagens marcadas' e clicar em 'Avançar'.

Não importa que tipo de feed você esteja 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 empresarial.

Se você selecionar o botão próximo a ‘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.

Após escolher ‘Pessoal’ ou ‘Empresarial’, basta clicar em ‘Login com Facebook’.

Agora você pode selecionar a conta do Instagram que deseja incluir no seu site WordPress e clicar em ‘Avançar’.

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

Feito isso, 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 pode realizar.

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

Com isso em mente, recomendamos deixar todas as opções habilitadas. Quando estiver satisfeito com a configuração do feed, vá em frente e clique em ‘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 agora o levará de volta à tela Instagram Feeds »Todos os feeds .

Para criar um feed do Instagram personalizado, basta marcar a caixa ao lado da conta do Instagram que você deseja usar. Em seguida, clique em ‘Avançar’.

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

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 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 principais.

Para alterar o layout, basta clicar em ‘Layout de feed’ 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.

Ao clicar nas diferentes opções, a visualização ao vivo será atualizada automaticamente para mostrar o novo layout. Isso torna mais fácil experimentar designs diferentes e encontrar o 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 a aparência do feed do Instagram em computadores desktop, tablets e smartphones usando a linha de botões no canto superior direito.

Smartphones e tablets normalmente têm telas menores e menos poder de processamento, então você pode querer 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 no celular.

Deseja usar um número diferente de colunas? Em seguida, 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 bem em dispositivos móveis, é uma boa ideia visualizar a versão móvel do seu site WordPress.

Depois de fazer as 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 WordPress, mas também possui temas ‘Claro’ e ‘Escuro’ que você pode querer usar para o seu feed do Instagram.

Você pode até criar seu próprio esquema de cores selecionando ‘Personalizado’ e usando as configurações para alterar a cor do link, a cor de fundo, a cor do texto no WordPress e muito mais.

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

Para alterar a aparência desta seção, retorne à tela de configurações principal 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 a foto do seu 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 upload de uma nova foto.

Você também pode adicionar uma biografia diferente. Por exemplo, você pode adicionar uma frase de chamariz 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 ‘Postagens’.

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

Para fazer isso, selecione 'Estilo de 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 de caixa e aumentar o raio da borda para criar cantos curvos.

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

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

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 as imagens do Instagram 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 na lista.

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

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

Se você adicionar legendas do Instagram ao seu feed, poderá alterar o tamanho e a cor do texto e definir um comprimento máximo do texto.

Feito isso, basta clicar no link ‘Postagens’ 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 no Instagram obtiverem um bom engajamento, esses números podem encorajar as pessoas a visitar sua página do Instagram ou começar a segui-lo nas redes sociais.

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

A opção final é ‘Hover State’, 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 mostra quando alguém passa o mouse sobre uma postagem usando as configurações em ‘Informações a serem exibidas’.

Você também pode alterar a cor da sobreposição instantânea.

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

Isso o leva de volta à página principal de configurações do Smash Balloon, onde você pode clicar no botão ‘Carregar mais’.

Aqui, você pode ajudar o botão ‘Carregar mais’ a se destacar alterando sua cor de fundo, cor do texto e estado de foco.

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 visitarem seu Instagram, limitando o número de fotos que elas podem ver em seu site.

Para remover o botão, basta desligar o controle deslizante ‘Ativar’ para que 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.

Por ser um botão tão importante, você pode adicionar um estilo personalizado 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 foco e a cor do texto.

Por padrão, o botão mostra o rótulo ‘Seguir no Instagram’.

Você pode substituir isso por sua própria mensagem digitando no campo ‘Texto’.

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 esse 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 mostrará na lightbox.

Se não quiser usar o recurso lightbox, você pode 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.

Mostrando 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 código de acesso.

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 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 postagem, você pode usar o bloco Instagram Feed.

Basta abrir a página ou postagem onde 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 direito aparecer, clique para adicioná-lo à página ou postagem.

O bloco mostrará um dos seus feeds do Instagram por padrão. Se você quiser mostrar um feed diferente do Smash Balloon, encontre 'Configurações de código de acesso' no menu à direita.

Aqui, basta adicionar o código de acesso 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 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 rodapé do tema WordPress.

Para adicionar o widget 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 certo.

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

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

O widget mostrará 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 de shortcode’.

Depois disso, clique em ‘Aplicar alterações’.

Agora você pode ativar o widget clicando no botão ‘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, postagem ou área pronta para widget usando um shortcode.

Basta ir para Instagram Feed »Todos os Feeds e copiar o código na coluna ‘Shortcode’. Agora você pode adicionar este código a qualquer bloco Shortcode. Para obter ajuda para colocar o shortcode, consulte nosso guia sobre como adicionar um shortcode.

Você está usando um tema habilitado para bloqueio? Depois, você pode usar o editor completo do site 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 completo do site mostrará 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 o seu tema WordPress.

Basta clicar no modelo onde deseja mostrar 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.

Depois de escolher um modelo, basta passar o mouse sobre a área onde 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 direito aparecer, clique para adicioná-lo ao modelo.

Como sempre, o Smash Balloon mostrará 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 pelo Instagram

Se você tem uma loja online, também pode usar seu feed personalizado do Instagram para vender seus produtos com facilidade.

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 pelas páginas de seus produtos. Isso pode aumentar as vendas e aumentar 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 ver nossa comparação dos melhores plug-ins de brindes do WordPress para aumentar seu número de seguidores sociais e aprender como criar um boletim informativo por e-mail.

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