Como Adicionar Login Social ao WordPress (O Jeito Fácil)

Adicionar logins sociais ao seu site WordPress facilita o processo de cadastro para seus visitantes. Ele permite que os usuários criem uma conta usando seus perfis existentes de mídia social.

Assim, em vez de configurar um novo nome de usuário e senha, eles podem fazer login com plataformas como Facebook ou Google.

Isso economiza tempo e reduz o incômodo para seus visitantes. Além disso, com a permissão deles, você pode ter acesso ao nome e endereço de e-mail.

Esta pode ser uma ótima maneira de construir uma lista de e-mails para que você possa continuar alcançando seus visitantes e trazê-los de volta ao seu site.

Passamos algum tempo investigando a melhor maneira de configurar isso. E neste guia, mostraremos como adicionar logins sociais ao WordPress.

Por que adicionar login social ao WordPress?

Existem muitas razões pelas quais você pode querer permitir o registro de usuários em seu site WordPress.

Se você administra uma loja online, o registro de usuários permite que os compradores salvem suas informações de pagamento e entrega. Isso facilita para eles comprarem novamente no futuro.

O registro de usuários também é uma parte importante de criar um site de membros WordPress. Ele permite que você construa uma comunidade de usuários engajados que têm acesso a conteúdo exclusivo.

No entanto, a maioria das pessoas não gosta de preencher longos formulários de registro de usuários e lembrar de mais uma combinação de nome de usuário e senha.

Logins sociais permitem que visitantes criem uma conta em seu site com apenas um clique. Eles podem usar o nome de usuário e a senha de suas contas de mídia social existentes, como os detalhes de login do Facebook.

Como é muito conveniente, o login social pode incentivar mais pessoas a se registrarem em seu site. Com isso em mente, vamos ver como você pode adicionar um login social ao WordPress.

• How to Add Social Login to WordPress
  • Passo 1: Instale e Ative o Nextend Social Login
  • Passo 2: Crie seu aplicativo de desenvolvedor do Facebook
  • Passo 3: Conecte seu site ao aplicativo do Facebook
  • Passo 4: Configure as políticas e detalhes do aplicativo
  • Passo 5: Vá para o ar e verifique as permissões do aplicativo
  • Passo 6: Adicione o ID do aplicativo e o segredo ao WordPress
  • Passo 7: Personalize seus botões de login social
  • Passo 8: Exiba o botão de login social em seu site
• Tutorial em Vídeo
• Perguntas Frequentes sobre Login Social

Como adicionar login social ao WordPress

A maneira mais fácil de adicionar um login de front-end ao seu site WordPress é usar o plugin Nextend Social Login and Register.

Este plugin gratuito permite que os visitantes façam login usando Facebook, Twitter ou Google.

Passo 1: Instale e Ative o Nextend Social Login

Primeiro, você precisará instalar e ativar o plugin Nextend. Para mais detalhes, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação, você desejará ir para Configurações » Nextend Social Login na área de administração do WordPress. Nesta tela, você verá todas as diferentes opções de login social que pode adicionar ao seu site WordPress.

O processo de adicionar um login social ao seu site variará dependendo se você está adicionando o login do Facebook, Twitter ou Google.

Vamos analisar o Facebook como exemplo.

Para adicionar um login do Facebook ao seu site WordPress, vamos clicar no botão ‘Começar’ sob o logotipo do Facebook.

Neste momento, você pode receber um aviso do Facebook. Isso ocorre porque o Facebook exige uma conexão segura para funcionar, o que é um requisito de segurança padrão.

Isso significa que seu site deve estar usando HTTPS antes que você possa adicionar um login do Facebook ao WordPress. Para configurá-lo, consulte nosso guia sobre como alternar de HTTP para HTTPS no WordPress.

Passo 2: Crie seu aplicativo de desenvolvedor do Facebook

Assim que estiver usando HTTPS, sua próxima tarefa será criar um aplicativo do Facebook. Isso permitirá que você crie uma Chave de Aplicativo e um Segredo de Aplicativo, que você adicionará ao plugin Nextend.

