Como adicionar imagens compráveis ​​do Instagram no WordPress

Publicados: 2023-02-05


Deseja adicionar imagens do Instagram que podem ser compradas ao seu site WordPress?

As imagens compráveis ​​do Instagram têm links nos quais as pessoas podem clicar facilmente para comprar seus produtos. Essa é uma maneira poderosa de mostrar seus produtos e gerar mais vendas no Instagram.

Neste artigo, mostraremos como adicionar facilmente imagens de compra do Instagram no WordPress.

How to add Instagram shoppable images in WordPress

O que é o Instagram Shopping?

As compras no Instagram permitem que você marque produtos em suas fotos do Instagram.

Depois de marcar um ou mais produtos, os usuários que estiverem visualizando a postagem verão um ícone 'Visualizar produtos' no canto inferior esquerdo.

A shoppable Instagram post

Eles podem simplesmente clicar nesse ícone para ver o nome, a descrição e o preço do produto.

Isso torna mais fácil para os compradores aprenderem mais sobre os produtos apresentados em suas postagens de mídia social.

Products in a shoppable Instagram post

Os visitantes podem tocar na tela novamente para acessar sua loja do Instagram, onde podem comprar o produto apresentado na postagem da mídia social.

Esta é uma ótima experiência do usuário, mas não é fácil de configurar.

Você precisará obter a aprovação do Instagram para usar seus recursos de compras, e alguns desses requisitos são vagos. Por exemplo, você precisará “demonstrar confiabilidade, inclusive por meio de uma presença autêntica e estabelecida”. Você também precisará manter uma “base de seguidores suficiente”.

Além disso, você terá que configurar um catálogo do Facebook, um catálogo de produtos e uma página comercial do Facebook.

Em outras palavras: é muito.

Por causa disso, muitos usuários do Instagram estão procurando uma maneira mais fácil de ajudar os compradores a comprar produtos. É aí que entram as imagens compráveis ​​do Instagram.

Por que adicionar imagens compráveis ​​do Instagram no WordPress?

Um feed do Instagram para compras é uma série de fotos com um link para um produto ou serviço em seu site. Essas URLs não são clicáveis ​​quando visualizadas no Instagram, como você pode ver na imagem a seguir.

Adding a shoppable link to an Instagram post

No entanto, quando você incorpora o feed de compra em seu site WordPress, esses links se tornam clicáveis. Dessa forma, um feed de compras do Instagram incentiva as pessoas que visitam seu site a procurar produtos específicos.

Quaisquer curtidas e comentários que você receber nessas postagens também podem funcionar como prova social e incentivar as pessoas a clicar no link do produto.

À medida que você publica novas imagens compráveis ​​no Instagram, elas aparecem em seu site automaticamente, para que os visitantes sempre vejam as postagens mais recentes sem que você precise adicioná-las manualmente.

Se os visitantes gostarem do que veem, podem até decidir seguir você no Instagram. Isso pode gerar mais seguidores e oferece outra maneira de promover diretamente para essa pessoa.

Melhor ainda, como esses links de compra aparecem em seu site, você tem controle total sobre eles. Isso significa que você não precisa seguir as rígidas políticas de compras do Instagram ou configurar um catálogo de produtos do Facebook.

Com isso dito, vamos ver como você pode adicionar facilmente imagens de compra do Instagram ao seu site WordPress usando o Smash Balloon Instagram Pro.

Criando um feed para compras no Instagram

Primeiro, você precisa fazer o upload das imagens que deseja usar em sua conta do Instagram.

O Smash Balloon possui um recurso de compra que permite vincular cada imagem a um URL nas configurações do plug-in. Com esse recurso ativado, os visitantes podem clicar em uma imagem de compra em seu site e o link será aberto em uma nova guia.

Esses links não aparecerão no Instagram.

Outra opção é adicionar o link às suas legendas do Instagram. Esses links aparecerão no Instagram, mas não serão clicáveis.

Smash Balloon's lightbox popup

No entanto, esses links serão clicáveis ​​em seu site WordPress. Se você quiser usar esse método, precisará gastar algum tempo adicionando um URL a cada imagem comprável em sua conta do Instagram.

Se você planeja usar o recurso de compra do Smash Balloon, pode pular esta etapa, pois adicionaremos cada link nas configurações do plug-in.

