Como Adicionar uma Caixa de Curtidas / Caixa de Fãs do Facebook no WordPress

Você trabalhou duro para construir seu público no Facebook, mas os visitantes do seu site não estão se conectando com sua página. Frustrante, não é?

Testamos várias maneiras de integrar o Facebook com o WordPress e descobrimos que uma simples Caixa de Curtir pode fazer uma diferença real no crescimento do seu público social.

Uma Caixa de Curtir do Facebook bem posicionada preenche a lacuna entre seu site e as mídias sociais, permitindo que os visitantes interajam com sua página do Facebook sem sair do seu site. É uma daquelas pequenas adições que podem ter um grande impacto em sua prova social.

Neste guia, mostraremos dois métodos diretos para adicionar uma Caixa de Curtir do Facebook ao seu site WordPress: uma abordagem com plugin de Caixa de Curtir do Facebook e uma solução de código.

Por que Adicionar uma Caixa de Curtir do Facebook no Seu Site WordPress?

Adicionar uma Caixa de Curtir do Facebook ao seu site WordPress tem algumas ótimas vantagens.

Primeiro, ajuda a engajar as pessoas, permitindo que elas curtam facilmente sua página de fãs ou página comercial do Facebook. Isso significa que suas postagens aparecerão no feed do Facebook delas, para que você possa continuar alcançando pessoas além do seu site.

Além disso, a Caixa de Curtir da página do Facebook mostra quantas pessoas curtiram sua página do Facebook. Isso pode funcionar como prova social e incentivar mais visitantes a clicar em 'Curtir'.

Este tutorial mostrará duas maneiras de adicionar uma Caixa de Curtir do Facebook: uma usando um plugin social e outra com código. Você pode usar os links rápidos abaixo para navegar em nosso artigo:

• Método 1: Usando um Plugin de Caixa de Curtidas do Facebook para WordPress (Ideal para Iniciantes)
• Method 2: Adding a Facebook Like Box With Code

Método 1: Usando um Plugin de Caixa de Curtidas do Facebook para WordPress (Ideal para Iniciantes)

Este primeiro método é a maneira mais fácil e recomendada para iniciantes adicionarem uma Caixa de Curtidas do Facebook em seus sites. Ele também permitirá que você exiba seu feed do Facebook em seu site, se desejar.

Este método usa o Smash Balloon, que é um plugin para WordPress fácil de usar que permite incorporar vários feeds de mídia social no WordPress, juntamente com uma Caixa de Curtidas.

Para este tutorial, você pode usar a versão gratuita do plugin Smash Balloon Social Post Feed. Mas se você quiser mais recursos além da Caixa de Curtidas (como exibir vídeos, fotos e eventos), recomendamos a atualização para a versão Pro.

Configurar o Plugin Smash Balloon Facebook Feed

Primeiro, você precisa instalar o plugin do WordPress na área administrativa. Depois disso, vá para Facebook Feed » Todos os Feeds e clique em ‘Adicionar Novo.’

Agora, selecione o tipo de feed ‘Timeline’.

Em seguida, basta clicar no botão ‘Próximo’.

Nesta etapa, você precisará conectar sua página do Facebook ao seu site WordPress.

O que você precisa fazer é clicar no botão ‘Adicionar Novo’.

O Smash Balloon o direcionará para uma nova tela.

Aqui, basta selecionar ‘Página’ para o tipo de origem e, em seguida, clicar em ‘Conectar ao Facebook’.

Agora, você precisa fazer login na sua conta do Facebook.

Depois disso, escolha para qual(is) página(s) você deseja exibir a Caixa de Curtidas em seu blog WordPress ou site. Em seguida, clique em ‘Próximo’.

Agora você verá as configurações de permissão do Smash Balloon. Recomendamos habilitá-las todas para garantir que tudo funcione bem.

Agora, prossiga e clique em ‘Concluído’.

O último pop-up simplesmente confirmará que você vinculou com sucesso o Smash Balloon ao Facebook.

Simplesmente clique em ‘OK’ para continuar.

O Smash Balloon agora irá redirecioná-lo para a área de administração, onde você precisará selecionar uma página do Facebook para usar em seu feed de linha do tempo.