Criar um 'aplicativo do Facebook' parece técnico, mas não se preocupe. Isso não significa que você está construindo um aplicativo móvel. É apenas um processo para registrar seu site no Facebook, o que permite conectar com segurança o sistema de login deles ao seu site.

Você não precisa saber nenhum código e nós o guiararemos por todas as etapas.

Para criar este aplicativo, você deve alternar entre seu painel do WordPress e o site Meta for Developers. Com isso em mente, é uma boa ideia deixar seu painel do WordPress aberto na aba atual e visitar o Meta for Developers em uma nova aba.

Na sua aba Meta for Developers, clique no botão 'Criar aplicativo'.

Em seguida, você entrará no processo de configuração.

A primeira coisa que você precisará fazer é escolher um portfólio de negócios ao qual deseja conectar o novo aplicativo. A configuração padrão está habilitada para 'Ainda não quero conectar um portfólio de negócios'. Você pode deixar isso como está e clicar em 'Próximo'.

Na etapa ‘Casos de uso’, você escolherá o que seu aplicativo deve fazer.

Como queremos adicionar login social ao WordPress, prossiga e selecione a opção ‘Autenticar e solicitar dados de usuários com Login do Facebook’.

Depois disso, você desejará clicar no botão ‘Próximo’.

Em seguida, no campo ‘Nome de exibição’, vamos digitar o nome que você deseja usar para o aplicativo do Facebook. Este nome será exibido aos visitantes, portanto, você desejará usar algo que eles reconheçam, como o título do seu site WordPress.

Após nomear seu aplicativo, você pode digitar seu endereço de e-mail no campo ‘E-mail de contato do aplicativo’. Este é o endereço que o Facebook usará para alertá-lo sobre possíveis violações de políticas e restrições do aplicativo ou compartilhar informações sobre como você pode recuperar uma conta excluída.

Com isso em mente, você desejará digitar um endereço de e-mail que você verifica regularmente. Prossiga e clique em ‘Próximo’ para continuar.

Em seguida, você verá uma página de revisão. Nesta página, o Meta for Developers mostrará todas as configurações que você configurou para o novo aplicativo.

Se tudo parecer bom, simplesmente clique no botão ‘Criar aplicativo’.

Agora você deve ver um pop-up de notificação com um botão ‘Ir para o painel’.

Vamos clicar nele.

Passo 3: Conecte seu site ao aplicativo do Facebook

Agora você está pronto para adicionar produtos ao aplicativo do Facebook.

A partir daqui, você pode clicar em ‘Personalizar a adição de um botão de Login do Facebook’.

Em seguida, você desejará ir para ‘Quickstart’ no menu ‘Login do Facebook’.

A partir daqui, você pode escolher a opção ‘Web’.

Isso abrirá a seção de personalização.

No campo ‘URL do site’, simplesmente digite a URL do seu site.

Certifique-se de obter o URL correto. Mesmo um pequeno erro de digitação fará com que a conexão falhe, e você provavelmente verá uma mensagem de erro como ‘URL de redirecionamento inválido’.

Para fazer isso, basta voltar para a aba que está mostrando o seu painel do WordPress. Esta tela fornece instruções detalhadas sobre como vincular o Nextend ao Facebook, incluindo o URL exato que você deve usar.

Após digitar o URL do seu site no campo ‘URL do site’, vamos garantir que você clique no botão ‘Salvar’ para salvar suas alterações.

Em seguida, vamos para a seção ‘Configurações’.

Nesta tela, você precisará colar um redirecionamento oAuth válido. Para obter este valor, basta voltar para a sua aba do WordPress.

Estas instruções incluem um URL rotulado como ‘URIs de redirecionamento OAuth válidos’. Você pode copiar este URL.

Em seguida, vamos voltar para o site Meta for Developers e colar o URL no campo ‘URI de Redirecionamento a Verificar’.

Depois disso, você estará pronto para clicar no botão ‘Salvar alterações’ na parte inferior.

Passo 4: Configure as políticas e detalhes do aplicativo

Concluído, vamos para Configurações » Básico no menu esquerdo.

Em ‘Domínio do aplicativo’, basta digitar o nome de domínio do seu site.

No campo ‘URL da Política de Privacidade’, você precisará digitar o endereço da política de privacidade do seu site.