Como instalar um plug-in de fotos do Instagram com suporte para compras

A melhor maneira de adicionar imagens compráveis ​​do Instagram no WordPress é usando o Smash Balloon Instagram Pro.

A shoppable Instagram feed, created using Smash Balloon

Neste guia, usaremos a versão premium do Smash Balloon, pois possui os recursos avançados necessários para adicionar imagens compráveis ​​no WordPress. No entanto, também existe uma versão gratuita que permite incorporar o Instagram no WordPress.

Antes de começar, você precisará conectar sua conta do Instagram a uma página do Facebook. Se você tiver uma conta pessoal no Instagram, também pode transformá-la em uma conta comercial, pois isso permite que o Smash Balloon mostre sua biografia e cabeçalho do Instagram automaticamente.

Quando estiver pronto, instale e ative o plug-in Smash Balloon Instagram Pro. Para obter mais detalhes, consulte nosso guia sobre como instalar um plug-in do WordPress.

Após a ativação, vá para Instagram Feed »Configurações e insira sua chave de licença no campo 'Chave de licença'.

Activating the Instagram Feed Pro plugin for WordPress

Você encontrará essas informações em sua conta no site Smash Balloon.

Depois de inserir a chave, clique no botão 'Ativar'.

Como conectar uma conta do Instagram ao WordPress

Depois de ativar o plug-in, sua primeira tarefa é conectar sua conta do Instagram ao WordPress. Basta acessar o feed do Instagram »Configurações e clicar em 'Adicionar novo'.

How to create a new shoppable Instagram feed

Com o Instagram Feed pro, você pode criar feeds de postagens marcadas e hashtags, ou até mesmo criar um mural social com conteúdo de vários sites de mídia social diferentes.

Queremos mostrar imagens que podem ser compradas em nossa linha do tempo do Instagram, então simplesmente selecione 'Linha do tempo do usuário' e clique em 'Avançar'.

Creating a shoppable Instagram feed in WordPress

Agora, escolha a conta do Instagram de onde você obterá as imagens para compra.

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

Adding a source for a shoppable Instagram feed

Depois disso, escolha se deseja mostrar imagens compráveis ​​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 manualmente nas configurações do plug-in.

Linking a persona or business Instagram account to WordPress

Depois de escolher 'Pessoal' ou 'Comercial', clique em 'Login com o Facebook'.

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

Selecting the shoppable Instagram source

Depois disso, marque a caixa ao lado da página do Facebook vinculada à conta do Instagram com suas imagens para compra.

Feito isso, clique no botão 'Avançar'.

Selecting the Facebook page you want to use

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 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 você pode mostrar 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'.

Changing the information that Smash Balloon can access

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

Adding a shoppable image source to a WordPress website

O Instagram Feed Pro agora o levará de volta à tela Feeds do Instagram »Todos os feeds .

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

How to create a shoppable Instagram feed

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.

No entanto, antes de poder mostrar imagens compráveis, há algumas configurações extras a serem definidas.

Como ativar o recurso de compra do Smash Balloon (opcional)

Como já mencionamos, existem duas maneiras de tornar seu feed de fotos do Instagram comercializável. Se você adicionou os URLs às suas legendas no Instagram, simplesmente pule para a próxima etapa.

Outra opção é abrir links de compra em uma nova guia assim que o visitante clicar em uma postagem. Para fazer isso, você precisará habilitar o recurso de compra do Smash Balloon.

Para começar, selecione a guia 'Configurações' e clique em 'Feed com opção de compra'.

How to create a shoppable Instagram feed for your online store

Nesta tela, vá em frente e alterne o controle deslizante 'Ativar' para que fique azul.

O Smash Balloon agora mostrará um botão 'Adicionar' em todas as fotos ou vídeos no seu feed do Instagram.

How to add shoppable links to a WooCommerce site or e-commerce store

Basta encontrar a primeira postagem que deseja tornar disponível para compra e clicar no botão 'Adicionar'.

Agora você pode digitar o URL do produto ou serviço no campo 'Link do produto' e clicar em 'Adicionar'.

How to add a shoppable link to an Instagram post

Agora, clicar nesta foto abrirá o URL vinculado em uma nova guia.

Basta repetir essas etapas para tornar cada imagem comprável.

Se você precisar alterar a URL de uma postagem a qualquer momento, basta passar o mouse sobre ela e clicar em 'Atualizar'.

