Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como incorporar um feed de grupo do Facebook no WordPress

Gostaria de trazer o envolvimento dinâmico do seu grupo do Facebook diretamente para o seu site do WordPress?

A incorporação de um feed de grupo do Facebook pode ser uma ótima maneira de mostrar as interações da comunidade, compartilhar atualizações e manter o conteúdo do seu site atualizado. Essa integração ajuda a unir suas comunidades on-line e pode aumentar o envolvimento dos visitantes.

Ao longo dos anos, usamos diferentes plataformas de mídia social para direcionar o tráfego para nossos sites. É por isso que entendemos os pontos fortes e os desafios de adicionar um feed de mídia social.

Neste artigo, mostraremos a você como adicionar facilmente um feed de grupo do Facebook no WordPress, passo a passo.

How to embed a Facebook group feed in WordPress

Por que adicionar conteúdo de grupo do Facebook ao seu site WordPress?

O Facebook é a plataforma de mídia social mais popular do mundo e tem 2,9 bilhões de usuários ativos mensais, de acordo com nossas estatísticas de pesquisa de marketing.

Isso torna os grupos do Facebook perfeitos para interagir com pessoas que já conhecem sua marca e se conectar com um novo público.

Na verdade, nosso grupo do WPBeginner Engage no Facebook tem mais de 98 mil usuários ativos e está crescendo em um ritmo incrível.

The WPBeginner Engage Facebook group

Os grupos do Facebook podem ajudá-lo a construir uma comunidade, criar um senso de lealdade e construir um relacionamento positivo com seus usuários.

Depois que as pessoas entrarem no seu grupo, você poderá promover postagens de blog, atualizações da empresa ou até mesmo produtos do WooCommerce sem precisar gastar dinheiro com anúncios on-line.

Depois de criar seu grupo no Facebook, você deverá promovê-lo e atrair pessoas para ele. A melhor maneira de aumentar seu grupo do Facebook é incorporar o feed do grupo em seu site do WordPress.

Dessa forma, os visitantes do seu site podem ver todo o excelente conteúdo que você publica no Facebook. Isso os incentivará a conferir seu grupo, interagir com seu conteúdo e talvez até clicar no botão “Participar”.

Com isso em mente, vamos ver como incorporar um feed de grupo do Facebook no WordPress.

Como instalar um plug-in de feed personalizado do Facebook

A melhor maneira de incorporar um feed de grupo do Facebook no WordPress é usar o plug-in Smash Balloon Facebook Feed.

Esse plug-in permite incorporar vídeos, comentários, avaliações, publicações da comunidade e muito mais do Facebook em seu site WordPress.

An example of an embedded Facebook group page in WordPress

Se você publicar vídeos no seu grupo do Facebook, o Smash Balloon permitirá que os usuários assistam à mídia em um pop-up de lightbox sem sair do seu site.

Depois de incorporar o feed do grupo, as novas postagens aparecerão automaticamente em seu site. Essa é uma maneira fácil de manter seu site atualizado, mesmo para visitantes regulares.

Observação: neste guia, usaremos a versão profissional do Smash Balloon, pois ela permite que você exiba álbuns, vídeos e fotos do Facebook em seu site do WordPress. Entretanto, há também uma versão gratuita que permite incorporar facilmente publicações de status do Facebook no WordPress.

Primeiro, você precisa instalar e ativar o plug-in Smash Balloon Facebook Feed. Para obter mais detalhes, consulte nosso guia sobre como instalar um plug-in do WordPress.

Após a ativação, visite a página Facebook Feed ” Settings (Configurações do feed do Facebook ) e insira sua chave de licença no campo “License Key” (Chave de licença).

Adding your license to the Smash Balloon plugin

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

Depois de inserir a chave, basta clicar no botão “Activate” (Ativar).

Como adicionar o aplicativo Smash Balloon ao seu grupo do Facebook

Agora, você precisará adicionar o aplicativo do Facebook do Smash Balloon ao grupo do Facebook que deseja exibir no seu site do WordPress.