Esta política de privacidade deve divulgar as informações que você coleta dos visitantes e como planeja usar esses dados, incluindo quaisquer informações que você obtenha de logins sociais.

Se precisar de ajuda para criar esta página importante, consulte nosso guia sobre como adicionar uma política de privacidade no WordPress.

Para cumprir o GDPR, você deve permitir que os usuários excluam suas contas em seu site.

Existem muitas maneiras de permitir que os usuários excluam suas contas do WordPress, mas você deve sempre compartilhar essas instruções com seus visitantes.

Para ajudar os usuários a encontrar essas informações, clique na seção ‘Exclusão de Dados do Usuário’ e, em seguida, escolha ‘URL de Instruções de Exclusão de Dados’ no menu suspenso.

Você pode então digitar ou copiar/colar o URL onde os visitantes podem encontrar informações sobre como excluir suas contas. Por exemplo, você pode adicionar as instruções à sua política de privacidade ou página de Perguntas Frequentes.

Depois de fazer isso, você desejará abrir o menu suspenso ‘Categoria’ e escolher a categoria que melhor representa como você planeja usar o login social em seu site WordPress.

Por exemplo, se você estiver adicionando um login do Facebook à sua loja WooCommerce, geralmente desejará clicar na categoria ‘Compras’.

Depois de fazer isso, o próximo passo é escolher um ícone de aplicativo. Este ícone representará seu aplicativo no ‘App Center’, que é uma área do Facebook onde os usuários podem encontrar novos aplicativos.

Isso não é particularmente importante para nosso aplicativo, mas é um requisito, então você ainda precisará criar um ícone de aplicativo.

Seu ícone de aplicativo deve ter um fundo transparente e ter entre 512 x 512 e 1024 x 1024 pixels. Ao criar este ícone, você não pode usar nenhuma variação dos logotipos, marcas registradas ou ícones do Facebook, incluindo suas marcas WhatsApp, Oculus e Instagram.

Você também não pode incluir nenhum texto ‘Facebook’ ou ‘FB’.

Se você ainda não tiver um, poderá criar facilmente um ícone de aplicativo do Facebook com aparência profissional usando um criador de logos.

Depois de criar um ícone de aplicativo, clique na seção ‘Ícone do Aplicativo’ e selecione o arquivo de imagem que deseja usar.

Após tudo isso, você pode clicar no botão ‘Salvar Alterações’.

Passo 5: Vá para o ar e verifique as permissões do aplicativo

Seu aplicativo do Facebook está configurado como privado por padrão, o que significa que você é a única pessoa que pode fazer login usando o Facebook.

Antes que seus visitantes possam criar uma conta usando o Facebook, você precisará tornar seu aplicativo ativo. Para fazer isso, encontre o controle deslizante ‘Modo do Aplicativo: Desenvolvimento’ e clique nele para torná-lo ativo.

Aplicativos do Facebook podem ter acesso ‘Padrão’ ou acesso ‘Avançado’ às informações do usuário. Se seu aplicativo tiver acesso padrão, os visitantes não poderão fazer login usando o login social do Facebook.

No passado, o Facebook alterou suas configurações de permissão padrão, portanto, vale sempre a pena verificar se seu aplicativo tem as permissões corretas para suportar o login social.

No menu à esquerda, vamos navegar até a seção ‘Permissão’.

Agora, você vai querer olhar as permissões de ‘email’ e ‘public_profile’.

Para suportar o login social, ambas essas permissões devem ser marcadas como ‘Acesso Avançado’ e ‘Pronto para Uso’, como você pode ver na imagem a seguir.

Você vê os botões ‘Obter Acesso Avançado’ em vez disso? Isso significa que seu aplicativo atualmente não tem as permissões corretas para fazer login em mídias sociais.

Neste caso, você precisará clicar no botão ‘Obter Acesso Avançado’ e, em seguida, seguir as instruções na tela.

Assim que você tiver as permissões de ‘Acesso Avançado’, prossiga e navegue até Configurações do aplicativo » Básico no menu à esquerda.

Na parte superior da página, você verá um ‘ID do aplicativo’ e um ‘Segredo do aplicativo’.