Changing the shoppable links in an Instagram feed

Depois de adicionar todos os seus links, não se esqueça de clicar no botão 'Salvar'.

Como filtrar seu feed do Instagram para compras

Por padrão, o Smash Balloon mostra todas as imagens e vídeos da sua conta do Instagram. No entanto, como estamos criando um feed de compras, convém filtrar suas postagens e mostrar apenas as fotos vinculadas a um produto ou serviço.

Isso pode ajudar os compradores a encontrar produtos para comprar, sem se distrair com outras fotos e vídeos em seu feed do Instagram.

Com o Smash Balloon, é fácil filtrar postagens do Instagram com base em suas legendas. Você pode simplesmente adicionar uma palavra-chave ou hashtag às suas imagens de compra no Instagram e, em seguida, criar um filtro correspondente no Smash Balloon.

Por exemplo, na imagem a seguir, estamos usando a hashtag #ordernow para todas as imagens que queremos tornar compráveis.

Filtering a shoppable Instagram feed by hashtag

Para criar um filtro no Smash Balloon, selecione a guia 'Configurações'.

Em seguida, vá em frente e clique em 'Filtros e moderação'.

Filtering shoppable Instagram photos and videos using a hashtag

Na caixa 'Mostrar apenas postagens contendo', digite as hashtags ou palavras-chave que deseja usar no filtro.

Se você quiser usar várias palavras no filtro, basta separar cada hashtag ou palavra-chave com uma vírgula.

Adding a filter to a shoppable Instagram feed

Quando estiver satisfeito com a configuração do filtro, clique no botão 'Salvar'.

Esteja ciente de que a visualização não será atualizada imediatamente, então você precisará atualizar a página para ver o filtro em ação.

A filtered shoppable Instagram feed

Como personalizar seu feed do Instagram para compras

Quando estiver satisfeito com as fotos e vídeos que aparecem em seu feed de compras, você pode querer alterar a aparência do feed.

Para personalizar seu feed do Instagram para compras, basta clicar na guia 'Personalizar'. No lado esquerdo estão todas as configurações que você pode usar para alterar a aparência do feed de compras.

How to customize your shoppable Instagram feed

A maioria dessas configurações é autoexplicativa, mas abordaremos rapidamente algumas áreas importantes que podem ajudá-lo a obter mais vendas.

Vamos começar no topo, selecionando 'Feed Layout'. Aqui, você pode escolher diferentes layouts para seu feed de compra, como carrossel e destaque.

Adding Instagram shoppable images to WordPress

À medida que você faz alterações, a visualização é atualizada automaticamente para que você possa experimentar diferentes configurações para ver qual fica melhor.

Dependendo do layout, você obterá algumas configurações extras que podem ser usadas para ajustar seu feed. Por exemplo, se você escolher 'Destacar', poderá dizer ao Smash Balloon para destacar as postagens com base em um padrão, ID da postagem ou uma hashtag específica. Isso é ótimo para destacar seus produtos mais populares.

Showing Instagram shoppable images in a highlighted layout with Smash Balloon

Até 2025, estima-se que os consumidores americanos gastarão US$ 710 bilhões todos os anos fazendo compras em seus dispositivos móveis. Com isso em mente, você deve garantir que o feed do Instagram para compras seja tão bom em smartphones e tablets quanto em computadores.

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

Você pode visualizar a aparência do feed de compra em computadores desktop, tablets e smartphones usando a linha de botões no canto superior direito.

Creating a mobile-friendly layout for an e-Commerce site

Você pode mostrar menos fotos para compra em dispositivos móveis alterando as configurações nas seções 'Número de postagens' e 'Colunas'.

Depois de fazer qualquer alteração, clique no link 'Personalizar'. Isso o levará de volta ao editor principal do Smash Balloon, pronto para você explorar a próxima opção, que é 'Esquema de cores'.

Changing the color scheme of a shoppable Instagram feed

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

Outra opção é criar seu próprio esquema de cores selecionando 'Personalizado'. Em seguida, basta usar os controles para alterar a cor do plano de fundo, alterar a cor do texto no WordPress e muito mais.

Changing the color scheme for your Instagram shoppable feed

Por padrão, o Smash Balloon adiciona um cabeçalho ao feed de compras, que é a foto do seu perfil e o nome da sua página.

