Como Adicionar o Botão Curtir do Facebook no WordPress

Uma verdade simples sobre sites WordPress de sucesso: facilitar o engajamento dos visitantes com seu conteúdo é fundamental para o crescimento. No entanto, muitos proprietários de sites negligenciam algo tão simples quanto adicionar um botão Curtir do Facebook.

Embora possa parecer uma pequena adição, é na verdade uma das ferramentas mais poderosas para expandir seu alcance. Mais curtidas significam mais visibilidade, o que geralmente leva a mais tráfego e potenciais clientes.

Felizmente, adicionar um ao seu site WordPress é mais fácil do que você imagina! Experimentamos diferentes métodos de integração do Facebook e encontramos alguns que funcionam excepcionalmente bem.

Neste tutorial, mostraremos como adicionar um botão Curtir do Facebook no WordPress. Compartilharemos as melhores abordagens que testamos, para que você possa começar a alavancar o engajamento social para crescer seu site WordPress. 📈

Como adicionar botão de curtir do Facebook no WordPress

Por que Adicionar um Botão Curtir do Facebook no WordPress?

O Facebook é uma das plataformas de mídia social mais populares do mundo. Muitas empresas usam o Facebook para se conectar com seus clientes e promover seus produtos.

Adicionar um botão Curtir do Facebook ao seu site WordPress pode ajudar a gerar mais engajamento. Também incentiva as pessoas a compartilhar seu conteúdo em seus perfis do Facebook e atrair novos usuários para o seu site.

Você pode usar o botão Curtir do Facebook para aumentar seus seguidores sociais e construir uma comunidade. Isso ajuda a aumentar a conscientização sobre seus produtos e serviços e aumenta as conversões.

Com isso em mente, mostraremos como adicionar um botão Curtir do Facebook ao seu site WordPress. Aqui está uma visão geral rápida dos métodos que abordaremos neste guia:

Pronto? Vamos ver como adicionar um botão Curtir do Facebook no WordPress usando um plugin ou código personalizado.

Método 1: Adicionar um Botão Curtir do Facebook no WordPress Usando um Plugin

Neste método, usaremos um plugin do WordPress para adicionar um botão Curtir do Facebook. Este método é muito fácil e recomendado para iniciantes.

A primeira coisa que você precisa fazer é instalar e ativar o Curtir e Compartilhar da BestWebSoft. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você pode ir para Curtir e Compartilhar » Configurações no seu painel de administração do WordPress.

Configurações do plugin Curtir e Compartilhar

Em seguida, você precisará adicionar um 'ID de Aplicativo' e um 'Segredo do Aplicativo' do Facebook. Se você não tiver essas informações, basta seguir os passos abaixo.

Como Criar um ID de Aplicativo e um Segredo do Aplicativo do Facebook

No painel ‘Configurações’, clique no link ‘Criar um novo’ abaixo do campo ‘ID do aplicativo’ ou ‘Segredo do aplicativo’ no plugin Like & Share.

Isso o levará ao site Meta for Developers. Sugerimos abrir o site em uma nova aba ou janela, pois você precisará abrir a página de configurações do Like & Share em sua área de administração do WordPress para inserir o ID e o segredo do aplicativo.

A partir daqui, você precisará selecionar um tipo de aplicativo. Escolha ‘Negócios’ como tipo de aplicativo e clique no botão ‘Próximo’.

Escolha o tipo do seu aplicativo

Em seguida, você precisará fornecer informações básicas sobre seu aplicativo.

Você pode inserir um nome de exibição para seu aplicativo e certifique-se de que o endereço de e-mail correto apareça no campo ‘E-mail de contato do aplicativo’. O Facebook selecionará automaticamente o endereço de e-mail da conta na qual você está conectado no momento.

Há também uma opção para escolher uma conta empresarial. Você pode deixar em ‘Nenhuma conta do Gerenciador de Negócios selecionada’ e clicar no botão ‘Criar aplicativo’.

Insira as informações básicas do aplicativo

Em seguida, uma janela pop-up aparecerá. Aqui, o Facebook pedirá para você digitar sua senha novamente.

Esta é uma medida de segurança para prevenir atividades maliciosas em sua conta. Digite a senha da sua conta do Facebook e clique no botão ‘Enviar’.

Reinsira sua senha do Facebook

Depois disso, você verá o painel do seu aplicativo.

A partir daqui, você pode ir para Configurações » Básico no menu à sua esquerda.

Vá para a página de configurações básicas