Para revelar o ‘Segredo do aplicativo’, basta clicar no botão ‘Mostrar’. Em seguida, você pode digitar a senha da sua conta do Facebook. O site Meta for Developers agora será atualizado para mostrar seu ‘Segredo do aplicativo’.

Passo 6: Adicione o ID do aplicativo e o segredo ao WordPress

O próximo passo é adicionar o ‘Segredo do aplicativo’ e o ‘ID do aplicativo’ ao seu plugin Nextend. Para fazer isso, vamos voltar ao painel do WordPress.

A partir daqui, você desejará ir para a guia ‘Configurações’ e colar o ID e o segredo nos campos ‘ID do aplicativo’ e ‘Segredo do aplicativo’ em seu painel do WordPress.

Depois de fazer isso, prossiga e clique no botão ‘Salvar alterações’.

Antes de prosseguir, é uma boa ideia testar se seu login social está configurado corretamente. Para fazer isso, basta clicar no botão ‘Verificar configurações’.

Isso abrirá um pop-up onde você pode digitar seu nome de usuário e senha do Facebook. Se você configurou o login social corretamente, então você já deve estar logado em seu blog WordPress.

Mesmo que seu login social esteja funcionando, o Nextend ainda pode avisá-lo de que o provedor está atualmente desativado. Se você vir este aviso, basta clicar no botão ‘Ativar’.

Parabéns, você fez a parte difícil e adicionou com sucesso um login social ao seu site WordPress!

Passo 7: Personalize seus botões de login social

Agora, a parte divertida: vamos personalizar a aparência e o comportamento do botão de login em seu site.

Para estilizar o botão de login social, basta clicar na aba ‘Botões’. Você verá então todos os diferentes estilos que pode usar.

Para usar um estilo diferente, você pode clicar para selecionar seu botão de rádio.

Depois de fazer isso, você pode editar o texto ‘Rótulo de login’ deste botão para alterar o texto que o Nextend exibe.

Você também pode aplicar uma formatação básica ao rótulo de login. Por exemplo, na imagem a seguir, estamos aplicando um efeito em negrito usando as tags HTML <b> e </b>.

Você também tem a opção de alterar o texto que este botão usa para o seu ‘Rótulo de link’. Este é o texto que o Nextend exibe quando um visitante criou uma conta em seu site, mas não vinculou essa conta ao Facebook.

Você pode usar o rótulo de link para incentivar usuários logados a conectar suas contas a vários perfis de mídia social.

Para alterar este texto, basta digitar no campo ‘Rótulo de link’. Mais uma vez, você pode usar HTML para aplicar uma formatação básica ao texto do rótulo.

Você também deve facilitar para os visitantes desconectarem seus perfis de mídia social do seu site WordPress.

É aqui que entra o campo ‘Rótulo de desvinculação’.

Neste campo, você pode digitar o texto que seu site exibirá para usuários logados que já conectaram suas contas sociais ao seu site.

Ao clicar neste link, os usuários podem desconectar a conexão entre seu site WordPress e suas contas de mídia social.

Essas configurações devem ser suficientes para a maioria dos sites.

No entanto, se você preferir criar um botão totalmente personalizado, pode sempre marcar a caixa ‘Usar botão personalizado’. Isso adiciona uma nova seção onde você pode criar seu próprio botão de login social usando código.

Quando estiver satisfeito com a forma como estilou seu botão, você pode prosseguir e clicar no botão ‘Salvar alterações’.

Passo 8: Exiba o botão de login social em seu site

Em seguida, você desejará mudar para a aba ‘Uso’.

O Nextend agora exibirá todos os shortcodes que você pode usar para adicionar o botão de login social ao seu site WordPress.

Estes atalhos podem criar uma variedade de botões de login. Para criar um botão de login básico para o Facebook, você usaria o seguinte atalho:

[nextend_social_login provider=”facebook”]

A imagem a seguir mostra um exemplo de como este botão de login social aparecerá em seu site.

Como você pode ver na aba ‘Uso’, existem alguns parâmetros extras que você pode adicionar ao seu shortcode. Isso mudará a aparência ou o comportamento do botão.

