Como Incorporar Facilmente o Instagram no WordPress (Passo a Passo)

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.

Como incorporar facilmente 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.

Um exemplo de um feed do Instagram incorporado, criado usando Feeds for Instagram

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

Como criar um novo feed do Instagram no WordPress

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

Como adicionar uma linha do tempo do Instagram à sua conta do WordPress

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

Adicionando uma conta do Instagram como fonte do Smash Balloon

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.

Adicionando uma conta pessoal ou comercial do Instagram ao WordPress

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

Escolha uma conta do Instagram para usar com o Smash Balloon

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

Como adicionar uma página do Facebook ao seu site WordPress

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

Como alterar as permissões do Instagram com o Smash Balloon

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

Escolhendo uma conta do Instagram para adicionar ao seu site WordPress

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

Como criar um feed do Instagram usando o Smash Balloon

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.

O editor do Instagram Smash Balloon

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.

Alterando o layout de um feed do Instagram no WordPress

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.

Visualizando como o layout do feed do Instagram aparece em smartphones e dispositivos móveis

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

Exibindo um número diferente de posts no desktop e no mobile

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

Exibindo um número diferente de colunas do Instagram no desktop, smartphone e tablet

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

Configurações de esquema de cores do Smash Balloon

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.

Alterando o esquema de colunas do Instagram usando o Smash Balloon

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.

Personalize o cabeçalho do Instagram no seu site WordPress

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

Adicionando um avatar personalizado a um embed do Instagram no WordPress

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

Adicionando uma bio personalizada do Instagram ao seu site WordPress

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

Alterando a resolução de fotos e vídeos incorporados do Instagram

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.

Como detectar automaticamente a resolução do seu feed do Instagram

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

Personalize o botão Carregar Mais do Instagram no WordPress

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

Adicionando mensagens personalizadas ao botão Carregar Mais

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.

Como incorporar facilmente o Instagram no WordPress

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.

Personalizando o botão Seguir nas redes sociais

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

Personalizando o botão Siga-nos no Instagram

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.

Obtendo o código para um feed personalizado do Instagram

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 Feeds for Instagram

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

Adicionando o shortcode do Instagram a uma página ou postagem

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 '+'.

Adicionando um feed do Instagram a um widget do WordPress

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.

Como adicionar um Feed do Instagram a uma área pronta para widgets

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

Adicionando um feed do Instagram a uma área pronta para widgets

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.

Abrindo o editor de site completo (FSE)

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

Escolhendo um modelo ou parte de modelo no editor de site completo (FSE)

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.

Escolhendo um modelo do WordPress no editor de site completo

O WordPress agora mostrará uma prévia do design.

Para editar este modelo, vá em frente e clique no pequeno ícone de lápis.

Adicionando um feed do Instagram ao WordPress usando o editor de site completo (FSE)

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 '+'.

Como adicionar um bloco do Instagram usando o editor de site completo e um tema habilitado para blocos

Depois disso, comece a digitar ‘Instagram Feed.’

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

Adicionando um feed de mídia social usando o editor de site completo do WordPress (FSE)

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.

Como verificar se você tem uma conta pessoal ou comercial do Instagram

Depois disso, selecione ‘Configurações.’

Se você não tiver uma conta comercial, esta tela mostrará ‘Mudar para conta profissional’ no menu esquerdo.

Como mudar para uma conta pessoal do Instagram

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

Como conectar Facebook e Instagram

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

Dando ao Smash Balloon acesso à sua conta do Instagram

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

Como configurar suas permissões do Instagram usando o Smash Balloon

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

Fazendo login na sua conta do Instagram

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.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

18 CommentsLeave a Reply

  1. 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?

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

  3. 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?

  4. Or you can simply wait for WordPress 3.5, which will ship with oEmbed support for SoundCloud, Instagram and SlideShare :)

Deixe um comentário

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.