Agora, você vai querer expandir o menu suspenso ‘Configurações’ e clicar em ‘Básico’.

Aqui, você verá o ‘ID do aplicativo’ e o ‘Segredo do aplicativo’.

Agora você pode inserir essas informações nas configurações do plugin Like & Share.

Copie o ID e o segredo do aplicativo

Finalize a Personalização do Seu Botão de Curtir do Facebook

Primeiro, você vai querer copiar o ‘ID do aplicativo’ e voltar para a aba ou janela onde você tem a página Like & Share » Configurações aberta. Em seguida, simplesmente insira o ‘ID do aplicativo’ no campo correspondente.

Agora, você vai querer repetir o passo copiando os dados do ‘Segredo do aplicativo’ da página Meta for Developers e colando-os nas configurações do plugin Like & Share.

Personalize seu botão de curtir do Facebook

Depois de fazer isso, você pode escolher se deseja mostrar o botão Curtir do Facebook junto com o URL do Perfil e os botões de Compartilhar.

Há também configurações para editar o tamanho do botão Curtir do Facebook, sua posição antes ou depois do conteúdo e o alinhamento.

Mais opções de personalização

Se você habilitou o botão URL do Perfil, então pode rolar para baixo até a seção ‘Botão URL do Perfil’ e inserir seu nome de usuário ou ID do Facebook.

Quando terminar, não se esqueça de salvar suas alterações.

Agora, o plugin adicionará automaticamente um botão Curtir do Facebook ao seu site WordPress e o posicionará com base nas suas configurações.

Você também pode usar o shortcode [fb_button] para adicionar o botão Curtir do Facebook em qualquer lugar do seu site.

É só isso! Agora você pode visitar seu site e ver o botão Curtir em cada postagem.

Prévia do botão de curtir do Facebook

Método 2: Adicionar Manualmente um Botão Curtir do Facebook no WordPress

Outra maneira de adicionar um botão Curtir do Facebook é usando código personalizado. No entanto, este método requer a adição de código diretamente no WordPress, então recomendamos apenas para aqueles que se sentem confortáveis com a edição de código.

Nesta seção, vamos usar o plugin WPCode, pois ele simplifica para qualquer pessoa adicionar código ao seu blog WordPress.

Mas primeiro, você precisará visitar a página ‘Botão Curtir’ no site Meta for Developers e rolar para baixo até a seção ‘Configurador do Botão Curtir’.

Obtenha o código do site do desenvolvedor do Facebook

Em seguida, insira a URL da sua página do Facebook no campo ‘URL para Curtir’. Isso conectará o botão Curtir do Facebook à sua página.

Depois disso, basta usar a configuração para escolher o layout e o tamanho do botão Curtir. Você também terá uma prévia do botão Curtir.

Uma vez satisfeito com a prévia, clique no botão ‘Obter Código’. Isso abrirá uma janela pop-up que mostra dois trechos de código na aba ‘JavaScript SDK’.

Copie o código SDK

Por favor, note que adicionar diretamente esses trechos de código ao seu tema WordPress pode quebrar seu site. Além disso, eles serão substituídos quando você atualizar o tema.

É por isso que recomendamos o uso do plugin WPCode. Este plugin permite que você cole trechos de código em seu site e gerencie facilmente códigos personalizados sem editar os arquivos do seu tema. Isso ajuda você a evitar o risco de quebrar seu site WordPress.

Página inicial do WPCode

Além disso, confiamos no WPCode em todos os sites da nossa marca para lidar com personalizações de forma suave e eficiente. Para mais informações sobre nossa experiência com ele, você pode conferir nossa análise completa do WPCode.

Para começar, você precisará instalar e ativar o plugin gratuito WPCode. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.

📝 Observação: A versão gratuita do WPCode permite adicionar snippets de código personalizados, que é o que usaremos aqui. No entanto, a atualização para o WPCode Pro desbloqueia recursos adicionais, como histórico completo de revisões e a capacidade de agendar seu código.

Após a ativação, você pode acessar Code Snippets » Header and Footer no seu painel do WordPress.

Em seguida, você precisará copiar o primeiro snippet de código e adicioná-lo ao arquivo header.php do seu tema WordPress, logo após a tag <body>. Simplesmente copie o código e insira-o na seção 'Body'.

Após concluir este processo, não se esqueça de clicar no botão ‘Salvar Alterações’.

Adicione o primeiro código à seção do cabeçalho

Em seguida, você precisará copiar o segundo trecho de código e colá-lo em seu site WordPress para exibir o botão Curtir do Facebook.