Observação: Devido ao modo como a API do Facebook está configurada, o Smash Balloon só pode mostrar publicações feitas depois que você adicionou o aplicativo ao seu grupo do Facebook.

Com isso em mente, vamos instalar o aplicativo antes de fazermos qualquer outra coisa. Em uma nova guia, faça login no Facebook e vá para o seu grupo do Facebook.

Em seguida, no menu à esquerda, clique em “Configurações do grupo”.

The Facebook group settings

Depois disso, você precisa rolar até a seção “Manage advanced settings” (Gerenciar configurações avançadas).

Aqui, clique no ícone de lápis ao lado de “Apps”.

Adding the Smash Balloon app to your Facebook group

Isso abre uma janela pop-up mostrando todos os aplicativos que você já adicionou a esse grupo.

Como queremos instalar o aplicativo Smash Balloon, você deve clicar em “Add Apps” (Adicionar aplicativos).

How to install a Facebook app

Na barra de pesquisa, digite “Smash Balloon WordPress”.

Quando o aplicativo certo aparecer, dê um clique nele.

Adding the Smash Balloon app to your Facebook group

Uma janela pop-up aparecerá mostrando todas as informações que o aplicativo pode acessar e todas as ações que ele pode executar.

Se você concordar em instalar o aplicativo, clique em “Add” (Adicionar).

Giving Smash Balloon access to your WordPress website

Após alguns instantes, você verá uma mensagem informando que adicionou com êxito o aplicativo Smash Balloon ao seu grupo do Facebook.

Conecte o Smash Balloon ao seu grupo do Facebook

Agora, é hora de conectar sua página do Facebook ao WordPress. Para fazer isso, acesse o Feed do Facebook ” Todos os feeds e clique em “Adicionar novo”.

Embedding a Facebook group feed in WordPress

O Smash Balloon permite que você mostre fotos, eventos, vídeos, álbuns e muito mais.

Como queremos incorporar nosso feed de grupo do Facebook, clique em “Timeline” (Linha do tempo) e selecione “Next” (Avançar).

Embedding a Facebook group timeline in WordPress

Depois disso, você precisará selecionar o grupo do Facebook do qual obterá a linha do tempo.

Para começar, basta clicar em “Adicionar novo”.

Connecting WordPress to a Facebook group

Na tela seguinte, selecione o botão de opção ao lado de “Group” (Grupo).

Depois disso, basta clicar em “Connect to Facebook”.

Connecting a Facebook group to WordPress

Isso abre uma janela pop-up na qual você pode fazer login na sua conta do Facebook. Em seguida, escolha o grupo que você deseja usar.

Depois de marcar a caixa ao lado de um ou mais grupos, basta clicar em “Next”.

Selecting your Facebook group

Agora você deve ver uma janela pop-up solicitando a instalação do aplicativo Smash Balloon WordPress.

Como já instalamos esse aplicativo, você pode ir em frente e clicar em “Done” (Concluído).

Adding the Smash Balloon social media plugin to WordPress

Como criar um feed de grupo do Facebook no WordPress

Agora que você adicionou seu grupo do Facebook ao Smash Balloon, ele aparecerá como uma opção. Basta clicar para selecionar o grupo e, em seguida, clicar em “Next” (Avançar).

Creating a new Facebook group feed for your WordPress website

Nessa tela, você pode escolher um modelo que será usado para criar o feed personalizado do Facebook no WordPress.

Todos esses modelos são totalmente personalizáveis, de modo que você pode ajustar o design dependendo de como deseja mostrar atualizações de status, vídeos e fotos do seu grupo do Facebook.

Estamos usando o modelo “Simple Masonry”, mas você pode escolher qualquer modelo que desejar.

Selecting a masonry layout for a Facebook group feed

O Smash Balloon agora criará o feed de mídia social com base no seu grupo do Facebook e no modelo que você escolheu.

