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 criar um feed personalizado do Facebook no WordPress

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

Deseja criar um feed personalizado do Facebook no WordPress?

Um feed personalizado permite que você mostre publicações da sua página ou grupo do Facebook no seu site WordPress. Isso pode tornar seu site mais envolvente e incentivar os visitantes a segui-lo no Facebook.

Neste artigo, mostraremos a você como criar facilmente um feed personalizado do Facebook no WordPress.

How to create a custom Facebook feed in WordPress

Por que criar um feed personalizado do Facebook no WordPress?

De acordo com nosso relatório de estatísticas de marketing, o Facebook tem mais de 2,9 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 o 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.

A custom Facebook feed in WordPress, created with Smash Balloon

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:

Etapa 1: Instale o plug-in de feed personalizado do Facebook do Smash Balloon

A melhor maneira de adicionar um feed personalizado do Facebook ao seu site WordPress é usar o plug-in Smash Balloon Custom Facebook Feed.

Esse plug-in permite que você exiba conteúdo e comentários do Facebook 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. 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”.

Adding a license key to Smash Balloon

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

Adding a Facebook social media feed to WordPress

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

How to add a Facebook timeline to your website

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

Adding your Facebook group or page as a source

Na próxima tela, escolha se deseja incorporar um feed de grupo do Facebook no WordPress ou criar um feed a partir de uma página do Facebook.

Em seguida, basta clicar em “Connect to Facebook”.

Connecting Smash Balloon to your Facebook group or page

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

Connecting Facebook and WordPress with Smash Balloon

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.

Giving WordPress access to your Facebook group or page

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

How to create a custom Facebook feed in WordPress

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

Using Facebook as a source for your custom feed

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.

Creating a new custom Facebook feed in WordPress

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.

Choosing a Smash Balloon template

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 maneiras de personalizar 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.

Editing your social media feed

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.

The Smash Balloon editor

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.

Choosing a layout for your custom Facebook feed

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

Creating a mobile-friendly layout for your website

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.

Previewing your website's mobile layout with Smash Balloon

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

Changing the number of columns in your social media feed

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.

Returning to the Smash Balloon customize screen

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.

Changing the color scheme of the social media feed

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.

Customizing the header layout with Smash Balloon

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

Removing the header from your custom Facebook feed

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 regular e em caixa, alterar a cor do plano de fundo, adicionar uma sombra de caixa e muito mais.

How to style your custom social media feed in WordPress

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

Adding a 'like' button to your Facebook feed

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

Customizing the Load More Button

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.

Changing the color scheme of your social media feed

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.

Saving your changes in Smash Balloon

Etapa 5: Adicione seu feed personalizado do Facebook ao WordPress

Para adicionar seu feed personalizado do Facebook ao WordPress, clique no botão “Incorporar” ao lado de “Salvar”.

Clicking the Embed button in the Smash Balloon Facebook Feed plugin

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.

Seeing the Embed Feed popup when creating a Facebook Feed using Smash Balloon

Agora, você terá que escolher uma página para inserir o feed do Facebook.

Basta selecionar um e clicar em “Adicionar”.

Choosing a page to embed the Facebook Feed to with Smash Balloon

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.

Adding the Facebook Feed in the block editor

Depois de fazer isso, vá em frente e selecione uma fonte de feed do Facebook.

Assim:

Choosing a Facebook feed source using the Smash Balloon block

Seu feed do Facebook deverá ser exibido.

Basta clicar em “Atualizar” para oficializar as alterações.

Updating the block editor after adding a Facebook feed using Smash Balloon

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

Adding a Smash Balloon Facebook Feed shortcode in the block editor

Dica bônus: como adicionar mais feeds de mídia social ao WordPress

Se você quiser incorporar publicações de status do Facebook no WordPress, mostrar sua linha do tempo, exibir álbuns do Facebook e muito mais, o plug-in Custom Facebook Feed é uma ótima opção.

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.

How to embed YouTube videos in WordPress

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 de fotos personalizado do Instagram e adicioná-lo a qualquer página, post ou área pronta para widget. Você pode até mesmo adicionar imagens compráveis do Instagram no WordPress.

An example of a shoppable Instagram image in 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 sobre como adicionar notificações push da Web ao seu site WordPress ou conferir nossa lista dos melhores plug-ins de prova social.

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

10 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Darknote says

    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!

  3. RickH says

    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…

  4. Anthony says

    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

  5. Shubha das says

    Thanks for sharing this post. Please let me know if free plugin are available for creating custom facebook feed.

    • melanie martins says

      Facebook feed by arrow is free, though i would love to see a tutorial to create my own facebook feed “plugin”

  6. Munna Hossain says

    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.

  7. Tracy TC says

    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!!

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.