Para fazer isso, você pode ir em Code Snippets » + Add Snippet no seu painel de administração do WordPress. Ou, simplesmente clique no botão ‘Add New’ no painel do WPCode.

Clique em 'Adicionar Novo Snippet' no WPCode

Na próxima tela, o WPCode permitirá que você selecione um snippet da biblioteca pré-construída ou adicione um novo código personalizado.

Vá em frente e escolha a opção ‘Add Your Custom Code (New Snippet)’ e clique no botão ‘Use snippet’.

Adicionar código personalizado no WPCode

Depois disso, você pode dar um nome ao seu código personalizado e inserir o segundo trecho de código na seção ‘Code Preview’.

Certifique-se de clicar no menu suspenso ‘Code Type’ e selecionar ‘HTML Snippet’ como o tipo de código.

Insira o segundo código e selecione o tipo de código

Em seguida, você pode rolar para baixo até a seção ‘Insertion’ e selecionar onde você gostaria que o botão Curtir do Facebook aparecesse.

Por exemplo, digamos que você queira que ele apareça antes do conteúdo.

Simplesmente clique no menu suspenso ‘Location’ e escolha a opção ‘Insert Before Content’ em ‘Page, Post, Custom Post Types.’

Selecione a localização do botão de curtir

Quando terminar, você pode clicar no botão ‘Save Snippet’.

Você também terá que clicar no alternador e mudá-lo de ‘Inactive’ para ‘Active.’

Salvar e ativar o snippet de código WPCode

É isso. Um botão Curtir do Facebook aparecerá em seu site depois que você inserir o código.

Dica Bônus: O que é Metadados Open Graph e Como Adicioná-los ao WordPress?

Open Graph são metadados que ajudam o Facebook a coletar informações sobre uma página ou postagem em seu site WordPress. Esses dados incluem uma imagem em miniatura, título da postagem/página, descrição e autor.

O Facebook é bastante inteligente em extrair os campos de título e descrição. No entanto, se sua postagem tiver mais de uma imagem, ele poderá, às vezes, mostrar uma miniatura incorreta ao ser compartilhada.

Se você já estiver usando o plugin All in One SEO (AIOSEO), isso pode ser facilmente corrigido.

Na WPBeginner, nós mesmos usamos o plugin AIOSEO para gerenciar as configurações do OpenGraph para Facebook e X, entre outros esforços de SEO. Somos grandes fãs dele, e você pode ver nossa extensa análise do AIOSEO para mais detalhes.

Para fazer isso, você pode primeiro ir para All in One SEO » Social Networks e mudar para a aba Facebook.

Em seguida, clique no botão ‘Upload or Select Image’ para definir uma ‘Default Post Facebook Image’ se o seu artigo não tiver uma imagem open graph.

Envie a imagem padrão do Facebook

Além disso, você também pode configurar uma imagem open graph para cada postagem ou página individual.

Ao editar uma postagem, basta rolar para baixo até a seção AIOSEO Settings no editor de conteúdo. Em seguida, você pode mudar para a aba ‘Social’ e ver uma prévia da sua miniatura.

Aba Social do AIOSEO

Agora, você vai querer rolar para baixo até a opção ‘Image Source’. Em seguida, prossiga e escolha uma imagem open graph para sua postagem.

Por exemplo, você pode selecionar ‘Attached Image’, ‘First Image in Content’ ou ‘Custom Image’ para ser usada como uma miniatura open graph.

Fonte da imagem para open graph

Para mais detalhes e outras formas de adicionar metadados Open Graph, sinta-se à vontade para consultar nosso guia sobre como adicionar metadados Facebook Open Graph no WordPress.

Recursos Bônus: Mais Guias de Mídias Sociais para Sites WordPress

Esperamos que este artigo tenha ajudado você a aprender como adicionar um botão Curtir do Facebook no WordPress. Em seguida, você também pode querer ver nossos guias sobre:

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.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

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

Interações do Leitor