Esse é um bom começo, mas o Smash Balloon tem muitas configurações que você pode usar para personalizar a aparência desse feed de grupo em seu blog do WordPress.

Como personalizar seu feed de grupo do Facebook

O plug-in Smash Balloon oferece muitas maneiras de personalizar a forma como o feed aparece em seu site. Vale a pena explorar as alterações que você pode fazer.

Na tela Feed do Facebook ” Todos os feeds, localize o feed do grupo e clique no botão “Editar”, que se parece com um pequeno lápis.

Customizing an embedded social media feed

Isso abre o editor de feed Smash Balloon, que mostra uma visualização de sua linha do tempo do Facebook no WordPress.

No lado esquerdo, você verá todas as diferentes configurações que pode usar para personalizar a forma como as postagens aparecem no seu site. A maioria dessas configurações é autoexplicativa, mas abordaremos rapidamente algumas áreas importantes.

Customizing a Facebook group feed in WordPress

Se quiser alterar o modelo que está usando, basta clicar em ‘Template’.

Em seguida, selecione o botão “Change” (Alterar).

Choosing a new social media template

Para começar, você pode alterar a forma como as postagens do seu grupo são exibidas clicando em “Feed Layout”.

Nessa tela, você pode alternar entre os layouts de alvenaria e de lista e alterar a altura do feed. À medida que você fizer alterações, a visualização será atualizada automaticamente, para que você possa experimentar configurações diferentes e ver qual é a melhor para o seu grupo do Facebook.

The Smash Balloon social media layout editor

Por padrão, o feed de grupos do Facebook mostrará um número diferente de publicações em computadores desktop e dispositivos móveis.

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

Creating a mobile responsive social media feed

Depois de testar a versão móvel do seu site WordPress, talvez você queira alterar o número de publicações exibidas em smartphones e tablets.

Para fazer essa alteração, basta localizar a seção “Number of Posts” e digitar um número diferente no campo “Mobile”.

Creating a social media layout for smartphones and tablets

Você também pode querer mostrar menos colunas em smartphones e tablets alterando as configurações de “Colunas”.

Por exemplo, na imagem a seguir, estamos dividindo o conteúdo em 3 colunas no desktop, 2 colunas em tablets e 1 coluna em dispositivos móveis.

Changing the number of columns in a social media layout

Quando você estiver satisfeito com o layout, clique no link “Customize” (Personalizar).

Isso o levará de volta ao editor principal do Smash Balloon, pronto para passar para a próxima tela de configurações, que é “Color Scheme” (Esquema de cores).

Changing your social media color scheme

Por padrão, o Smash Balloon usa o mesmo esquema de cores do seu tema do WordPress, mas, nessa tela, você pode mudar para um esquema de cores “Claro” ou “Escuro”.

Outra opção é criar seu próprio esquema de cores selecionando ‘Custom’ e usando os controles para alterar a cor do plano de fundo, alterar a cor do texto no WordPress e muito mais.

Adding a custom color scheme to a social media layout

Você pode adicionar um cabeçalho acima do feed do grupo, que pode incluir conteúdo como a foto e o nome do perfil do grupo. Isso pode ajudar os visitantes a entender o conteúdo que estão vendo e como podem encontrar seu grupo no Facebook.

Para adicionar uma seção de cabeçalho, basta clicar em “Header” (Cabeçalho) no menu à esquerda.

Adding a header to your Facebook group status feed

Nessa tela, clique no controle deslizante “Enable” (Ativar) para mudá-lo de cinza para azul.

Depois de adicionar uma seção de cabeçalho, é possível usar os controles para alterar o tamanho do cabeçalho, alterar a cor do plano de fundo, ocultar ou mostrar a foto do perfil do Facebook e muito mais.

Customizing the Facebook group header

Se você quiser remover o cabeçalho a qualquer momento, basta clicar para desativar o botão de alternância “Ativar”.