Para alterar a aparência desta seção, clique em 'Cabeçalho' no menu à esquerda e use as configurações para alterar o tamanho do cabeçalho, adicionar o texto da biografia do Instagram e muito mais.

Customizing the header for an embedded Instagram feed

Você também pode adicionar uma biografia diferente. Por exemplo, você pode incentivar as pessoas a comprar seus produtos ou oferecer aos visitantes um código de cupom exclusivo.

Para obter mais informações sobre como criar esses códigos, consulte nossa escolha especializada dos melhores plug-ins de código de cupom do WordPress para sua loja online.

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

How to add Instagram shoppable images in WordPress

Feito isso, clique em 'Personalizar' para retornar ao editor principal do Smash Balloon.

Em seguida, selecione 'Postagens'.

How to customize individual Instagram posts in WordPress

Isso leva você a uma tela com algumas opções diferentes.

Você pode examinar essas configurações e fazer as alterações que desejar, mas vamos nos concentrar em 'Legenda'.

Customizing the Instagram captions

Se você adicionou links de compra às suas legendas, é importante destacar o texto. Por exemplo, você pode aumentar a legenda.

Você pode até usar uma cor diferente para a legenda.

Adding a style to a shoppable Instagram caption

Feito isso, clique em 'Posts' para voltar à tela anterior.

Aqui, você também verá a opção 'Hover State', que é a sobreposição que o Smash Balloon adiciona a uma postagem quando você passa o mouse sobre ela.

Adding a hover state to a shoppable Instagram feed

Isso permite que os visitantes vejam todos os links em suas legendas sem abrir a postagem do Instagram primeiro.

Nesta tela, você pode usar as configurações para criar uma sobreposição colorida atraente.

How to create a custom hover state for an Instagram photo and video feed

Depois de selecionar 'Hover State', você poderá alterar a cor de fundo e a cor do texto que aparece quando você passa o mouse sobre cada postagem.

Em 'Informações a serem exibidas', você verá todas as diferentes informações que o Smash Balloon pode mostrar como parte da sobreposição. Basta marcar a caixa ao lado de cada informação que você deseja mostrar.

Smash Balloon's hover state settings

Se a legenda contiver links de compra, certifique-se de deixar a opção "Legenda" ativada.

Quando estiver satisfeito com as alterações, clique em 'Personalizar' para retornar à tela principal do editor do Smash Balloon. Agora você pode selecionar a próxima opção, que é 'Botão Carregar Mais'.

Smash Ballon's Load More button settings

Por padrão, o Smash Balloon adiciona um botão 'Carregar mais' na parte inferior do seu feed do Instagram para que os visitantes possam percorrer suas postagens de compra.

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

Você também pode adicionar sua própria mensagem ao botão digitando no campo 'Texto'.

How to add a load more button to a shoppable Instagram feed

Embora recomendemos deixar o botão 'Carregar mais' ativado para obter mais vendas, você pode removê-lo. Por exemplo, você pode incentivar as pessoas a visitarem sua página do Instagram limitando o número de fotos que podem ver em seu site.

Para remover o botão, basta clicar no controle deslizante 'Ativar' para transformá-lo de azul em cinza.

How to remove the Load More button from a social media photo feed in WordPress

Se os compradores gostarem do que virem, eles podem decidir seguir você no Instagram usando o botão 'Seguir no Instagram' que aparece abaixo do feed de compras.

Como é um botão tão importante, você pode querer ajudá-lo a se destacar selecionando 'Follow Button' na tela principal do editor do Smash Balloon.

Adding a follow button to a shoppable Instagram feed

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

Você também pode substituir o texto padrão 'Seguir no Instagram' por suas próprias mensagens.

How to get more followers with a Follow button

Como sempre, quando terminar essas configurações, clique em 'Personalizar' para retornar à tela principal do editor.

Se você ativou o recurso de compra do Smash Balloon, clicar em qualquer postagem no feed do Instagram abrirá uma nova guia e os levará direto para a página do produto vinculado.

No entanto, se você não ativou o recurso de compra, talvez queira dar uma olhada no recurso lightbox do Smash Balloon.

Esse recurso permite que os visitantes abram a imagem ou o vídeo em um pop-up lightbox, sem sair do site WordPress. Eles podem clicar em qualquer link de compra nas legendas.

Smash Ballon's Instagram lightbox popup