177 CommentsLeave a Reply

  1. @artist74 Não há um ponto EXATO porque varia. O ponto exato é determinado por onde você quer que o código apareça (por exemplo, antes da postagem / depois da postagem / dentro da postagem etc.). Assim que você decidir isso, você também poderá fazer mais estilização via CSS!

  2. Alguma palavra de conselho sobre a versão XFBML? Copiei o código direto da página do desenvolvedor do Facebook, preciso saber se há algo a fazer?

  3. Eu tenho um wordpress.com. Não tenho ideia de por onde começar a adicionar o botão Curtir do Facebook. Tenho tentado encontrar a opção single.pnp. Só preciso de um ponto de partida de onde encontrá-la, pois tentei em Aparência e depois em tema e depois o quê? Por favor, pode me aconselhar?

  4. Estou dividido entre adicionar o botão de curtir do Facebook no topo dos meus posts ou perto do final, então adicionei em ambos os lugares. Alguém sabe se isso pode causar problemas ter 2 botões de curtir em um post?

  5. Olá, coloquei o código no arquivo single.php e dentro do loop como você instruiu. Quando eu curto o post, tudo funciona corretamente, exceto pelo título do post na linha do tempo do FB.

    Por exemplo, em MeuSite.com eu curto o post com o título MeuPost.

    Na linha do tempo do FB mostra que alguém “curtiu MeuSite em MeuSite.com”, não “MeuPost em MeuSite.com”

    No entanto, o link de “MeuSite” leva corretamente ao artigo respectivo, “MeuPost”.

    Para mim, isso significa que o código funciona perfeitamente e recupera o artigo correto, mas não o título do artigo, e estou tentando descobrir se preciso fazer algo mais para mostrar o título dos posts na linha do tempo do FB e não apenas seus links corretos.

    Qualquer sugestão seria apreciada.
    Obrigado.

    • Isso é estranho porque deveria pegar o título da sua página. Mas para substituir e corrigir esse problema, consulte o link de recursos que temos neste artigo. Você precisará adicionar a meta tag og:title.

      Admin

  6. Olá..
    Eu sou o proprietário de um site e quero saber quem clicou no botão de curtir em cada postagem. Não apenas o número de pessoas. Isso é possível?

  7. Obrigado pelo guia! Consegui adicionar o botão 'Curtir' às minhas páginas individuais, mas ainda estou tendo problemas para adicioná-lo ao meu site principal, que agrega todas as postagens. Você sabe em qual página devo adicioná-lo e onde?

    Obrigado novamente,
    Aaron

  8. Oi!

    Meu problema é que se eu "Curtir" uma postagem no meu site (que se chama kukkold.hu), o Facebook mostra na minha página de perfil que eu curto o link kukkold.hu no site kukkold.hu. Eu experimento isso em todas as postagens, então sempre curto a página principal do meu site em vez do link e do nome da postagem. Qual pode ser o problema? Eu tentei vários plugins de "like" e inseri o código diretamente no loop, mas o problema é sempre o mesmo e é realmente irritante. Para um teste, eu escrevi um permalink específico no espaço do bloco ID)); ?>, mas o problema foi o mesmo novamente.
    O contador de curtidas funciona bem, então ele sabe qual postagem foi curtida quantas vezes.
    O que devo fazer? Por favor, me ajude!

    Obrigado!

  9. estou usando wordpress.com e estou tentando adicionar a caixa de curtir do Facebook ao meu blog, mas não funciona. Li em alguns fóruns que dizem que o wordpress.com não pode ler código iframe. Isso é verdade? Alguma solução?

    • Sim, é verdade. Você é muito limitado com um site WordPress.com. A solução é mudar para uma configuração auto-hospedada. Utilize nosso serviço de Configuração Gratuita.

      Admin

  10. Adicionei o código no loop como você disse... mas nada acontece!! Tentei várias vezes, em diferentes partes do loop... simplesmente não funciona!! Alguma sugestão? Obrigado

  11. Isso é ótimo, no entanto, estou encontrando um problema. O código funciona bem e tudo mais, mas quando eu curto, em vez de 'curtir' a postagem específica, ele 'curte' a página inicial principal. O mesmo aparece no feed do Facebook, apenas a página inicial. Você já encontrou esse problema e o que posso fazer para consertar?

    Obrigado!

  12. Muito obrigado por isso.

    Eu estava me perguntando – você está usando este iframe (no single.php) com meta tags no header.php?

    Estou me perguntando se a URL nas meta tags do Facebook está conflitando com minha capacidade de usar o botão de curtir editado que você tem aqui?

    Muito obrigado,

    Wil

  13. Obrigado por este ótimo recurso! Eu tinha brincado com alguns plugins, mas eles simplesmente não estavam funcionando bem para mim, então encontrei seu tutorial e apenas editei o código e VOILÀ! Sucesso!

    Obrigado!

  14. Oi!

    Obrigado por este código, mas algo não está funcionando bem…
    Por exemplo, se eu entro em uma postagem, vejo "Botão de Curtir e Seja o primeiro… mensagem" Ok. Tudo bem! Ninguém curtiu até agora, não importa, serei o primeiro… então clico, Curto! E então! Uau! Vejo que 178 pessoas realmente curtiram isso, mas eu não conseguia ver isso até curtir primeiro. Você entende? Meu inglês não é muito bom, mas espero que você possa entender do que estou falando…

    If you find a time to go on my page, and then on any single post, you will see Like button and message Be the first… but if you like it, than you’ll find out, that you weren’t the first! :)

  15. Olá,

    O botão de curtir está aparecendo, mas ao clicar nada acontece??

    Por favor, você pode me dar um conselho sobre isso…
    Eu até instalei o plugin 'Curtir' do Facebook e tive exatamente o mesmo problema.

    Obrigado

      • Ok! Esquece! Como o IE pula toda vez que eu colo algo, devo ter duplicado a parte “the-content” de alguma forma.

        Substituí o antigo single.php, colei novamente seu código (tanto antes quanto depois de “the-content” e funciona bem de qualquer forma!

        Um milhão de obrigado pelo código!

  16. muito obrigado, estou começando a aprender wordpress… e aqui encontrei seu site muito útil para iniciantes… continue assim…

  17. Existe alguma maneira de mostrar na barra lateral quais posts têm mais curtidas no Facebook. Acho que seria legal ver quais são compartilhados com mais frequência.

  18. Adicionei o botão ao meu código e ele aparece nas minhas postagens do blog. no entanto, quando eu clico nele, meu perfil do Facebook não reflete que eu gostei? Estou fazendo algo errado? Eu deveria ver que gostei no meu feed, estou correto?

  19. Obrigado por compartilhar. Como você fez para que seus botões de retweet e compartilhamento no Facebook permanecessem permanentes no seu blog?

  20. Eu adicionei o código no single.php, mas o botão não aparece em todos os meus posts.
    Se eu adicionar o código em cada post (da aba HTML), o botão aparece, mas encontrei um problema.
    Por que isso acontece? Depende do tema?

    • Ele aparecerá em todas as páginas de posts individuais. Se você quer que ele apareça em todas as páginas das suas páginas de categoria ou páginas de índice, então você precisará colar o código no seu index.php dentro do loop de posts.

      Admin

      • Não, quero dizer que não aparece nos meus posts, não nas páginas. Ou talvez eu tenha colocado na parte errada do single.php. É possível colar o código em qualquer parte do single.php?
        Obrigado.

  21. Esta é provavelmente uma pergunta boba, mas as instruções que você deu são relativas ao pequeno gráfico e texto “joinha” (mostrando 184 pessoas curtiram isso. Seja o primeiro de seus amigos) no topo deste post? Ou são para o gráfico quadrado maior que aparece à esquerda do seu post (o que aparece abaixo do seu botão tweetmeme que diz 45 compartilhamentos).

    Eu gostaria de ter apenas esse gráfico quadrado maior no meu blog e que ele aparecesse ao lado do meu botão tweetmeme e estou me perguntando como fazer isso? Existe algum tutorial para o qual você possa me direcionar?

    Muito obrigado por qualquer orientação!

  22. Adicionei o código, no entanto, se você for para a postagem individual, ele mostra uma página que exibe apenas o botão "Curtir" do Facebook e não leva o espectador para a postagem real. Então, agora, se um espectador for para a postagem, ele a perderá. Alguma sugestão?

  23. Notei que muitos sites adicionaram o botão no topo da página. Mas não seria uma ideia melhor colocar o botão na parte inferior da página, permitindo que os leitores cliquem sem rolar para cima depois de terminarem de ler o artigo?

      • Re: Atahaulpa – Tive o mesmo problema que Heather. Solução: No Painel, vá em Aparência – Opções do Tema Atahaulpa – Estilo e edite a coluna central. Cole na seção “The LOOP”. Funciona que é uma maravilha!

  24. Tenho notado este botão de curtir do Facebook aparecendo em mais e mais sites ultimamente e acho que é uma ótima ideia. Hora de ver se consigo implementar isso agora... SEM destruir completamente meu blog (você ficaria surpreso com o quão perto cheguei várias vezes quando começo a mexer no código – falha de programador).

  25. Adorei o artigo, mas encontrei alguns problemas. Não sei onde encontrar o arquivo single.php? lol. Você poderia me guiar? Eu uso wordpress.com e não tenho certeza se isso faz diferença.

    Obrigado!

Deixe uma resposta

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