Se você quiser criar um botão de login social que não tenha um rótulo de texto, você pode adicionar o parâmetro ‘icon’, por exemplo [nextend_social_login provider=”facebook” style=”icon”]

Aqui está um exemplo de como este botão aparecerá em seu site WordPress.

Quando um visitante faz login em seu site usando uma conta social, você pode redirecioná-lo automaticamente para uma página. Esta tela tem um exemplo de shortcode que redirecionará os usuários para o site Nextend.

Você pode personalizar facilmente este shortcode para redirecionar visitantes para uma página em seu site WordPress.

Você pode adicionar alguns outros parâmetros ao seu shortcode. Para ver a lista completa de parâmetros, você pode clicar no link para a documentação do plugin.

Após decidir qual shortcode usar, você pode adicionar o código a qualquer página, postagem ou área pronta para widgets. Para instruções passo a passo, veja nosso guia para iniciantes sobre como adicionar um shortcode no WordPress.

Tutorial em Vídeo

Se você não é fã de instruções escritas, assista ao nosso tutorial em vídeo sobre como adicionar login social ao WordPress:

Inscreva-se no WPBeginner

Perguntas Frequentes sobre Login Social

Aqui estão algumas perguntas que são frequentemente feitas por nossos leitores sobre como adicionar login social ao seu site WordPress:

Posso escolher com quais redes sociais os usuários podem fazer login?

Sim, a maioria dos plugins de login social, incluindo Nextend Social Login & Register, permite que você escolha quais redes oferecer.

Você pode habilitar apenas as que seu público prefere, como Google e Facebook, e ocultar outras. Por exemplo, se você estiver segmentando um público profissional, pode habilitar o LinkedIn, enquanto Google e Facebook são mais populares para usuários em geral.

Preciso de um desenvolvedor para configurar o login social?

Não, você pode fazer isso sozinho sem escrever código. A maioria dos plugins de login social para WordPress são fáceis para iniciantes e oferecem documentação detalhada.

Alguns plugins vêm até com assistentes de configuração integrados para guiá-lo na criação de chaves de aplicativo de plataformas como Google ou Facebook. Leva alguns passos extras, mas tudo geralmente é copiar e colar.

Adicionar login social vai deixar meu site lento?

Adicionar login social não vai deixar seu site lento se você estiver usando um plugin bem codificado.

Ferramentas populares como o Nextend Social Login & Register são otimizadas para desempenho e carregam scripts apenas quando necessário.

Ainda assim, é uma boa ideia monitorar a velocidade do seu site após a instalação. Se você notar qualquer atraso, considere usar plugins de desempenho ou uma solução de cache para manter seu site rápido.

O login social é seguro para o meu site WordPress?

Sim, o login social é seguro se você usar plugins confiáveis e mantê-los atualizados.

Como o login é tratado por grandes plataformas como Google ou Facebook, seu site não precisa armazenar ou gerenciar senhas de usuários.

No entanto, ainda recomendamos o uso de HTTPS e o seguimento das melhores práticas de segurança para WordPress para manter tudo seguro.

Posso permitir login social em sites WooCommerce ou de membros?

Absolutamente! O login social funciona muito bem com WooCommerce, BuddyPress, MemberPress e mais.

Ele ajuda clientes e membros a fazer login rapidamente e reduz o abandono de carrinho ou a fricção de inscrição. Muitos plugins de login social oferecem até integração integrada com plugins populares para que você não precise de nenhuma configuração extra.

O que acontece se um usuário fizer login com login social e depois usar o login por e-mail?

Na maioria dos casos, o plugin vinculará automaticamente as contas deles.

Por exemplo, se um usuário se inscrever com uma conta Google usando o e-mail ‘jane.doe@example.com’ e ele já tiver uma conta de usuário WordPress com esse mesmo e-mail, o plugin reconhecerá a correspondência e vinculará as duas.

Isso evita contas duplicadas. No entanto, é sempre uma boa ideia testar esse recurso para ver exatamente como seu plugin o gerencia antes de publicá-lo.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um login social ao seu site WordPress. Você também pode conferir nosso guia sobre os melhores plugins de mídia social para WordPress ou o tutorial sobre como adicionar CAPTCHA no formulário de login e registro do 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.