Para ativar ou desativar o lightbox, basta selecionar 'Lightbox' no menu à esquerda.

Aqui, você pode remover ou adicionar esse recurso usando o controle deslizante 'Ativar'.

How to enable or disable the Instagram lightbox popup

Você também pode alterar quantos comentários o Smash Balloon mostrará na lightbox. Muitos comentários positivos podem ser uma forma poderosa de prova social, que muitas vezes o ajudará a vender mais produtos e serviços.

No entanto, eles também podem ser uma distração, então você pode querer digitar um número máximo no 'Não. da caixa de comentários.

How to limit the number of comments in a shoppable Instagram feed

Outra opção é ocultar completamente os comentários, clicando na opção 'Comentários'.

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 de compra do Instagram ao seu site.

Como incorporar o feed do Instagram no WordPress

Você pode adicionar o feed de compra ao seu site usando um bloco, widget ou shortcode.

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

Para obter este código, vá para Instagram Feed »All Feeds e copie o valor na coluna 'Shortcode'.

The code for a shoppable Instagram feed

Se você deseja incorporar o feed do Instagram em uma página ou postagem, recomendamos o uso do bloco de feed do Instagram.

Basta abrir a página ou postar onde você deseja incorporar seu feed de fotos e vídeos para compras. Em seguida, clique no ícone '+' para adicionar um novo bloco e comece a digitar 'Instagram Feed'.

Quando o bloco certo aparecer, clique para adicioná-lo à página ou postagem.

The Instagram Feed WordPress block

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

Aqui, basta adicionar o shortcode e clicar em 'Aplicar alterações'.

Adding a shoppable Instagram feed to a page or post

O bloco agora mostrará todas as fotos e vídeos do seu feed do Instagram. Basta publicar ou atualizar a página para ativar o feed em seu site.

Outra opção é adicionar o feed a qualquer área pronta para widget, como a barra lateral ou seção semelhante. Isso permite que os visitantes comprem usando seu feed do Instagram em qualquer página do seu site.

Basta ir para Aparência » Widgets no painel do WordPress e clicar no botão azul '+'.

Adding a shoppable feed to any widget-ready area

Na barra de pesquisa, digite 'Instagram Feed' e selecione o widget certo quando ele aparecer.

Esteja ciente de que o WordPress possui um widget do Instagram embutido, portanto, certifique-se de escolher aquele que mostra o logotipo oficial do Instagram.

Adding a shoppable Instagram widget to WordPress

Em seguida, basta arrastar o widget para a área onde deseja mostrar o feed de compras 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 de compra do Instagram que você acabou de criar, digite o código do feed na caixa 'Configurações de código de acesso'.

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.

Para obter ajuda para colocar o shortcode, consulte nosso guia sobre como adicionar um shortcode.

Por fim, se você estiver usando um tema habilitado para bloco, poderá usar o editor de site completo para adicionar o bloco de feed do Instagram em qualquer lugar do seu site.

Em seu painel, basta acessar Aparência » Editor .

How to add a shoppable Instagram feed to your WordPress theme

Por padrão, o editor de site completo mostrará o modelo inicial do tema. Se quiser adicionar o feed de compra a um modelo diferente, clique na seta ao lado de 'Página inicial'.

Você pode escolher qualquer design no menu suspenso, como o modelo de rodapé.

Selecting a different template in the WordPress FSE full-site editor

Se você não vir o modelo na lista, selecione 'Procurar todos os modelos'.

O editor de site completo agora mostrará uma lista de todos os modelos que você pode editar. Basta clicar no modelo onde deseja mostrar o feed do Instagram para compras.

Choosing a WordPress template in the full-site editor (FSE)

Depois de escolher um modelo, basta passar o mouse sobre a área onde deseja adicionar o feed de compra do Instagram.

Em seguida, clique no botão '+'.

Adding a block to your WordPress theme using full-site editing (FSE)

Depois disso, comece a digitar 'Instagram Feed'.

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

Adding a Smash Balloon instagram block to a WordPress theme

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.

Esperamos que este artigo tenha ajudado você a aprender como adicionar imagens compráveis ​​do Instagram no WordPress. Você também pode querer ver nosso guia sobre como criar um endereço de e-mail comercial gratuito ou ver nossa escolha de especialistas dos melhores plug-ins WooCommerce para sua loja.

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