Você está procurando uma maneira fácil de adicionar um feed do Instagram ao seu site WordPress?
Um feed do Instagram ajuda você a exibir seu conteúdo de mídia social diretamente no seu site WordPress. Os visitantes podem ver e interagir com seu conteúdo do Instagram sem precisar sair do seu site.
Neste tutorial passo a passo, mostraremos como conectar seu site ao Instagram para exibir seu conteúdo. Este é um processo automatizado e não requer nenhum conhecimento de codificação. Vamos começar.
O Que Você Precisa Para Criar um Feed do Instagram no WordPress
Você pode adicionar um feed do Instagram ao seu site manualmente usando código, no entanto, este método é longo e complicado.
Uma solução melhor é usar um plugin do WordPress que permite conectar seu site ao Instagram. O melhor plugin para isso é o Smash Balloon.
Smash Balloon é um poderoso plugin de feeds sociais e vem com um plugin projetado especificamente para o Instagram. Ele não precisa de nenhuma experiência em codificação, tornando-o fácil de usar.
O Smash Balloon permite que você conecte seu site ao Instagram em alguns cliques. Em seguida, você pode personalizar seu feed de maneiras que visam seu público de forma específica. Vamos ver como:
- Múltiplos Feeds: Adicione vários feeds do Instagram na mesma página ou em páginas diferentes do seu site.
- Usando hashtags: Conecte seu feed a hashtags no Instagram para que seu feed seja atualizado automaticamente quando alguém postar usando essas hashtags.
- Tags: Configure seu feed para que, sempre que alguém marcar você no Instagram, isso seja adicionado ao seu feed.
- Feed Completo: Simplesmente adicione toda a sua linha do tempo do Instagram ao feed do seu site.
Além dessas poderosas opções de personalização do feed do Instagram, o Smash Balloon ainda tem muitos recursos para melhorar a experiência do seu público.
- Cache de dados inteligente: Garante que as imagens não sejam carregadas diretamente do Instagram, mas usem um sistema de cache. Isso significa que os arquivos de mídia carregarão mais rápido, oferecendo uma experiência melhor.
- Backup do feed: Mesmo que o Instagram esteja fora do ar ou com problemas, o sistema de cache de dados inteligente oferecido pelo Smash Balloon garante que seu feed ainda seja exibido.
- Otimização de imagem: Todas as imagens serão carregadas com um tamanho de arquivo ideal para o tamanho da tela. Como resultado, menos recursos são desperdiçados, ao mesmo tempo em que oferece a melhor experiência ao usuário.
- Foco em SEO: As legendas do feed podem ser rastreadas pelos motores de busca, o que significa que seu feed é classificável, tornando-o uma ótima ferramenta de SEO. Além disso, como seu site está constantemente sendo atualizado com conteúdo novo, seu SEO se beneficia ainda mais.
Para este tutorial, usaremos o plugin Instagram Feed do Smash Balloon.
Dito isso, o Smash Balloon é realmente poderoso e suporta outras plataformas de mídia social, incluindo YouTube, Twitter e Facebook.
Agora que você sabe qual plugin de feed de mídia social usar, vamos direto ao tutorial.
Como Criar um Feed do Instagram para o Seu Site WordPress
Passo 1: Instalar e Ativar o Smash Balloon
O Instagram Feed do Smash Balloon tem uma versão gratuita e uma premium. A versão gratuita é um plugin poderoso por si só; você pode usá-la até decidir fazer o upgrade.
Para acessar a versão gratuita, vá ao seu Repositório de Plugins do WordPress para baixá-lo e instalá-lo. Configure-o como qualquer outro plugin. Se precisar de ajuda com isso, siga nosso guia sobre Como Instalar um Plugin do WordPress – 4 Métodos (Passo a Passo).
Para este tutorial, usaremos a versão pro para que possamos mostrar o quão poderoso este plugin é.
No site do Instagram Feed, crie uma conta e depois prossiga para 'Minha Conta'.
Aqui, baixe o arquivo do plugin 'Instagram Feed Pro' e copie a chave de licença.
Vá para o painel do seu WordPress e, em seguida, para a página Plugins » Adicionar Novo. Aqui você pode fazer o upload do arquivo do plugin.
Assim que o Instagram Feed Pro estiver pronto para uso, um novo item chamado Instagram Feed aparecerá no menu lateral esquerdo do seu painel do WordPress.
Vá para Instagram Feed » Configurações e insira a chave de licença que você copiou anteriormente.
Ative a licença e, com isso, você estará pronto para usar o Instagram Feed Pro.
Etapa 2: Conecte Sua Conta do Instagram
Com o plugin instalado e ativado, o próximo passo é conectar sua conta do Instagram. Para fazer isso, vá para Instagram Feed » Todos os Feeds. Aqui, clique no botão Adicionar Novo.
Em seguida, Selecione o Tipo de Feed. Você verá as seguintes opções disponíveis:
- Buscar posts do seu perfil do Instagram
- Buscar posts de uma hashtag pública do Instagram
- Exibir posts em que sua conta do Instagram foi marcada
Interessantemente, o Smash Balloon não limita você a selecionar um tipo de feed do Instagram; você pode escolher todos eles de uma vez. No entanto, selecionaremos 'Buscar posts do seu perfil do Instagram' para este tutorial.
Na próxima página, você precisará adicionar uma Fonte do Feed. Basicamente, é de onde seu feed buscará o conteúdo.
Após a página Adicionar Fonte, você pode conectar uma conta pessoal ou uma conta comercial. Selecionaremos o perfil comercial para este tutorial, que oferece mais recursos.
Uma nova janela aparecerá, perguntando se você já conectou o Smash Balloon ao Facebook antes. Assumindo que esta é a primeira vez que você usa este plugin de feed, você deve escolher 'Não'.
Em seguida, você será solicitado a se conectar através da sua página do Facebook. Como a Meta é dona do Facebook e do Instagram, conectar-se através do Facebook é a melhor maneira de dar acesso ao Smash Balloon.
Uma janela pop-up aparecerá em seguida, pedindo para você continuar com o perfil do Facebook logado. Certifique-se de fazer login na conta vinculada às páginas corretas do Instagram e do Facebook que você deseja usar.
Outra janela pop-up será exibida em seguida, desta vez, você precisará selecionar as páginas do Instagram que deseja conectar ao Smash Balloon. Marque a caixa ao lado do(s) perfil(is) que você deseja usar.
Na próxima janela pop-up, conecte a página do Facebook associada ao perfil do Instagram marcando a caixa ao lado dela.
Na próxima janela, conceda ao Smash Balloon as permissões necessárias. A empresa não compartilhará suas informações com ninguém. Dar acesso aos dados do plugin garante que seu feed exiba tudo o que deveria sem problemas.
Para completar a conexão, verifique se o domínio que você deseja conectar ao Smash Balloon é seu. Isso é apenas para confirmar que você está dando acesso ao Smash Balloon.
Finalmente, uma janela pop-up será exibida em seguida com uma lista de perfis do Instagram que você conectou ao Smash Balloon. Marque a caixa ao lado da página e prossiga selecionando o botão Adicionar.
E pronto, você conectou totalmente o Instagram Feed Pro do Smash Balloon ao seu site WordPress.
Etapa 3: Crie um Feed do Instagram
Com o Smash Balloon conectado, vamos criar um novo feed. No menu do seu WordPress, vá para Instagram Feed » Todos os Feeds. Selecione a origem que você acabou de adicionar e prossiga para a próxima página.
Nesta página, escolha o tema do Feed. Lembre-se, este é apenas a base e um ponto de partida para construir; você sempre pode alterar o tema mais tarde.
Entre os temas de feed, selecione uma das opções Padrão, Moderno, Mural Social, Contorno ou Sobreposição. Mantendo as coisas simples, usaremos o tema Padrão.
Após escolher o tema, em seguida, selecione o modelo que você deseja usar. Você tem muitas opções para escolher. De Grade Simples, Grade Simples XL, Linha Simples, Carrossel Simples, Postagem Única e mais.
Lembre-se, com o Smash Balloon, você sempre pode alterar o modelo mais tarde também, se sentir que outra opção oferecerá uma melhor experiência ao seu público.
Com todas as configurações básicas definidas, você será redirecionado para o editor de feed ao vivo, onde poderá personalizar o feed.
Passo 4: Personalize seu feed do Instagram
O editor de feed ao vivo oferece opções de personalização e configuração à esquerda e uma tela de visualização ao vivo à direita. Focaremos no menu Personalizar para este tutorial. Selecione-o e você verá uma lista de opções de personalização abaixo dele.
Cada vez que você clica em um menu do editor de feed ao vivo e completa o processo de personalização, você verá Personalizar com uma pequena seta ao lado. Selecione-o para voltar ao menu Personalizar.
Para utilizar o editor de feed ao vivo corretamente, encontre os três ícones no canto superior direito: um desktop, tablet e celular. Aqui, você pode ver como o feed do Instagram aparecerá para diferentes tamanhos de tela, para que você possa oferecer a melhor experiência ao seu público.
Lembre-se, já personalizamos o tema e o modelo nas etapas anteriores. Como mencionado, você também pode modificá-los aqui, se desejar.
Com isso resolvido, vamos começar a personalizar o Layout do Feed. Você pode escolher entre Grade, Carrossel, Mosaico e Destaques.
Role para baixo no submenu Layout do Feed para ajustar a Altura do Feed, Preenchimento, Número de Posts em diferentes tamanhos de tela e, finalmente, o número de colunas para diferentes tamanhos de tela. Assim que estiver satisfeito com o layout, volte.
Em seguida, vamos personalizar o Esquema de Cores. Por padrão, seu feed herdará as cores do seu tema. Você pode optar por um modo claro ou escuro.
Se você quiser personalizar ainda mais o esquema de cores, selecione Personalizado e use a Paleta Personalizada para escolher suas cores desejadas. Você pode alterar as cores do fundo, textos, links e botões.
Volte ao menu principal quando estiver satisfeito com o esquema de cores.
Agora, vamos editar as Seções começando pelo Cabeçalho. Primeiro, ative o cabeçalho se desejar exibi-lo em seu feed.
Em seguida, escolha um Estilo de Cabeçalho entre as opções fornecidas. Selecione Padrão, Caixa, Centralizado ou Texto. Cada estilo de cabeçalho pode ser editado de forma ligeiramente diferente quando você rola mais para baixo no menu Cabeçalho.
Você também pode editar o ‘Tamanho do Cabeçalho’. Em seguida, decida se deseja carregar um novo Avatar para exibir no lugar do padrão da sua conta do Instagram.
Em seguida, escolha uma cor de Texto e decida se deseja mostrar aos seus usuários quantos seguidores do Instagram você tem.
Você pode então optar por ter uma bio. Mas, para lhe dar mais liberdade de personalização, o Smash Balloon oferece a opção de escrever uma bio personalizada.
Enquanto você ainda estiver no menu Cabeçalho, decida se deseja mostrar a área rolável fora do feed. Finalmente, determine se deseja que os stories do Instagram sejam incluídos no feed e por quanto tempo eles devem ser exibidos antes de passar para o próximo Insta Story.
É isso, você pode voltar ao menu principal de personalização. Em seguida, para personalizar os Posts, você pode modificar:
- Estilo do Post para padrão ou caixa
- Resolução de Imagens e Vídeos
- Comprimento da legenda, tamanho e cor do texto
- Tamanho e cor do Resumo de Curtidas e Comentários
- Estado ao passar o mouse, texto de fundo e informações a serem exibidas
Ao concluir, volte ao menu principal Personalizar.
O Smash Balloon também permite que você escolha se deseja exibir o botão Carregar Mais. Ele não precisa dizer ‘Carregar Mais’. Você pode alterá-lo para o que quiser.
Em seguida, personalize as cores de Fundo, Estado ao passar o mouse e Texto. Você também pode decidir ativar a ‘Rolagem Infinita’ para que os usuários possam ver quantos posts do Instagram quiserem em seu feed.
Precisa alterar o ‘Botão Seguir’? Há uma opção para personalizar o texto primeiro, o fundo, o estado ao passar o mouse e as cores do texto.
Finalmente, ative o Lightbox e os ‘Comentários’, para que seu feed possa exibir comentários da página do Instagram.
E com todas essas opções personalizadas, seu feed fica totalmente customizado e pronto para ser adicionado ao seu site.
Etapa 5: Exiba seu Feed do Instagram
O Smash Balloon permite que você exiba seu feed de várias maneiras.
- Adicionar a uma página
- Adicionar a um widget
- Adicionar feed via shortcode
Para adicionar o feed a uma página, clique no botão Incorporar no canto superior direito do seu editor de feed ao vivo.
Você verá a opção de adicionar o feed a uma página na próxima janela pop-up.
Em seguida, você verá uma lista de todas as páginas do seu site, selecione a página à qual deseja adicionar o feed. A página será aberta em uma nova aba para que você possa adicionar seu feed.
Alternativamente, você pode adicionar o feed a qualquer momento a uma página ou postagem existente ou nova. Dentro do editor de blocos, use o ícone de Mais para pesquisar o bloco 'Feed do Instagram' e adicioná-lo à sua página. Você verá uma prévia do seu feed aparecer.
Atualize a página e seu feed deverá aparecer na página ao vivo também.
Em seguida, adicionaremos o feed através de um widget. Novamente, encontre o botão Incorporar no canto superior direito do editor de feed ao vivo e selecione 'Adicionar a um Widget'.
Após ser redirecionado para a página de widgets, decida se deseja adicionar o feed ao rodapé ou a outros tipos de widgets.
Para este tutorial, queremos adicionar o feed ao rodapé. Selecione o widget do rodapé para expandi-lo para que você possa ver suas propriedades.
Em seguida, use o ícone de Mais e pesquise por 'Feed do Instagram'. Arraste e solte o bloco Feed do Instagram no local do rodapé onde você deseja exibir o feed. Clique em Atualizar para adicioná-lo à sua página ao vivo.
Finalmente, vamos adicionar o feed através de um shortcode. Com um shortcode, você pode adicionar o feed em QUALQUER página, postagem ou local pronto para widgets.
O shortcode é particularmente útil quando você tem vários feeds para escolher ou deseja adicionar muitos feeds à mesma página ou postagem.
Você pode localizar o shortcode do feed de duas maneiras.
Primeiro, você pode ir para Feed do Instagram » Todos os Feeds. Você verá todos os seus feeds listados; copie o shortcode ao lado do nome do feed.
O outro método para obter o shortcode é indo em Instagram Feed » Todos os Feeds e abrindo o feed no editor de feed ao vivo.
No canto superior direito, encontre o botão Incorporar. No pop-up que aparece, você verá o shortcode no topo da janela; copie-o.
Agora, com seu shortcode em mãos, abra qualquer página, postagem ou local pronto para widgets. Para este tutorial, abriremos uma página.
Usando o ícone de Mais, pesquise por ‘Shortcodes’ e adicione o bloco à sua página.
Finalmente, cole o shortcode e atualize a página; o site ao vivo agora deve exibir o feed.
Muito bem! Você adicionou um feed do Instagram altamente personalizado ao seu site WordPress.
Agora que você sabe como usar o Smash Balloon para adicionar um Feed do Instagram, não pare por aí. Há muito mais que você pode fazer com este plugin!
O que Mais o Smash Balloon Pode Fazer?
Como você pode ver, adicionar um feed do Instagram não é apenas fácil com o Smash Balloon, mas incrivelmente personalizável e sem nenhuma experiência de codificação. O Smash Balloon ajuda você a capitalizar todo o potencial de engajamento e conteúdo gerado pelo usuário do Instagram.
Para complementar, você pode criar vários feeds nas mesmas ou em páginas diferentes, conectar-se a hashtags específicas, incluir posts marcados ou até mesmo exibir perfeitamente toda a sua linha do tempo do Instagram em seu site.
Você também pode adicionar feeds do Facebook, YouTube e Twitter. Aqui está uma prévia de como é personalizar um Feed do YouTube:
O Smash Balloon também vem com um recurso super poderoso chamado Social Wall. Isso permite combinar feeds de várias plataformas em um só lugar. Os usuários podem interagir com seu conteúdo do YouTube, Twitter, Instagram e Facebook para que possam ficar atualizados com todas as suas plataformas.
Esperamos que você tenha achado este tutorial útil. Você também pode querer aprender como compartilhar automaticamente posts do WordPress no Facebook e Twitter. Nosso objetivo é capacitar e ajudá-lo a realmente utilizar suas páginas de mídia social com seu site. Por esse motivo, confira estes artigos também:
- Como Incorporar um Feed do YouTube no WordPress para Aumentar o Engajamento
- Como Mostrar um Feed do Facebook no WordPress (5 Passos Fáceis)
- Como Adicionar Notificações de Prova Social no WordPress
Os dois primeiros artigos o ajudarão a usar o Smash Balloon para adicionar feeds do YouTube e do Facebook. O último artigo mostrará como exibir prova social para potenciais clientes.
Comentários Deixe uma Resposta