Como exibir fotos do Instagram no widget da barra lateral do WordPress

Você quer exibir suas fotos do Instagram na barra lateral do WordPress?

As postagens do Instagram podem ser um ótimo conteúdo para o seu site. Ao criar um feed do Instagram, você pode manter seu site atualizado e interessante, ao mesmo tempo em que promove sua conta do Instagram.

Neste artigo, mostraremos como exibir suas fotos e vídeos do Instagram no widget da barra lateral do WordPress.

Por que adicionar um feed do Instagram ao 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, serviços e postagens de blog.

Dependendo do seu setor, o Instagram pode até ser o melhor lugar para promover seu site. Por exemplo, o Instagram é particularmente popular entre principais blogs de moda, culinária, estilo de vida e sites de fotografia.

No entanto, as pessoas não verão suas postagens do Instagram se visitarem apenas seu site WordPress. Isso pode dificultar o crescimento de seus seguidores no Instagram e o engajamento em suas fotos e vídeos.

Dito isso, é uma boa ideia adicionar um feed do Instagram ao seu site WordPress. Isso gerará mais tráfego para sua página do Instagram e incentivará os visitantes a interagir com suas postagens, deixando comentários, clicando no botão ‘Compartilhar’ e muito mais.

Dito isso, vamos ver como exibir facilmente fotos do Instagram no widget da barra lateral do WordPress.

Como Instalar um Plugin de Fotos do Instagram

A melhor maneira de exibir fotos do Instagram em uma barra lateral ou widget semelhante do WordPress é usando o Smash Balloon Social Photo Feed. Este plugin gratuito permite que você mostre fotos de uma ou mais contas do Instagram em um feed totalmente personalizável.

Após criar um feed, você pode adicioná-lo à barra lateral usando um shortcode ou um bloco.

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 incorporar um feed do Instagram. No entanto, também existe uma versão Pro que permite exibir feeds de hashtags, adicionar imagens compráveis do Instagram no WordPress e muito mais.

Antes de começar, você precisará conectar sua conta do Instagram a uma página do Facebook. Se você tem uma conta pessoal do Instagram, talvez queira transformá-la em uma conta comercial, pois isso permite que o Smash Balloon exiba automaticamente sua biografia e cabeçalho do Instagram.

Para instruções passo a passo sobre como fazer ambas as coisas, confira nossa seção de Perguntas Frequentes (FAQ) no final do post.

Quando estiver pronto, prossiga e instale e ative o plugin Smash Balloon Social Photo Feed. Para mais detalhes, veja nosso guia sobre como instalar um plugin do WordPress.

Como Conectar uma Conta do Instagram ao WordPress

Após ativar o plugin, é hora de 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 um mural social combinando conteúdo de vários sites diferentes.

Por exemplo, você pode mostrar os vídeos mais recentes do seu canal do YouTube, seus Tweets recentes, um feed de grupo do Facebook e muito mais.

Como estamos usando o plugin gratuito Smash Balloon, basta selecionar ‘User Timeline’ e, em seguida, clicar em ‘Next.’

Depois disso, você precisará escolher a conta do Instagram que usará para criar um feed de fotos personalizado do Instagram no WordPress.

Para começar, clique em ‘Add Source.’

Na próxima tela, escolha se deseja exibir fotos de uma conta pessoal ou comercial do Instagram.

Se você marcar a caixa ao lado de ‘Personal,’ o Smash Balloon não incluirá o avatar e a biografia do Instagram no seu cabeçalho por padrão. No entanto, você sempre pode adicionar o avatar e a biografia manualmente nas configurações do plugin.

Após escolher ‘Personal’ ou ‘Business,’ prossiga e clique em ‘Login with Facebook.’

Agora você pode verificar a conta do Instagram que deseja usar e clicar em ‘Next.’

Depois disso, marque a caixa ao lado da página do Facebook vinculada à sua conta do Instagram.

Com isso feito, prossiga e clique em ‘Next.’

O Smash Balloon agora mostrará um pop-up listando todas as informações às quais terá acesso e as ações que pode realizar.

Para restringir o acesso do Smash Balloon à sua conta do Instagram, clique em qualquer um dos interruptores para mudá-lo de 'Sim' para 'Não'. Apenas esteja ciente de que isso pode afetar as fotos e vídeos que você pode incorporar em seu blog WordPress ou site.

