Botão Entrar

O botão Entrar é uma forma simples de acionar o processo de Login do Facebook no seu site ou app para web.

Caso uma pessoa ainda não tenha se conectado ao seu app, esse botão será exibido. Se ela clicar nele, um diálogo Entrar aparecerá, iniciando o fluxo de login. As pessoas que já se conectaram não verão o botão, a menos que você opte por mostrar um botão Sair.

Ao clicar no botão Sair, a pessoa será desconectada tanto do app quanto do Facebook.

O botão Entrar foi criado para funcionar conectado ao SDK do JavaScript. Caso você esteja criando um app para celular ou não possa usar o SDK do JavaScript, siga o guia de fluxo de login específico para o tipo de app.

O botão Continuar com o Facebook substitui as versões anteriores do botão Entrar. Para ver mais informações, consulte Migração.

Configurador de plugin

Botão Continuar como {Name}

O botão Continuar como {Name} exibe o texto "Continuar como {nome da pessoa}" e, opcionalmente, inclui a foto do perfil do Facebook da pessoa, caso o Facebook dela esteja conectado no navegador. Antes de usar o botão Continuar como {Name}, é preciso carregar o SDK do JavaScript. Para ver instruções de como configurar o SDK do JavaScript, consulte Início rápido: SDK do Facebook para JavaScript. Ative o Continuar como {Name} adicionando data-use-continue-as="true" às configurações do botão.

A altura do botão Continuar como {Name} não pode ser personalizada.

Se você selecionar um tamanho além dos parâmetros máximos, o botão será padronizado com a largura máxima.

Melhores práticas para o botão Continuar como {Name}

O botão Continuar como {Name} pode ser uma ótima forma de aumentar os cliques e o engajamento. Ele permite que o usuário veja o próprio nome e a foto do perfil no botão Entrar, passando a impressão de que o app é personalizado.

Como resultado, isso também pode causar confusão se o usuário não estiver esperando ver os próprios dados nesse contexto. Para determinar se o Continuar como é apropriado para o app, leve em consideração o que descrevemos a seguir.

Caso você decida que o Continuar como {Name} não é ideal para o app, teste os novos botões do SDK do JavaScript que dizem "Continuar com o Facebook".

Casos de uso sugeridos

Temos uma base global de usuários e sabemos que pessoas de diferentes regiões têm diferentes expectativas. Respeite essas expectativas ao usar o botão.

Contextos recomendados

• Seu app é uma rede social:
  Quando as pessoas usam apps sociais, elas têm a expectativa de se conectar a outros usuários. Nesses casos, observamos que o Continuar como {Name} tem um desempenho positivo.

• As pessoas no mercado em questão compartilham smartphones:
  Se várias pessoas usam o mesmo smartphone, o Continuar como {Name} as ajuda a usar a conta certa.

Contextos desaconselhados

• Seu app é novo:
  Se o app é novo no mercado, talvez os usuários fiquem se perguntando o motivo de o próprio nome e foto do perfil serem apresentados de forma automática em comparação com um app conhecido que planejam usar com frequência.

• As pessoas no mercado em questão se preocupam com a privacidade:
  Em diversos países, as imagens do perfil são consideradas muito privadas. Talvez seja melhor evitar o uso do Continuar como {Name} nesse caso, já que ele exibe a imagem do perfil da pessoa fazendo login.

Melhores práticas para o botão Entrar

Siga as Melhores práticas do Login do Facebook. Ao usar o Continuar como {Name}, é especialmente importante fazer o seguinte:

• Forneça uma forma de sair (exigência das políticas).
• Teste e mensure para identificar o impacto que ele terá na percepção e conversão de usuários.

Outras práticas recomendadas possíveis:

• Esclareça o que exatamente acontece ao fazer login.
• Enquanto o botão Entrar carrega, apresente um espaço reservado ou controle giratório. Remova-o quando o carregamento terminar. Veja um exemplo de código:

<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

Configurações

Além das configurações acima, também é possível realizar estas alterações:

Migração

Os botões antigos serão migrados para os novos. A tabela a seguir apresenta o mapeamento.

Os novos botões Continuar como {Name} têm o parâmetro button_type, que não é obrigatório para os botões antigos. É assim que você especifica se o botão deve ser Continuar com o Facebook ou Entrar com o Facebook. Se o tipo não for especificado, o botão será renderizado como o novo botão pequeno. Em comparação com os botões antigos, esse é o tamanho médio. Para o caso de x-large, ele será um pouco reduzido. Se você especificar o parâmetro button_type, os botões serão exibidos conforme especificado.

É possível fazer os botões carregarem com mais rapidez ao inicializar o SDK do JavaScript o mais breve possível. Entretanto, o sistema não carrega os botões até que o carregamento da página da web e do JavaScript seja concluído. Depois disso, ele cria o iframe e carrega os recursos para renderizar o botão.

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

Localização:

Caso você queira exibir o botão para uma localidade diferente, será preciso carregar o SDK do JavaScript correspondente. Para ver mais informações, consulte Localização com Plugins Sociais e SDK do JavaScript.

Perguntas frequentes

Como posso usar esse recurso para fazer login dos usuários?

Depois de uma pessoa clicar no botão Entrar e aceitar o diálogo (concluindo o fluxo de login), o app poderá usar o SDK do Facebook para JavaScript com objetivo de fazer chamadas em nome dela.

Não é necessário fazer configurações adicionais. No entanto, é possível usar a configuração onlogin no botão para acionar a função no JavaScript a ser executada após o login.

Posso usar o botão Entrar com o código de registro do lado do servidor?

Sim. Porém, ainda será preciso usar o SDK do JavaScript de forma parcial. Assim que o processo de login for concluído, o SDK terá acesso a um objeto authResponse usando FB.getLoginStatus(). É possível usar a função para passar o objeto de resposta ao código do lado do servidor com objetivo de concluir os registos que existem lá.

Posso usar o botão Login para solicitar de novo a permissão que uma pessoa recusou?

O botão Entrar não é compatível com novas tentativas de solicitação porque pedir permissões recusadas não é o propósito dele. Se você precisa solicitar uma permissão de novo, configure um botão personalizado e use FB.login() conforme descrito na documentação de Login do Facebook para web.

O botão não está sendo renderizado.

As tags <div> são transformadas em botões renderizados por meio da tecnologia XFBML, que se baseia no JavaScript do SDK para analisar a página e fazer substituições. Se você modificar o conteúdo da página de forma dinâmica para adicionar divs depois da execução do método init do SDK (por exemplo, em um diálogo construído de forma dinâmica), faça uma nova chamada a FB.XFBML.parse() para que a transformação seja realizada.