Basta escolher uma página e clicar em ‘Adicionar’.

Agora você verá a página do Facebook que acabou de conectar como uma fonte na página do plugin Smash Balloon.

Simplesmente escolha essa opção e clique em ‘Próximo’.

Personalize a Caixa de Curtidas do Facebook

Nesta etapa, o Smash Balloon o levará ao editor de feed do Facebook.

O primeiro passo é clicar em ‘Layout do Feed’ acima da opção Esquema de Cores.

Simplesmente role para baixo até a seção ‘Número de Posts’.

Depois disso, defina o número para Desktop e Mobile como 0. Isso removerá a exibição de todos os seus posts recentes e fará com que o feed exiba apenas a Caixa de Curtidas.

Alternativamente, se você também quiser mostrar seu feed do Facebook junto com a Caixa de Curtidas, siga nosso tutorial sobre como criar um feed personalizado do Facebook no WordPress.

Agora, volte para cima.

Em seguida, clique em ‘Personalizar’ para retornar à página do editor de feed.

Nesta etapa, você pode remover o cabeçalho do seu feed do Facebook.

O que você precisa fazer é descer até a parte ‘Seções’ e selecionar ‘Cabeçalho’.

Esta configuração de Cabeçalho determina como será o cabeçalho do seu feed do Facebook.

Mas neste caso, você precisa ocultá-lo, então basta desativar o alternador ‘Ativar’.

Agora vamos voltar para a página principal do editor de feed e abrir a configuração ‘Caixa de Curtidas’. Depois disso, basta ativar o recurso ‘Caixa de Curtidas’.

Nesta página, você também pode ajustar o tamanho da Caixa de Curtidas, posição, exibição da foto de capa, largura personalizada, texto de chamada para ação personalizado, etc.

Assim que terminar, basta clicar no botão ‘Salvar’ no canto superior direito.

Incorpore a Caixa de Curtidas do Facebook em sua Página ou Post do WordPress

Nesta fase, você pode exibir a Caixa de Curtidas do Facebook em uma página ou em uma área pronta para widgets, como uma barra lateral.

Para fazer isso, clique em ‘Embed’ no canto superior direito. Agora, o pop-up Embed Feed aparecerá, oferecendo duas opções para exibir a Caixa de Curtidas.

Uma é usar um shortcode e a outra é adicioná-la diretamente a uma página ou a uma área pronta para widgets. A segunda opção é muito mais fácil, então mostraremos esse método primeiro.

Se você quiser adicionar a Caixa de Curtidas a uma página específica, clique no botão ‘Add to a Page’.

Agora, basta selecionar uma página para adicionar o recurso e clicar em ‘Add’.

Você chegará ao editor de blocos Gutenberg.

Prossiga e clique no botão ‘+ Add a Block’, conforme instruído pelo Smash Balloon.

Assim que a biblioteca de inserção de blocos for aberta, você precisará encontrar o bloco Facebook Feed.

Em seguida, simplesmente arraste e solte-o onde parecer melhor na página.

No bloco, selecione o feed do Facebook com a Caixa de Curtidas que você acabou de criar anteriormente.

O bloco exibirá então a Caixa de Curtidas.

Mas e se você tiver várias páginas do Facebook e configurou uma Caixa de Curtidas para cada uma usando o Smash Balloon?

Você também pode alternar entre elas na barra lateral de configurações do bloco, escolhendo um feed no menu suspenso ‘Selecionar um Feed’.

Tudo o que você precisa fazer agora é clicar no botão ‘Atualizar’ para oficializar as alterações.

Veja como nossa Caixa de Curtidas aparece em nosso site de demonstração:

Se você usa um tema WordPress de bloco, então você também pode usar o Editor de Site Completo para adicionar o bloco Caixa de Curtidas do Facebook aos modelos de página do seu tema.

Para mais informações sobre o Editor de Site Completo, leia nosso guia para iniciantes sobre Edição Completa de Site.

Incorpore o Widget Caixa de Curtidas do Facebook no WordPress

Se você usa um tema WordPress clássico, então você pode querer exibir a Caixa de Curtidas do Facebook em uma área pronta para widgets, como uma barra lateral, cabeçalho ou rodapé. É uma ótima maneira de mostrar a Caixa de Curtidas sem distrair os usuários do conteúdo principal da página.