Dito isso, recomendamos deixar todos os interruptores ativados.

Quando estiver pronto, clique em 'Concluído'.

Agora você verá um pop-up com a conta do Instagram que você acabou de vincular ao WordPress.

Simplesmente marque a caixa ao lado da conta e clique em 'Adicionar'.

O Smash Balloon o levará de volta para Feeds do Instagram » Todos os Feeds automaticamente.

Para criar um feed de mídia social, simplesmente marque a caixa ao lado da sua conta do Instagram. Em seguida, clique em 'Próximo'.

O plugin agora criará um feed de fotos do Instagram para o seu site e o abrirá no editor do Smash Balloon.

Como Personalizar Seu Feed de Fotos do Instagram

Você pode usar o editor para ajustar como as fotos do Instagram aparecem em seu site.

À 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 do feed e adicionar preenchimento selecionando 'Layout do Feed' no menu esquerdo. À medida que você faz alterações, a prévia será atualizada automaticamente, para que você possa experimentar diferentes configurações para ver o que funciona melhor para o seu feed de fotos do Instagram.

Por padrão, o Smash Balloon mostra o mesmo número de posts em computadores desktop e dispositivos móveis.

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. Ao testar diferentes layouts, você pode criar um feed do Instagram que fique ótimo, não importa qual dispositivo o visitante esteja usando.

Smartphones e tablets geralmente têm telas menores e menos poder de processamento, então você pode querer mostrar menos fotos e vídeos em dispositivos móveis.

Para fazer isso, basta digitar um número diferente no campo 'Mobile' em 'Number of Posts'.

Por padrão, o feed do Facebook 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.

Após testar a versão mobile do seu site WordPress, você pode ficar insatisfeito com a aparência das colunas em smartphones e tablets. Se for o caso, você pode exibir menos colunas alterando os números na seção 'Colunas'.

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

Isso o levará de volta ao editor principal do Smash Balloon, onde você poderá explorar a próxima tela de configurações, que é 'Color Scheme'.

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

Outra opção é criar seu próprio esquema de cores selecionando 'Personalizado' e, em seguida, usando os controles para alterar a cor de fundo, a cor do botão, alterar a cor do texto e muito mais.

Por padrão, o Smash Balloon adiciona um cabeçalho ao seu feed, que é a foto do seu perfil do Instagram e o nome da sua página. Isso pode adicionar um contexto extra, em vez de simplesmente incorporar o Instagram no WordPress sem explicação.

Para alterar a aparência desta seção, clique em ‘Header’ no menu à esquerda.

Nesta tela, você pode alterar o tamanho e a cor do cabeçalho e mostrar ou ocultar sua biografia do Instagram.

Às vezes, você pode querer mostrar uma foto de perfil diferente. Por exemplo, seu avatar do Instagram pode não combinar com seu tema do WordPress.

Para fazer isso, basta clicar 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 do seu computador.

Da mesma forma, você pode mostrar uma biografia diferente. Por exemplo, você pode querer apresentar seu feed do Instagram ou incentivar as pessoas a segui-lo para obter mais conteúdo.

Para substituir a biografia do Instagram, basta digitá-la na caixa 'Adicionar biografia personalizada'.

O Smash Balloon analisa automaticamente suas fotos do Instagram e as exibe na melhor resolução. Embora as configurações padrão devam ser adequadas para a maioria dos sites, é possível aumentar ou diminuir o tamanho das imagens.

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 miniatura, médio e tamanho completo usando o menu suspenso. Para mais informações sobre este tópico, consulte nosso guia para iniciantes sobre tamanhos de imagem do WordPress.

Se você não estiver satisfeito com os resultados, poderá retornar a esta tela a qualquer momento e selecionar ‘Autodetectar (Recomendado)’ no menu suspenso.

Por padrão, o Smash Balloon adiciona um botão ‘Carregar Mais’ na parte inferior do seu feed do Instagram, o que permite aos visitantes percorrer mais de suas fotos e vídeos.

Como é um botão tão importante, você pode querer personalizá-lo selecionando a opção ‘Botão Carregar Mais’ no menu à esquerda.

