Ao criar sites, às vezes gostamos de adicionar o feed do Facebook da marca a uma de suas páginas. Isso permite que os visitantes vejam as últimas atualizações, anúncios e interações da comunidade sem sair do site.
Embora existam métodos manuais, eles não são os mais eficientes para a exibição de conteúdo do Facebook.
Muitos de nossos leitores perguntaram sobre esse recurso e, depois de explorar várias opções, optamos pelo Smash Balloon para nossos feeds personalizados do Facebook. Ele é fácil de usar, repleto de recursos e adequado para usuários do WordPress de todos os níveis.
Neste guia, vamos orientá-lo na criação de um feed personalizado do Facebook no WordPress usando nosso método testado e aprovado.
Por que criar um feed personalizado do Facebook no WordPress?
De acordo com nosso relatório de estatísticas de mídia social, o Facebook tem mais de 3 bilhões de usuários ativos mensais. Isso o torna o maior site de mídia social do mundo. Como proprietário de um site, você já deve ter criado uma página ou um grupo no Facebook para interagir com seu público.
No entanto, as pessoas que apenas visitam seu site não verão suas publicações no Facebook. Ao adicionar um feed personalizado do Facebook, você pode mostrar aos visitantes o que está acontecendo em seu grupo ou página.
Isso pode tornar seu site mais envolvente e interessante, especialmente se você publicar conteúdo multimídia no Facebook, como vídeos e imagens.
Também é uma ótima maneira de promover sua página ou grupo do Facebook, o que o ajudará a obter mais curtidas no Facebook e a aumentar o número de seguidores.
Dito isso, vamos ver como adicionar um feed personalizado do Facebook ao seu site WordPress.org. Você pode usar os links rápidos abaixo para navegar neste guia passo a passo:
- Step 1: Install the Smash Balloon Custom Facebook Feed Plugin
- Step 2: Connect Your Facebook Page or Group to WordPress
- Step 3: Create a Custom Facebook Feed in WordPress
- Step 4: Customize Your Facebook Feed
- Step 5: Add Your Custom Facebook Feed to WordPress
- Bonus Tip: How to Add More Social Media Feeds to WordPress
Etapa 1: Instale o plug-in de feed personalizado do Facebook do Smash Balloon
A melhor maneira, e a mais fácil para iniciantes, de adicionar um feed personalizado do Facebook ao seu site WordPress é usar o plug-in Smash Balloon Custom Facebook Feed.
Esse plug-in do Facebook permite que você exiba seu conteúdo e comentários diretamente em seu site e até mesmo combine publicações de vários feeds do Facebook. Ele também facilita a exibição de provas sociais poderosas ao incorporar avaliações do Facebook e publicações da comunidade em seu site.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in Smash Balloon Custom Facebook Feed Pro. Para obter mais detalhes, consulte nosso guia sobre como instalar um plug-in do WordPress.
Nesta postagem, usaremos a versão profissional do Smash Balloon, pois ela permite que você mostre vídeos e fotos no feed do Facebook, escolha layouts diferentes, filtre o feed com base no tipo de postagem e muito mais.
No entanto, há também uma versão gratuita que permite criar um feed personalizado do Facebook para o WordPress, independentemente do seu orçamento.
Após a ativação, você precisará ir para Facebook Feed ” Settings e inserir sua chave de licença no campo “License Key”.
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).
Etapa 2: Conecte sua página ou grupo do Facebook ao WordPress
O Smash Balloon Custom Facebook Feed permite que você crie vários feeds de diferentes páginas e grupos do Facebook. Você pode até mesmo mesclar feeds para criar um feed personalizado.
Para criar seu primeiro feed, vá para Facebook Feed ” Todos os feeds e clique em “Adicionar novo”.
O Smash Balloon permite que você exiba álbuns do Facebook, publicações da sua linha do tempo, vídeos, eventos e muito mais. Para este guia, criaremos um feed do Facebook “Timeline”, mas você pode selecionar qualquer tipo de feed que desejar.
Depois de escolher um tipo de feed, clique no botão “Next” (Avançar).
Agora, você precisa selecionar a página ou o grupo do Facebook de onde obterá o conteúdo.
Para começar, clique em “Add New” (Adicionar novo).
Na próxima tela, escolha se deseja incorporar um feed de grupo do Facebook no WordPress ou criar um feed de página do Facebook.
Em seguida, basta clicar em “Connect to Facebook”.
Isso abre uma janela pop-up na qual você pode fazer login na sua conta do Facebook e escolher as páginas ou os grupos que deseja usar no seu feed.
Depois de fazer sua seleção, clique no botão “Next” (Avançar).
Depois de fazer isso, o Facebook mostrará todas as informações às quais o Smash Balloon terá acesso e as ações que ele pode executar.
Para restringir o acesso do Smash Balloon à sua conta do Facebook, basta clicar em qualquer um dos botões para mudá-los de “Sim” para “Não”. Esteja ciente de que isso pode afetar o conteúdo que pode ser exibido no feed de mídia social.
Com isso em mente, recomendamos deixar todos esses switches ativados.
Quando estiver pronto, clique em “Concluído”.
Após alguns instantes, você verá uma mensagem informando que o site do WordPress foi vinculado com êxito ao Facebook. Agora você pode clicar em “OK”.
Feito isso, o Smash Balloon o levará de volta ao painel do WordPress automaticamente.
Etapa 3: Criar um feed personalizado do Facebook no WordPress
Agora você verá uma janela pop-up com o grupo ou a página que acabou de vincular ao seu site do WordPress. Basta selecionar o botão de opção ao lado de sua fonte e clicar no botão “Add” (Adicionar).
Se você fechou o pop-up acidentalmente, não entre em pânico. Você pode simplesmente atualizar a guia para reabrir o pop-up.
Depois de fazer isso, você voltará à página Feed do Facebook ” Todos os feeds.
Assim como antes, clique no botão “Add New” (Adicionar novo) e escolha o tipo de feed personalizado do Facebook que você deseja criar, como Timeline (Linha do tempo), Photos (Fotos) ou Videos (Vídeos).
Em seguida, clique em “Next” (Avançar). Agora, em “Select a Source” (Selecionar uma fonte), você verá seu grupo ou página do Facebook como uma opção.
Selecione a página ou o grupo e clique em “Next” (Avançar).
Agora você pode escolher o modelo que deseja usar como ponto de partida para o seu feed. Todos esses modelos são totalmente personalizáveis, portanto, você pode ajustá-los para que se adaptem perfeitamente ao seu blog ou site do WordPress.
Usaremos o modelo “Default” (Padrão), mas você pode usar qualquer modelo que desejar.
Depois de escolher um design, clique no botão “Next” (Avançar).
O Smash Balloon agora criará um feed do Facebook com base em sua fonte e no modelo escolhido. Esse é um ótimo começo, mas talvez você queira ajustar a forma como esse feed aparece em seu site.
Etapa 4: Personalize seu feed do Facebook
O plug-in Smash Balloon Custom Facebook Feed oferece muitas opções de personalização para editar seu feed. Com isso em mente, vale a pena ver as alterações que você pode fazer.
Na tela Feed do Facebook ” Todos os feeds, localize o feed que acabou de criar e clique no botão “Editar”, que se parece com um pequeno lápis.
Isso abre o editor de feed, que mostra uma visualização de como o feed personalizado do Facebook será exibido em seu site. Aqui, você pode ver todos os vídeos incorporados do Facebook, atualizações de status e outros conteúdos que serão exibidos em seu site do WordPress.
No lado esquerdo, você verá todas as diferentes configurações que pode usar para personalizar o feed. A maioria dessas configurações é autoexplicativa, mas abordaremos rapidamente algumas áreas importantes.
Para começar, você pode alterar a forma como suas postagens são exibidas clicando em “Feed Layout”.
Nessa tela, você pode alternar entre diferentes layouts e alterar a altura do feed. Você pode até mesmo criar um controle deslizante responsivo selecionando o layout “Carousel”.
À medida que você fizer alterações, a visualização será atualizada automaticamente, de modo que você possa experimentar configurações diferentes para ver o que funciona melhor para o seu site.
Por padrão, o feed mostrará o mesmo número de publicações em computadores desktop e dispositivos móveis, como smartphones.
No entanto, os dispositivos móveis geralmente têm telas menores e menos poder de processamento, portanto, talvez seja melhor mostrar menos publicações em tablets e smartphones. Para fazer isso, basta digitar um número diferente no campo “Mobile” em “Number of Posts”.
Você pode visualizar como suas alterações ficarão em computadores desktop, tablets e smartphones usando a linha de botões no canto superior direito.
Ao experimentar diferentes layouts, você pode criar um feed personalizado com ótima aparência, independentemente do dispositivo que o visitante estiver usando.
Por padrão, o feed do Facebook mostra menos colunas em smartphones e tablets em comparação com computadores desktop. Isso ajuda todo o seu conteúdo a se ajustar confortavelmente em telas menores.
No entanto, depois de testar a versão móvel do seu site WordPress, talvez você não esteja satisfeito com a aparência das colunas em smartphones e tablets. Se esse for o caso, você poderá ajustar as colunas alterando os números na seção “Colunas”.
Quando estiver satisfeito com as alterações feitas, clique no link “Customize” (Personalizar) na parte superior do menu.
Isso o levará de volta ao editor principal do Smash Balloon.
Em seguida, você pode clicar em “Color Scheme” (Esquema de cores) no menu à esquerda e dar uma olhada nas diferentes cores que podem ser adicionadas ao feed do Facebook.
Por padrão, o Smash Balloon usa um esquema de cores herdado do seu tema do WordPress, mas você também pode escolher “Claro” ou “Escuro” ou até mesmo criar seu próprio esquema de cores personalizado.
Por exemplo, você pode alterar a cor do texto para que ele se destaque do plano de fundo do seu tema.
Por padrão, o Smash Balloon adiciona um cabeçalho ao seu feed, que é a foto do seu perfil do Facebook e o nome da sua página ou grupo. Isso pode adicionar algum contexto extra, em vez de simplesmente exibir sua linha do tempo do Facebook no WordPress.
Para alterar a aparência, clique em “Header” (Cabeçalho) no menu à esquerda.
Nessa tela, você pode alterar o tamanho e a cor do cabeçalho, ocultar ou exibir a foto do seu perfil do Facebook e muito mais.
Se você quiser remover o cabeçalho completamente, clique no botão de alternância para mudá-lo de azul (ativado) para cinza (desativado).
A seguir, a tela “Posts”. Aqui, você pode alterar a aparência das publicações individuais dentro do feed personalizado do Facebook.
Por exemplo, você pode alternar entre os estilos normal e em caixa, alterar a cor do plano de fundo, adicionar uma sombra de caixa e muito mais.
Por padrão, o Smash Balloon não inclui o botão “curtir” do Facebook em seu feed.
Para incentivar mais visitantes a seguir sua página do Facebook, adicione esse botão selecionando “Like Box” no menu esquerdo do editor.
Depois disso, basta clicar no botão “Enable” (Ativar) para que ele fique azul. Agora, se você rolar até a parte inferior da visualização, verá um botão “Curtir”.
Você pode estilizar essa área usando configurações diferentes. Por exemplo, você pode escolher se o botão aparecerá na parte superior ou inferior do feed e se incluirá a foto de capa da sua página do Facebook.
Quando estiver satisfeito com a aparência do botão “Curtir”, você poderá passar para a tela “Carregar mais botões”.
O botão “Carregar mais” incentiva os visitantes a percorrerem mais do seu feed do Facebook.
Por esse motivo, talvez você queira tornar o botão mais atraente alterando a cor do plano de fundo, a cor do texto e o rótulo.
Outra opção é remover completamente o botão “Load More” clicando no botão de alternância “Enable” para que ele fique cinza.
A desativação do botão “Carregar mais” é útil se o seu feed do Facebook for sensível ao tempo. Por exemplo, se você publica principalmente sobre o calendário de eventos do Facebook, os visitantes talvez não precisem percorrer as publicações anteriores, pois elas não são mais relevantes.
Quando estiver satisfeito com a configuração do feed personalizado do Facebook, não se esqueça de clicar em “Save” (Salvar) para armazenar as alterações.
Agora você está pronto para adicionar o feed do Facebook ao seu site WordPress.
Etapa 5: Adicione seu feed personalizado do Facebook ao WordPress
Para incorporar os feeds do Facebook ao WordPress, clique no botão “Incorporar” ao lado de “Salvar”.
Agora você verá duas opções para adicionar seu feed do Facebook: shortcode ou bloco.
Em nossa experiência, é mais fácil inserir seu feed do Facebook usando um bloco. Para fazer isso, você pode clicar em “Adicionar a uma página” ou “Adicionar a um widget” se o seu tema tiver uma área pronta para widgets.
Nosso guia usará o botão Add to a Page (Adicionar a uma página) para fins de exemplo.
Agora, você terá que escolher uma página para inserir o feed do Facebook.
Basta selecionar um e clicar em “Adicionar”.
Você será redirecionado para o editor de blocos. Depois disso, basta clicar no botão “+ Add block” e procurar o bloco Facebook Feed.
Nesse estágio, você pode simplesmente arrastar e soltar onde achar melhor.
Depois de fazer isso, vá em frente e selecione uma fonte de feed do Facebook.
Assim:
Seu feed do Facebook deverá ser exibido.
Basta clicar em “Atualizar” para oficializar as alterações.
Se quiser usar o método de shortcode, você poderá copiar o shortcode do pop-up Embed Feed anteriormente.
Em seguida, basta colar o shortcode em um bloco de shortcode no editor de conteúdo ao editar uma página, publicação ou widget do WordPress. Depois disso, clique em “Atualizar”.
Para obter mais informações sobre como colocar o shortcode, consulte nosso guia sobre como adicionar um shortcode no WordPress.
Dica bônus: como adicionar mais feeds de mídia social ao WordPress
Se você deseja incorporar publicações de status do Facebook no WordPress, mostrar sua linha do tempo, exibir álbuns do Facebook e muito mais, o Custom Facebook Feed é o melhor plug-in para WordPress para isso.
No entanto, muitos sites têm várias contas de mídia social, como um canal no YouTube, um perfil no Twitter e uma conta no Instagram. Se você criar conteúdo exclusivo para cada plataforma, faz sentido mostrar esse conteúdo em seu site WordPress.
Você pode exibir os vídeos mais recentes do seu canal do YouTube no WordPress usando o plug-in gratuito Smash Balloon Feeds for YouTube.
Com mais de 1 bilhão de usuários ativos por mês, o Instagram é um ótimo lugar para promover seus produtos, serviços e publicações de blog.
Se você tiver uma conta no Instagram, poderá criar um feed personalizado do Instagram e adicioná-lo a qualquer página da Web, publicação ou área pronta para widget. Você pode até mesmo adicionar imagens compráveis do Instagram no WordPress.
Esperamos que este artigo tenha ajudado você a adicionar um feed personalizado do Facebook no WordPress. Talvez você também queira ver nosso guia definitivo de comércio social para usuários do WordPress e nosso artigo sobre como publicar automaticamente no Facebook por meio do WordPress.
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.
Mike S
Can you cover how to automatically copy posts to 2 FB pages?
Darknote
Hi,
Putting the page ID does not work, you will get on debug, it is indicated in error
developers.facebook.com/tools/debug/
You absolutely have to create a Facebook apps, the only good method!
RickH
Any plugin that will grab a FB ‘status’ from a personal (publicly visible) FB account into a separate post? So that each new status will create a new post?
Thanks…
Anthony
Thanks for this article. Have tried and success but i use this tool to find facebook ID, it can find group id and page id too
Shubha das
Thanks for sharing this post. Please let me know if free plugin are available for creating custom facebook feed.
melanie martins
Facebook feed by arrow is free, though i would love to see a tutorial to create my own facebook feed “plugin”
Munna Hossain
Great sharing. I am new in WordPress. I don’t know everything about WordPress. Your article will help to create custom facebook feed in my WordPress site. Thank you for sharing such an informative article.
WPBeginner Support
Glad you found it helpful
Administrador
Tracy TC
Do you recognize the feed on the homepage of I like the fact that it includes thumbnail pictures from each post. I find that more visually interesting than showing my logo over and over in the feed. I don’t control that area of the website (although I do know that it is WP) and the host has no interest in sharing which plugin is used.
Thank you!!