No pop-up Incorporar Feed, selecione ‘Adicionar a um Widget’ para ir para o editor de widgets baseado em blocos.

Agora, como no método anterior, basta clicar no botão ‘+ Adicionar Bloco’, encontrar o bloco Feed do Facebook e arrastá-lo para a área desejada.

Em nosso site de demonstração, queremos usar a Caixa de Curtidas como um widget de barra lateral do WordPress.

No bloco, selecione o Feed do Facebook com a Caixa de Curtidas que você criou anteriormente.

Em seguida, clique em ‘Atualizar’ para tornar as alterações ao vivo.

E pronto!

Veja como a barra lateral em nosso site de teste fica com o widget Like Box:

Incorpore o Widget Facebook Like Box Com um Shortcode

Se os dois métodos anteriores não funcionarem, recomendamos adicionar o Facebook Like Box ou Fan Box usando um shortcode.

Simplesmente copie o shortcode do pop-up Embed Feed anterior e adicione-o em qualquer lugar do seu site.

Para mais informações sobre como usar shortcodes, você pode ler nosso guia sobre como adicionar shortcodes no WordPress.

Método 2: Adicionando um Facebook Like Box Com Código

Se você está apenas interessado em exibir um Facebook Fan Box ou Like Box sem adicionar outros tipos de feeds do Facebook, então usar um plugin de página do Facebook pode parecer exagero. Neste caso, você pode adicionar o Like Box usando código.

Este método pode parecer intimidante para iniciantes, mas mostraremos uma maneira infalível de inserir código usando WPCode. É um plugin do WordPress que facilita a adição de trechos de código personalizados ao WordPress sem quebrar seu site.

Para este guia, a versão gratuita do WPCode é suficiente, embora você possa fazer upgrade para a versão Pro para recursos avançados como modo de teste e uma biblioteca de trechos de código baseada em nuvem.

Primeiro, vamos instalar o plugin no WordPress. Assim que estiver ativo, vá para Code Snippets » + Add Snippet. Em seguida, selecione ‘Add Your Custom Code (New Snippet)’ e clique em ‘+ Add Custom Snippet’.

Agora você chegará ao editor de código. Vamos dar um nome ao seu trecho de código personalizado primeiro para que você possa identificá-lo facilmente mais tarde. Para este, vamos chamá-lo de ‘Facebook JavaScript SDK’, porque é isso que adicionaremos aqui.

Agora, mantenha esta aba aberta e crie uma nova aba no seu navegador para ir para a página de Desenvolvedores do Facebook.

No menu, clique em ‘Log In’ para fazer login na sua conta do Facebook.

Se esta for a sua primeira vez acessando a página, complete o assistente de integração para criar uma conta gratuita.

Em seguida, você será direcionado para o painel de Desenvolvedores do Facebook. Vamos clicar no botão ‘Create App’.

Na próxima página, selecione apenas ‘Outro’ para o caso de uso.

Depois disso, clique no botão ‘Próximo’.

Agora, você verá todos os diferentes aplicativos que pode criar para sua página do Facebook.

Para criar uma Caixa de Curtidas, você pode simplesmente selecionar ‘Negócios’ e, em seguida, clicar em ‘Próximo’.

Vamos agora dar um nome ao seu aplicativo. Pode ser qualquer coisa que você goste, já que isso é apenas para referência. Você também pode inserir seu endereço de e-mail e selecionar uma Conta Comercial opcional.

Finalmente, clique em ‘Criar aplicativo’.

Vamos agora para a página do Facebook Developers para plugins sociais.

Em seguida, role para baixo até encontrar uma seção como na captura de tela abaixo:

Aqui, certifique-se de preencher a URL da sua página do Facebook, esvazie o campo ‘Guias’ e especifique a largura e a altura da Caixa de Curtidas, se necessário.

Você também pode optar por usar um cabeçalho menor, desativar a foto de capa e muito mais. Também escolhemos adaptar a Caixa de Curtidas para caber na largura do contêiner, de modo que o tamanho se ajuste responsivamente ao local onde é colocado no site.