Aqui, você pode ajudar o ‘Carregar Mais’ a se destacar alterando a cor de fundo, a cor do texto e o estado de hover.

Você também pode alterar o rótulo do botão digitando no campo ‘Texto’.

Outra opção é remover o botão completamente clicando no alternador ‘Ativar’. Dessa forma, você pode incentivar as pessoas a visitar seu Instagram limitando o número de posts que elas podem ver em seu site.

Se os visitantes gostarem do que virem, eles podem decidir segui-lo no Instagram usando o botão ‘Seguir no Instagram’ que o Smash Balloon adiciona automaticamente.

Com isso em mente, você pode querer ajudar o botão a se destacar selecionando ‘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 tem um rótulo geral de ‘Seguir no Instagram’.

Você pode substituir isso por sua própria mensagem 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 widget da barra lateral do seu WordPress.

Como Adicionar Suas Fotos do Instagram no Widget da Barra Lateral do WordPress

Agora você pode adicionar o feed do Instagram à barra lateral ou a uma seção semelhante usando o bloco Feed do Instagram.

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

Simplesmente vá para Instagram » Todos os Feeds e copie o valor na coluna ‘Shortcode’. Na imagem a seguir, precisaremos usar instagram-feed feed=1.

Com isso feito, vá para Aparência » Widgets no painel do WordPress.

Em seguida, clique no botão azul ‘+’.

Na barra de pesquisa, digite ‘Instagram Feed’ e selecione o widget correto quando ele aparecer.

O WordPress tem um widget de Instagram 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, como a barra lateral ou uma seção semelhante.

O widget exibirá automaticamente um dos feeds que você criou usando o Smash Balloon.

Para exibir um feed diferente, basta digitar o shortcode do feed na caixa ‘Configurações de Shortcode’ e, em seguida, clicar em ‘Aplicar Alterações’.

Agora você pode clicar no botão 'Atualizar' para tornar o widget ativo. Para mais informações, consulte nosso guia passo a passo sobre como adicionar e usar widgets no WordPress.

Se você estiver usando um tema habilitado para blocos, poderá adicionar um feed do Instagram à barra lateral usando o editor de site completo. Para começar, basta ir em Aparência » Editor.

No editor, clique para selecionar a seção da barra lateral e, em seguida, clique no botão ‘+’.

Você pode então começar a digitar ‘Instagram Feed’ e selecionar o bloco correto quando ele aparecer.

Por padrão, o editor de site completo exibirá um dos feeds do Instagram que você criou usando o Smash Balloon. Para exibir um feed diferente, basta adicionar o shortcode seguindo o mesmo processo descrito acima.

Quando você estiver satisfeito com a aparência do feed do Instagram, clique em ‘Salvar’.

Como Exibir uma Foto Específica do Instagram no WordPress

Às vezes, você pode querer exibir uma postagem específica do Instagram em seu site. Esta pode ser sua foto mais popular, uma postagem perene ou até mesmo um concurso de mídia social que você está executando no momento.

No passado, você podia facilmente incorporar uma postagem do Instagram no WordPress usando um protocolo conhecido como oEmbed. No entanto, o Facebook mudou a forma como o oEmbed funciona, então você não pode mais incorporar facilmente fotos do Instagram no WordPress.

A boa notícia é que o Smash Balloon pode corrigir o problema de oEmbed do Facebook e Instagram. Isso permite que você incorpore facilmente uma postagem específica do Instagram em qualquer página, postagem ou área pronta para widgets, como a barra lateral. Você também pode facilmente criar um feed personalizado do Facebook no WordPress.

Para habilitar este recurso, basta ir para Instagram Feed » oEmbeds. Você pode então clicar no botão 'Habilitar' ao lado de 'Instagram'.

Depois disso, vá para Aparência » Widgets e clique no botão azul '+'.

Na barra de pesquisa, digite 'Embed' para encontrar o bloco correto.

Quando o bloco 'Embed' aparecer, arraste-o para a área onde você deseja exibir a foto.

No campo 'Embed', simplesmente cole o URL da postagem do Instagram que você deseja exibir em seu site. Em seguida, clique em 'Embed'.

