O botão Login é uma maneira simples de disparar o processo de Login do Facebook no seu site ou aplicativo Web.
Se uma pessoa ainda não tiver se conectado ao seu aplicativo, ela verá esse botão e, ao clicar nele, um diálogo Entrar abrirá, iniciando o fluxo de login. As pessoas que já se conectaram não verão qualquer botão, a menos que você opte por mostrar um botão Sair a elas.
Quando você exibe o botão Sair, as pessoas podem usá-lo para sair, no entanto elas sairão tanto do aplicativo como do Facebook.
O botão Login foi desenvolvido para funcionar apenas em conjunto com o SDK do JavaScript. Se estiver criando um aplicativo móvel ou não puder usar nosso SDK do JavaScript, siga o guia do fluxo de login para o tipo de aplicativo.
O botão Continuar com o Facebook substitui as versões anteriores do botão Login. Veja mais informações em Migração.
O botão Continuar como {Name} tem o texto "Continuar como {persons' name}" e pode incluir a foto do perfil da pessoa no Facebook, caso ela esteja conectada ao Facebook no mesmo navegador. Para usar o botão Continuar como {Name}, primeiro é necessário carregar o SDK do JavaScript. Para ver as instruções sobre como configurar o SDK do JavaScript, consulte o Início rápido do SDK do JavaScript. Ative Continuar como {Name} adicionando data-use-continue-as="true" às configurações de seu botão.
A altura do botão Continuar como {Name} não é ajustável.
| Tamanho do botão | Altura | Largura | Larguras personalizadas? |
|---|---|---|---|
Pequeno | 20 px | 200 px | Não |
Médio | 28 px | 200 - 320 px | Sim |
Grande | 40 px | 240 - 400 px | Sim |
Quando você seleciona um tamanho superior aos parâmetros máximos, o botão assume a largura máxima por padrão.
O botão Continuar como {Name} pode ser uma ótima maneira de gerar mais cliques e envolvimento. Ele permite aos usuários ver as respectivas fotos e nomes do perfil por meio do nosso botão Login e pode ajudar a personalizar ainda mais o aplicativo.
No entanto, pode parecer confuso para o usuário, quando ele não espera ver o nome e a foto do perfil dele nesse contexto. Para verificar se o botão Continuar como é a opção ideal para o aplicativo, considere o seguinte:
Mesmo que o botão Continuar como {Name} não seja adequado para o aplicativo, você pode experimentar os novos botões do SDK do JavaScript com o texto "Continuar com o Facebook".
Atendemos a uma base de usuários global, portanto as diferentes regiões têm expectativas de usuários diversas. Observe essas expectativas quando usar o botão.
O aplicativo é social:
Quando as pessoas usam aplicativos sociais, elas esperam se conectar com outras pessoas. Observamos que o botão Continuar como {Name} tem um ótimo desempenho nesses casos.
As pessoas compartilham telefones no mercado-alvo:
Quando várias pessoas usam o mesmo telefone, o botão Continuar como {Name} garante que elas estejam usando a conta correta.
O aplicativo é novo:
Se o aplicativo for novo no mercado, os usuários poderão se confundir sobre o motivo pelo qual o nome e a foto do perfil deles estão sendo exibidos automaticamente, em relação a um aplicativo conhecido ou já estabelecido que eles costumem usar regularmente.
As pessoas se preocupam com a privacidade no mercado-alvo:
Em vários países, as imagens do perfil são consideradas itens muito particulares. Nesse caso, convém evitar o uso do botão Continuar como {Name}, já que ele mostra a imagem do perfil da pessoa que está entrando.
Siga as melhores práticas gerais de uso do Login do Facebook. Quando usar o botão Continuar como {Name}, é importante seguir as duas melhores práticas a seguir:
Outras possíveis melhores práticas:
<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>Além das configurações acima, também é possível alterar o seguinte:
| Configuração | Atributo HTML5 | Descrição | Opções |
|---|---|---|---|
|
| Se ativado, o botão mudará para um botão Sair quando o usuário estiver conectado. |
|
|
| Uma função JavaScript a ser disparada quando o processo de login for concluído. |
|
|
| A lista de permissões a serem solicitadas durante o login. |
|
|
| Escolhe uma das opções de tamanho para o botão. |
|
|
| Determina qual público será selecionado por padrão na solicitação de permissões de gravação. |
|
Os botões antigos serão migrados para os novos. A tabela a seguir mostra o mapeamento.
| Botão antigo | Altura antiga | Botão novo | Altura nova |
|---|---|---|---|
Ícone: | 18 px | Obsoleto | Obsoleto |
Pequeno | 18 px | Pequeno | 20 px |
Médio | 22 px | Pequeno | 20 px |
Grande | 25 px | Pequeno | 20 px |
Extragrande | 39 px | Pequeno | 20 px |
Os novos botões Continuar como {Name} têm um parâmetro chamado button_type, não exigido pelos botões antigos. É dessa forma que você define os botões Continuar com o Facebook ou Entrar com o Facebook. Se você não definir um tipo de botão, ele será apresentado como o novo botão pequeno. Este tamanho é médio se comparado com os botões antigos. No caso do x-large, ele será um pouco menor. Se você especificar o parâmetro button_type, seus botões serão exibidos conforme especificado.
Você pode fazer com que os botões sejam carregados mais rápido, iniciando o SDK do JavaScript assim que possível. Entretanto, o sistema não poderá carregar os botões até a página da Web e o JavaScript terminarem o carregamento. Em seguida, ele poderá criar o iframe e carregar 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>
}O carregamento de um botão em outra localização requer o SDK do JavaScript da localização a ser carregada. Para ver mais informações sobre como localizar o SDK do JavaScript, consulte Localização com plugins sociais e SDK do JavaScript.
Assim que alguém clica no botão Login e aceita a caixa de diálogo Login (concluindo o fluxo de login), seu aplicativo pode usar o SDK do Facebook para JavaScript para fazer chamadas à API em nome dessa pessoa.
Não há necessidade de mais configuração aqui. No entanto, você pode usar a configuração onlogin no botão para disparar sua própria função JavaScript que será executada no login.
Sim, você pode. No entanto, ainda será preciso usar parcialmente o SDK do JavaScript. Após a conclusão do processo de login que é iniciado clicando no botão, o SDK terá acesso a um objeto authResponse usando FB.getLoginStatus(). Você pode usar essa função para passar o objeto de resposta para o seu código do lado do servidor, a fim de concluir todos os registros que existirem.
O botão Login não permite novas solicitações, pois pedir permissões recusadas não faz parte da função do botão. Se precisar solicitar uma permissão novamente, configure um botão personalizado e use FB.login(), conforme descrito na documentação Login do Facebook para a Web.
As tags <div> são transformadas em botões renderizados usando uma tecnologia que chamamos de XFBML, que tem por base JavaScript no SDK para analisar a página e fazer substituições. Se você estiver modificando dinamicamente o conteúdo da página para adicionar esses div após a execução do método init do SDK, (por exemplo, em uma caixa de diálogo construída dinamicamente), é necessário chamar FB.XFBML.parse() novamente para que a transformação seja efetuada.