Concluído, clique no botão ‘Obter Código’. Você verá um pop-up que mostra dois tipos de trechos de código: SDK JavaScript e iFrame. Ambos exibirão sua Caixa de Curtidas, mas, em geral, o SDK JavaScript é uma opção muito melhor.

Os SDKs JavaScript geralmente são mais rápidos porque são incorporados diretamente na página da web, permitindo que carreguem como parte do documento principal. Os iFrames exigem o carregamento de um documento HTML inteiro, o que pode desacelerar o tempo de carregamento da página.

Na aba JavaScript SDK, certifique-se de que o nome do aplicativo que você criou anteriormente foi selecionado.

Em seguida, copie o código da API do JavaScript SDK da Etapa 2. Agora, mantenha esta aba aberta, mas mude para a aba WPCode e cole o código lá.

Você pode deixar o Tipo de Código como ‘Snippet HTML’.

Agora, role para baixo até a seção ‘Inserção’.

O Método de Inserção pode ser deixado como ‘Inserção Automática’, enquanto a Localização deve ser alterada para ‘Corpo do Site Inteiro’.

Finalmente, ative o código e clique em ‘Salvar Snippet’.

Em seguida, você criará um segundo snippet de código. Você pode seguir os mesmos passos anteriores e chamá-lo de algo como ‘Caixa de Curtidas do Facebook’.

Depois disso, mude para a página do Facebook Developers para plugins sociais de antes e copie o código da Etapa 3.

Navegue até a aba WPCode novamente e cole o código da Etapa 3 na caixa de Visualização do Código. O Tipo de Código pode ser ‘Snippet HTML’.

Vamos rolar para baixo até a seção ‘Inserção’.

Se você usar ‘Inserção Automática’, poderá fazer com que a Caixa de Curtidas apareça automaticamente em vários locais que se encaixam na categoria de Localização.

Em nosso exemplo, decidimos escolher a localização ‘Rodapé do Site Inteiro’, o que significa que a Caixa de Curtidas aparecerá no rodapé.

Existem outras opções também, como Inserir Antes do Post, para exibir a Caixa de Curtidas antes de todos os seus posts de blog do WordPress.

Por outro lado, o método ‘Shortcode’ permite que você crie um shortcode personalizado.

Você pode então adicioná-lo a partes específicas do seu site usando o bloco de shortcode.

Depois de configurar as configurações de Inserção, basta ativar o código e clicar em ‘Salvar Snippet’.

É isso! Você pode então visitar seu site para ver como a Caixa de Curtidas fica:

Para mais guias sobre como exibir feeds sociais em seu site WordPress, confira nosso artigo sobre adicionar feeds de mídia social no WordPress.

Bônus: Mais Maneiras de Integrar o Facebook com o WordPress

Quer levar sua integração com o Facebook para o próximo nível? Confira estes guias adicionais:

• Como Criar um Popup de Caixa de Curtidas do Facebook no WordPress – Aumente o engajamento com um popup de Caixa de Curtidas estrategicamente programado.
• Como incorporar postagens de status do Facebook no WordPress – Compartilhe atualizações específicas do Facebook diretamente em seu site.
• Como incorporar um feed de grupo do Facebook no WordPress – Exiba as discussões da sua comunidade em seu site.
• Como exibir avaliações da sua página do Facebook no WordPress – Mostre prova social com avaliações de clientes do Facebook.
• Maneiras rápidas de obter mais curtidas no Facebook usando o WordPress – Implemente essas estratégias para aumentar seu número de seguidores no Facebook.
• Como exibir Twitter e Facebook dos autores na página de perfil – Conecte seus leitores com seus colaboradores nas redes sociais.
• Como adicionar reações de curtida do Facebook às suas postagens do WordPress – Traga o popular recurso de reações do Facebook para suas postagens de blog.
• Como Criar uma Landing Page para Anúncios do Facebook no WordPress – Crie landing pages de alta conversão para suas campanhas de anúncios do Facebook.
• Como Postar Automaticamente no Facebook a Partir do WordPress – Otimize sua estratégia de mídia social com postagens automáticas.

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma Caixa de Curtidas ou Caixa de Fãs do Facebook no WordPress. Você também pode querer conferir nossa planilha definitiva de mídia social e lista dos melhores plugins de mídia social para WordPress.

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