O WordPress agora exibirá a postagem específica do Instagram.

Se você estiver satisfeito com a aparência, clique em 'Atualizar' para publicá-la.

Agora, se você visitar seu site, verá a postagem do Instagram publicada.

Se você estiver usando um tema habilitado para blocos, precisará adicionar postagens específicas do Instagram usando o editor de site completo.

Para fazer isso, basta habilitar o recurso oEmbed do Smash Balloon e obter o URL da postagem do Instagram seguindo o mesmo processo descrito acima.

Depois disso, abra o editor de site completo navegando em Aparência » Editor no painel do WordPress. Assim que estiver dentro do editor de site completo, clique no botão '+' na seção da barra lateral e digite 'Incorporar'.

Quando o bloco correto aparecer, clique para adicioná-lo à barra lateral.

Você pode então adicionar a URL da postagem que deseja incorporar e clicar no botão 'Incorporar'.

O editor de site completo agora mostrará a postagem do Instagram.

Se você estiver satisfeito com a aparência, clique em 'Salvar' para publicar esta foto ou vídeo na barra lateral habilitada para blocos.

Perguntas Frequentes Sobre a Exibição de Posts do Instagram no WordPress

O Smash Balloon facilita a criação de um feed personalizado do Instagram ou até mesmo a exibição de posts específicos do Instagram em seu site WordPress.

Dito isso, aqui estão algumas das perguntas mais frequentes sobre como exibir posts do Instagram no WordPress.

Como Crio uma Conta Comercial no Instagram?

O Smash Balloon 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. Em vez disso, você precisará adicionar o avatar e a biografia manualmente nas configurações do plugin.

Com isso em mente, você pode querer verificar se tem uma conta pessoal ou comercial e, em seguida, mudar para uma conta comercial, se necessário.

Para fazer isso, basta visitar sua conta do Instagram e clicar no ícone de linhas no menu lateral.

Depois disso, clique em 'Configurações'.

Se você não tiver uma conta comercial, o menu à esquerda mostrará 'Mudar para conta profissional'.

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 exibir fotos do Instagram no 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 de fazer isso, clique em 'Contas vinculadas'.

Agora você pode selecionar 'Instagram' e clicar no botão 'Conectar'.

O Facebook agora mostrará todas as ações que ele pode realizar e as informações às quais pode acessar.

Se você estiver satisfeito com isso, clique no botão 'Conectar'.

Apenas esteja ciente de que as pessoas que gerenciam sua página do Facebook podem ser capazes de ver suas mensagens do Instagram e responder a elas. Se você quiser manter suas mensagens privadas, clique para desativar a opção.

Quando estiver pronto para ir para a próxima tela, clique em 'Confirmar'.

Isso abre um pop-up onde você pode digitar seu nome de usuário ou endereço de e-mail e senha.

Depois disso, clique no botão ‘Entrar’.

Após alguns momentos, você verá uma mensagem dizendo que suas contas do Instagram e Facebook estão agora conectadas.

Como Exibir Imagens do Instagram no WordPress?

No passado, você podia incorporar facilmente imagens do Instagram no WordPress usando um protocolo conhecido como oEmbed.

No entanto, o Facebook mudou a forma como o oEmbed funciona, então você não pode mais incorporar facilmente imagens do Instagram no WordPress.

Em vez disso, agora você precisa registrar um aplicativo e usar um token de cliente para obter dados da API Graph do Facebook antes de poder incorporar conteúdo do Instagram no WordPress.

Felizmente, é fácil corrigir o problema de oEmbed do Instagram no WordPress usando o plugin Smash Balloon Social Photo Feed. Você pode então incorporar fotos específicas do Instagram em seu site.

Você pode até adicionar fotos do Instagram a áreas prontas para widgets, como o rodapé do seu site WordPress, o cabeçalho, a barra lateral e muito mais. Isso permite que você mostre facilmente a mesma imagem em todo o seu site.

Esperamos que este artigo tenha ajudado você a aprender como exibir fotos do Instagram em um widget de barra lateral do WordPress. Você também pode querer ver nosso guia sobre como incorporar um vídeo do Facebook no WordPress ou nossas escolhas de especialistas para os melhores plugins de prova social para WordPress e WooCommerce.

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.