Depois disso, você pode alterar a aparência das postagens individuais no feed do grupo selecionando “Post Style” no menu à esquerda.

Para começar, você pode escolher entre layouts de postagem em miniatura, meia largura e largura total.

Changing the post style layout

O layout de miniatura mostra seu feed do Facebook do WordPress com imagens pequenas.

Você pode ver um exemplo disso na imagem a seguir.

Smash Balloon's thumbnail layout

Deseja mostrar imagens maiores em vez disso?

Em seguida, você pode selecionar meia largura como layout da postagem.

The half width Facebook layout

Por fim, se você quiser mostrar seu feed do Facebook com as maiores imagens possíveis, poderá escolher o layout de largura total.

Veja um exemplo de como isso aparecerá em seu site WordPress:

The Facebook full width layout

Quando você estiver satisfeito com o layout geral, é hora de ajustar o conteúdo específico de cada post.

Para começar, clique em “Post Style”.

Customizing the style of your social media posts

Nessa tela, você pode escolher entre um layout regular e um layout em caixa.

Se você selecionar “Boxed”, poderá criar um plano de fundo colorido para cada postagem. Você também pode aumentar o raio da borda para criar cantos curvos e adicionar uma sombra de caixa.

Adding a boxed style to your social media posts

Se você escolher “Regular”, poderá alterar a espessura e a cor da linha que separa suas diferentes postagens de mídia social.

Na imagem a seguir, adicionamos uma linha mais grossa ao feed do grupo e alteramos sua cor.

Adding a border to your Facebook group status updates

Você também pode personalizar as partes individuais de cada postagem voltando à tela principal de configurações.

Mais uma vez, selecione “Post Style”, mas, dessa vez, escolha “Edit Individual Elements” (Editar elementos individuais).

The Smash Ballon Facebook plugin

Agora você verá todo o conteúdo diferente que o Smash Balloon inclui em cada publicação, como o autor da publicação, a data, a caixa de links compartilhados e muito mais.

Para remover uma parte do conteúdo de suas publicações, basta clicar para desmarcar a caixa.

Hiding content from a social media feed in WordPress

Você também pode personalizar a aparência de cada tipo de conteúdo clicando nele.

Por exemplo, na imagem a seguir, você pode ver as configurações para alterar o tamanho e a cor dos links de “ação de postagem”, como curtir, compartilhar e comentar.

Adding a post action to a Feed status update feed

Você também pode alterar o texto “View on Facebook” digitando-o no campo “Customize Text”.

Por padrão, o Smash Balloon não adiciona um botão “curtir” do Facebook ao seu feed. Esse botão facilita a participação dos visitantes em seu grupo, portanto, você pode querer adicioná-lo ao seu feed selecionando as configurações de “Like Box”.

Adding a Facebook like button to WordPress

Em seguida, basta clicar em “Enable” (Ativar) para que o botão de alternância fique azul.

Agora você pode usar o menu suspenso “Position” (Posição) para adicionar a caixa semelhante abaixo ou acima do feed de grupo.

Adding a Facebook like button to your WordPress website

Você também pode usar essas configurações para alterar a largura da caixa ou adicionar a foto de capa do grupo.

Um grande número de seguidores é uma ótima prova social que incentivará mais pessoas a participarem de seu grupo no Facebook. Com isso em mente, talvez você queira clicar para ativar a opção “Mostrar fãs”.

Quando estiver satisfeito com a configuração do botão “Curtir”, você poderá passar para as configurações do “Botão Carregar mais”.

Adding a Load More button to your WordPress website

O botão “Carregar mais” oferece aos visitantes uma maneira fácil de percorrer mais do seu feed. Se eles gostarem desse conteúdo, talvez decidam participar de seu grupo no Facebook.

Com isso em mente, talvez você queira destacar esse botão alterando a cor do plano de fundo, o estado do mouse e a cor do texto.

Customizing the Facebook Load More button in WordPress

Esse botão mostra “Load More” (Carregar mais) por padrão, mas você pode adicionar uma mensagem personalizada digitando-a no campo “Text” (Texto).

