Está procurando uma maneira fácil de adicionar um feed do Instagram ao seu site WordPress?
Um feed do Instagram ajuda a exibir seu conteúdo de mídia social diretamente no seu site WordPress. Os visitantes podem visualizar e interagir com seu conteúdo do Instagram sem precisar sair do site.
Neste tutorial passo a passo, mostraremos como conectar seu site ao Instagram para exibir seu conteúdo. Esse é 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, esse método é longo e complicado.
Uma solução melhor é usar um plug-in do WordPress que permita conectar seu site ao Instagram. O melhor plug-in para isso é o Smash Balloon.
O Smash Balloon é um poderoso plugin de feeds sociais e vem com um plugin projetado especificamente para o Instagram. Ele não requer nenhuma experiência em codificação, o que o torna fácil de usar.
O Smash Balloon permite que você conecte seu site ao Instagram com apenas alguns cliques. Em seguida, você pode personalizar seu feed de forma a atingir seu público de maneira específica. Vamos ver como:
- Vários feeds: Adicione vários feeds do Instagram na mesma página ou em páginas diferentes do seu site.
- Usar 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: Basta adicionar 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 que usem um sistema de cache. Isso significa que os arquivos de mídia serão carregados mais rapidamente, 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 imagens: Todas as imagens serão carregadas em um tamanho de arquivo ideal para o tamanho da tela. Como resultado, menos recursos são desperdiçados, proporcionando ao usuário a melhor experiência.
- Foco em SEO: As legendas do feed podem ser rastreadas pelos mecanismos de pesquisa, o que significa que seu feed pode ser classificado, o que o torna uma excelente ferramenta de SEO. Além disso, como seu site é constantemente atualizado com conteúdo novo, seu SEO também se beneficia ainda mais.
Para este tutorial, usaremos o plug-in Instagram Feed do Smash Balloon.
Dito isso, o Smash Balloon é realmente poderoso e oferece suporte a outras plataformas de mídia social, incluindo YouTube, Twitter e Facebook.
Agora que você já sabe qual plugin de feeds de mídia social usar, vamos direto ao tutorial.
Como criar um feed do Instagram para seu site WordPress
Etapa 1: Instalar e ativar o Smash Balloon
OSmash Balloon’s Instagram Feed tem uma versão gratuita e uma versão premium. A versão gratuita é um plugin poderoso por si só; você pode usá-lo até decidir fazer o upgrade.
Para acessar a versão gratuita, acesse o Repositório de plug-ins do WordPress para fazer o download e instalá-lo. Configure-o como faria com qualquer outro plug-in. Se precisar de ajuda com isso, siga nosso guia sobre Como instalar um plug-in do WordPress – 4 métodos (passo a passo).
Para este tutorial, usaremos a versão profissional para mostrar o poder desse plug-in.
No site do Instagram Feed, registre-se em uma conta e vá para “Minha conta”.
Aqui, faça o download do arquivo do plug-in “Instagram Feed Pro” e copie a chave de licença.
Vá para o painel do WordPress e, em seguida, para a página Plugins ” Add New. Aqui você pode carregar o arquivo do plug-in.
Quando o Instagram Feed Pro estiver pronto para ser usado, um novo item chamado Instagram Feed aparecerá no menu do lado esquerdo do painel do WordPress.
Vá para Instagram Feed ” Settings 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 plug-in instalado e ativado, a próxima etapa é conectar sua conta do Instagram. Para fazer isso, vá para Instagram Feed ” All Feeds. Aqui, vá até o botão Add New (Adicionar novo ).
Em seguida, selecione Feed Type (Tipo de alimentação). Você verá as seguintes opções disponíveis:
- Obter postagens de seu perfil do Instagram
- Obter postagens de uma hashtag pública do Instagram
- Exibir postagens em que sua conta do Instagram foi marcada
Curiosamente, o Smash Balloon não o limita a selecionar um tipo de feed do Instagram; você pode escolher todos eles de uma vez. No entanto, selecionaremos “Fetch posts from your Instagram profile” (Buscar publicações do seu perfil do Instagram) para este tutorial.
Na próxima página, você deverá adicionar uma fonte de feed. Basicamente, é a partir daí que seu feed buscará o conteúdo.
Após a página Add Source , você pode conectar uma conta pessoal ou uma conta comercial. Para este tutorial, selecionaremos o perfil comercial, que oferece mais recursos.
Outra janela será exibida, perguntando se você já conectou o Smash Balloon ao Facebook antes. Supondo que esta seja a primeira vez que você usa esse plug-in de feed, você deve responder “Não”.
Em seguida, você será solicitado a se conectar por meio de sua página do Facebook. Como a Meta é proprietária do Facebook e do Instagram, a conexão por meio do Facebook é a melhor maneira de conceder acesso ao Smash Balloon.
Uma janela pop-up será exibida em seguida, solicitando que você continue com o perfil do Facebook conectado. 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 e, 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 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. Conceder acesso aos dados do plug-in garante que seu feed exiba tudo o que deve ser exibido sem problemas.
Para concluir a conexão, verifique se o domínio que você deseja conectar ao Smash Balloon é seu. Isso serve apenas para confirmar que você está dando acesso ao Smash Balloon.
Por fim, 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 Add (Adicionar ).
E, assim, você conectou totalmente o Instagram Feed Pro da Smash Balloon ao seu site WordPress.
Etapa 3: Criar um feed do Instagram
Com o Smash Balloon conectado, vamos criar um novo feed. No menu do WordPress, vá para Instagram Feed ” All Feeds. Selecione a fonte que você acabou de adicionar e prossiga para a próxima página.
Nessa página, escolha o tema do Feed. Lembre-se de que essa é apenas a base e um ponto de partida; você sempre poderá alterar o tema posteriormente.
Entre os temas de feed, selecione uma das opções Padrão, Moderno, Mural social, Contorno ou Sobreposição. Para simplificar, escolheremos o tema Padrão.
Depois de escolher o tema, selecione o modelo que deseja usar. Você tem muitas opções para escolher. Desde o Simple Grid, Simple Grid XL, Simple Row, Simple Carousel, Single Post e muito mais.
Lembre-se de que, com o Smash Balloon, você sempre pode alterar o modelo posteriormente, se achar que outra opção oferecerá ao seu público uma experiência melhor.
Com todas as configurações básicas definidas, você será redirecionado para o editor de feed ao vivo, onde poderá personalizar o feed.
Etapa 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. Neste tutorial, vamos nos concentrar no menu Customize (Personalizar ). Selecione-o e você verá uma lista de opções de personalização abaixo dele.
Sempre que clicar em um menu do editor de feed ao vivo e concluir o processo de personalização, você verá Customize (Personalizar) com uma pequena seta ao lado. Selecione-a para voltar ao menu Personalizar.
Para utilizar o editor de feed ao vivo corretamente, localize os três ícones no canto superior direito: desktop, tablet e celular. Aqui, você pode ver como o feed do Instagram aparecerá em diferentes tamanhos de tela para que você possa oferecer ao seu público a melhor experiência.
Lembre-se de que já personalizamos o tema e o modelo nas etapas anteriores. Como mencionado, você também pode modificá-los aqui, se desejar.
Feito isso, vamos começar a personalizar o layout do feed. Você pode optar por Grid, Carousel, Masonry e Highlights.
Role o submenu Feed Layout (Layout do feed ) para ajustar a Altura do feed, o Preenchimento, o Número de publicações em diferentes tamanhos de tela e, finalmente, o número de colunas para diferentes tamanhos de tela. Quando estiver satisfeito com o layout, volte.
Em seguida, vamos personalizar o esquema de cores. Por padrão, seu feed herdará as cores do tema. Você pode optar por um modo claro ou escuro.
Se você quiser personalizar ainda mais o esquema de cores, selecione Custom e use a paleta Custom para escolher as cores desejadas. Você pode alterar as cores do plano de fundo, dos textos, dos links e dos 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 quiser exibi-lo em seu feed.
Em seguida, escolha um estilo de cabeçalho entre as opções fornecidas. Selecione Padrão, Em caixa, Centralizado ou Texto. Cada estilo de cabeçalho pode ser editado de forma ligeiramente diferente quando você rolar mais abaixo 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 Avatar padrão de sua conta do Instagram.
Em seguida, escolha uma cor de texto e decida se deseja mostrar aos seus usuários quantos seguidores você tem no Instagram.
Em seguida, você pode optar por ter uma biografia. Mas, para lhe dar mais liberdade de personalização, o Smash Balloon lhe dá a opção de escrever uma biografia personalizada.
Enquanto você ainda estiver no menu Cabeçalho, decida se deseja mostrar a área de rolagem fora do feed. Por fim, determine se você deseja que as histórias do Instagram sejam incluídas no feed e por quanto tempo elas devem ser exibidas antes de passar para a próxima história do Insta.
É isso, você pode voltar ao menu principal de personalização. Em seguida, para personalizar os Posts, você pode modificar:
- Estilo de postagem padrão ou em caixa
- Resolução de imagens e vídeos
- Tamanho da legenda, tamanho do texto e cor
- Curtir e comentar Tamanho e cor do resumo
- Estado de Hover, texto de fundo e informações a serem exibidas
Depois de concluído, volte ao menu principal Personalizar.
O Smash Balloon também permite que você escolha se deseja exibir o botão Load More. Ele não precisa dizer “Load More”. Você pode alterá-lo para o que quiser.
Em seguida, personalize as cores do plano de fundo, do estado de Hover e do texto. Você também pode optar por ativar a “Rolagem infinita” para que os usuários possam visualizar quantas publicações do Instagram quiserem no seu feed.
Precisa alterar o “Botão Seguir”? Há uma opção para personalizar o texto primeiro, o plano de fundo, o estado do mouse e as cores do texto.
Por fim, 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 está totalmente personalizado e pronto para ser adicionado ao seu site.
Etapa 5: Exibir 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 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 guia para que você possa adicionar o feed.
Como alternativa, você pode adicionar o feed a qualquer momento a uma página ou publicação existente ou nova. No editor de blocos, use o ícone de adição para procurar o bloco “Instagram Feed” e adicione-o à sua página. Você verá uma visualização do seu feed.
Atualize a página, e seu feed também deverá aparecer na página ativa.
Em seguida, adicionaremos o feed por meio de um widget. Novamente, localize o botão Incorporar no canto superior direito do editor de feed ao vivo e selecione “Adicionar a um widget”.
Depois de ser redirecionado para a página do widget, 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 de rodapé para expandi-lo e poder visualizar suas propriedades.
Em seguida, use o ícone de adição e pesquise o “Instagram Feed”. Arraste e solte o bloco Instagram Feed no local do rodapé em que você deseja exibir o feed. Clique em Atualizar para adicioná-lo ao seu feed na página ativa.
Por fim, vamos adicionar o feed por meio de um shortcode. Com um shortcode, você pode adicionar o feed em QUALQUER página, post ou local preparado para widgets.
O shortcode é particularmente útil quando você tem vários feeds para escolher ou deseja adicionar muitos feeds à mesma página ou publicação.
Você pode localizar o shortcode do feed de duas maneiras.
Primeiro, você pode ir para Instagram Feed ” All Feeds. Você verá todos os seus feeds listados; copie o shortcode ao lado do nome do feed.
O outro método de obter o shortcode é acessar Instagram Feed ” All Feeds e abrir o feed no editor de feed ao vivo.
No canto superior direito, localize o botão Embed. Na janela pop-up que aparece, você verá o shortcode na parte superior da janela; copie-o.
Agora, com seu shortcode em mãos, abra qualquer página, post ou local pronto para widgets. Para este tutorial, abriremos uma página.
Usando o ícone de adição, procure por “Shortcodes” e adicione o bloco à sua página.
Por fim, cole o shortcode e atualize a página; o site ativo deverá exibir o feed.
Muito bem! Agora você adicionou um feed do Instagram altamente personalizado e customizado 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 esse plug-in!
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 em codificação. O Smash Balloon ajuda você a capitalizar todo o potencial de engajamento do Instagram e do conteúdo gerado pelo usuário.
Além disso, você pode criar vários feeds na mesma página ou em páginas diferentes, conectar-se a hashtags específicas, incluir postagens marcadas ou até mesmo exibir perfeitamente toda a linha do tempo do Instagram em seu site.
Você também pode adicionar feeds do Facebook, do YouTube e do Twitter. Veja como é a personalização de um feed do YouTube:
O Smash Balloon também vem com um recurso superpoderoso chamado Social Wall. Ele permite combinar feeds de várias plataformas em um só lugar. Os usuários podem interagir com o seu conteúdo do YouTube, Twitter, Instagram e Facebook para que possam ficar atualizados com todas as suas plataformas.
Esperamos que este tutorial tenha sido útil para você. Talvez você também queira saber como compartilhar automaticamente publicações do WordPress no Facebook e no Twitter. Nosso objetivo é capacitá-lo e ajudá-lo a realmente utilizar suas páginas de mídia social com seu site. Por esse motivo, dê uma olhada também nestes artigos:
- Como incorporar um feed do YouTube no WordPress para aumentar o engajamento
- Como exibir um feed do Facebook no WordPress (5 etapas fáceis)
- Como adicionar notificações de prova social no WordPress
Os dois primeiros artigos ajudarão você a usar o Smash Balloon para adicionar feeds do YouTube e do Facebook. O último artigo mostrará como mostrar a prova social aos clientes em potencial.
Comentários Deixe uma resposta