O Smash Balloon tem um recurso de lightbox que permite que os visitantes assistam aos vídeos do seu grupo e vejam suas fotos mais de perto sem sair do WordPress.

Os visitantes podem simplesmente clicar em qualquer miniatura de vídeo ou foto para abrir o pop-up da lightbox.

Smash Balloon's lightbox feature

Em seguida, eles podem percorrer o restante das imagens e vídeos no feed usando as setas, de forma semelhante à incorporação de um álbum do Facebook no WordPress.

Para personalizar a lightbox padrão, basta selecionar “Lightbox” no menu à esquerda.

How to customize the Facebook lightbox feature in WordPress

Aqui, você pode alterar a cor do texto, dos links e do plano de fundo da lightbox.

O pop-up lightbox facilita a exploração do seu feed pelos visitantes e permite que eles percorram suas fotos e vídeos sem visitar seu grupo do Facebook.

Se você deseja obter mais visitantes para seu grupo do Facebook, talvez queira desativar o recurso lightbox. Para fazer isso, basta clicar no botão “Enable” (Ativar) para que ele passe de azul para cinza.

How to disable the Smash Balloon lightbox feature

Agora, se um visitante clicar em qualquer foto ou vídeo no feed do grupo, ele será levado ao seu grupo do Facebook em uma nova guia.

Quando estiver satisfeito com a aparência do feed do grupo do Facebook, lembre-se de clicar em “Save” (Salvar) para armazenar suas alterações.

Agora você está pronto para adicionar esse feed ao seu site WordPress.

Como incorporar seu feed de grupo do Facebook no WordPress

Você pode adicionar seu feed de grupo do Facebook ao WordPress usando um bloco, widget ou shortcode.

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

Para obter essas informações, basta acessar Facebook Feed “ All Feeds e, em seguida, copiar o texto em “Shortcode”.

Na imagem a seguir, precisaremos usar custom-facebook-feed feed=1.

Adding a Facebook group feed to your WordPress website

Se quiser incorporar seu feed de grupo do Facebook em uma página ou publicação, você poderá usar o bloco “Custom Facebook Feed”.

Basta abrir a página ou o post em que você deseja incorporar o feed do Facebook. Em seguida, clique no ícone “+” para adicionar um novo bloco e comece a digitar “Custom Facebook Feed”.

Quando o bloco do Facebook aparecer, clique nele para adicioná-lo à sua página ou publicação.

The Custom Facebook Feed WordPress plugin

Por padrão, o bloco mostrará um de seus feeds do Smash Balloon. Se esse não for o feed do grupo do Facebook, localize a seção “Shortcode Settings” (Configurações do código curto) no menu à direita.

Agora você pode ir em frente e adicionar ocódigocustom-facebook-feedfeed=1e, em seguida, clicar no botão “Apply Changes” (Aplicar alterações).

Adding a Facebook group feed to your site using shortcode

Depois disso, basta publicar ou atualizar a página para tornar o feed do grupo ativo em seu site.

Outra opção é adicionar o feed a qualquer área preparada para widgets, como a barra lateral ou seção semelhante. Isso permite que os visitantes vejam o feed do grupo, independentemente de onde estejam em seu site.

Para começar, basta acessar Appearance ” Widgets no painel do WordPress e clicar no botão azul “+”.

Adding a social media widget to your WordPress website

Depois de fazer isso, comece a digitar “Feed personalizado do Facebook” na barra de pesquisa.

Quando o widget correto aparecer, arraste-o para o local onde você deseja exibir o feed.

The WordPress widget editor

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

Se esse não for seu feed de grupo do Facebook, digite o código do feed na caixa “Shortcode Settings” (Configurações de código curto). Em seguida, clique em “Apply Changes” (Aplicar alterações).

Adding a Facebook group feed to a widget-ready area

Agora você pode clicar no botão “Atualizar” para ativar o widget. Para obter mais informações, consulte nosso guia completo sobre como adicionar e usar widgets no WordPress.

Por fim, você pode incorporar o feed do grupo do Facebook em qualquer página, publicação ou área pronta para widget usando um shortcode.

Basta acessar Facebook Feed “ All Feeds e copiar todo o código na coluna “Shortcode”. Agora você pode adicionar esse código a qualquer bloco de shortcode.

Para obter mais informações, consulte nosso guia detalhado sobre como adicionar um shortcode no WordPress.

Observação: Se você estiver usando um tema habilitado para blocos, poderá usar o editor de site completo para adicionar o bloco “Custom Facebook Feed” em qualquer lugar do site.

Bônus: obtenha mais curtidas no Facebook usando o WordPress

Se você tiver uma página no Facebook para sua loja on-line ou empresa, desejará que os usuários a visitem e curtam seu conteúdo no Facebook para adicionar prova social e ganhar mais seguidores.

Uma maneira de fazer isso é adicionar o feed do Grupo do Facebook ao seu site. No entanto, você também pode adicionar um botão de curtir e compartilhar do Facebook ao lado das publicações do seu blog para incentivar os usuários a compartilhar seu conteúdo com os amigos.

Add social share buttons

Para aumentar ainda mais o número de seguidores no Facebook, você pode criar um fluxo de trabalho automatizado com o Uncanny Automator. Dessa forma, uma publicação no Facebook será ativada automaticamente toda vez que você publicar uma publicação em seu site.

Para obter detalhes, consulte nosso tutorial sobre como publicar automaticamente no Facebook a partir do WordPress.

Você também pode realizar brindes e concursos em seu grupo do Facebook, responder a comentários em suas publicações e até mesmo adicionar um calendário de eventos do Facebook em seu site.

Reply to Facebook comments

Isso ajudará a adicionar prova social e a aumentar o número de seguidores em seu grupo ou página do Facebook.

Para obter mais sugestões, consulte nosso guia para iniciantes sobre maneiras rápidas de obter mais curtidas no Facebook usando o WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um grupo do Facebook ao seu site WordPress. Talvez você também queira ver nossa folha de dicas de mídia social completa ou ver nossas escolhas de especialistas para os melhores plug-ins do Facebook para o seu blog.

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

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

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

Reader Interactions

12 ComentáriosDeixe uma resposta

  1. Klaus Juhl

    Can you add a private Facebook group to a website? Or does it have to be public?

    • WPBeginner Support

      Due to Facebook’s restrictions the group would need to be public.

      Administrador

  2. Jiří Vaněk

    Previously, I displayed Instagram and Twitter on my website. Eventually, through speed testing, I found out that it significantly slowed down the website loading because it fetched data from additional third-party servers. So, I moved the feeds from the right menu to their dedicated pages, linked separately, to prevent these feeds from being everywhere and slowing down the site. It’s essential to be cautious about this and measure speed. Additionally, I use Smash Baloon for feeds, and I’m satisfied with it.

  3. Matt

    Thanks guys, I’ve been waiting to do something like this for a while.

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Administrador

  4. Steph

    Can you add a private Facebook group to a website? Or does it have to be public?

  5. Chloe

    Question about the below tip from your article. How do I set my privacy settings to allow the app to access my photos? Is this a Facebook setting? Thanks!

    Tip: Are some photos or posts missing from your feed? This means those users have set their privacy settings to prevent apps from accessing some or all of their content.

    • WPBeginner Support

      Unless we hear otherwise, when setting up the plugin you are setting up your access.

      Administrador

  6. Amy

    i love that i can integrate my facebook group (not just Facebook pages) with my site!

    • WPBeginner Support

      Glad we could share how to do this :)

      Administrador

  7. TemidayoRiches

    Thanks for this. Can the same be done with a Facebook page

    • WPBeginner Support

      Yes, you should have the option to select a Facebook page as well

      Administrador

Deixe uma resposta

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