Botão Login

O botão Login é uma maneira simples de disparar o processo de Login no 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 será exibido, 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.

Configurador de plugin

Width
Máximo de linhas de fotos
Tamanho do botão
Texto do botão

Botão "Continuar como {name}"

O botão "Continuar como {name}" apresenta o texto "Continuar como {nome da pessoa}" e opcionalmente inclui a foto do perfil da pessoa no Facebook, caso ela esteja conectada à esta plataforma 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.

A altura dos botões "Continuar como {name}" não é personalizável.

Tamanho do botãoAlturaLarguraLarguras 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.

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

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".

Sugestões de casos de uso

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.

Ideal quando
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.

Evitar quando
O aplicativo é novo:

se o aplicativo é novo no mercado, os usuários podem 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 costumam 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.

Melhores práticas

/docs/facebook-login/best-practices

Siga as melhores práticas gerais de uso do Login do Facebook. Quando usar o botão "Continuar como {name}", é especialmente importante seguir as duas melhores práticas a seguir:

  • Fornecer uma forma de sair (requisito da política)
  • Testar e mensurar – Identifique o impacto que isso causa nas conversões e na percepção dos usuários

Outras possíveis melhores práticas:

  • Seja claro sobre o que o recurso Entrar faz

  • Coloque um espaço reservado ou controle giratório durante o carregamento do botão Login e remova-o quando o botão estiver carregado. Exemplo do 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"
    ></div>
</div>
}

Configurações

Além das configurações acima, também é possível alterar o seguinte:

Configuração Atributo HTML5 Descrição Opções

auto_logout_link

data-auto-logout-link

Se ativado, o botão mudará para um botão Sair quando o usuário estiver conectado.

false, true

max_rows

data-max-rows

O número máximo de linhas das fotos de perfil no Facepile quando show_faces está ativado. O número real de linhas mostrado poderá ser menor se não houver rostos suficientes para preencher o número que você especificou.

int

onlogin

onlogin

Uma função JavaScript a ser disparada quando o processo de login for concluído.

Function

scope

data-scope

A lista de permissões a serem solicitadas durante o login.

basic_info (padrão) ou uma lista de permissões separadas por vírgula

size

data-size

Escolhe uma das opções de tamanho para o botão.

small, medium, large, xlarge

show_faces

data-show-faces

Determina se um Facepile de amigos conectados é mostrado abaixo do botão. Quando esse recurso for ativado, um usuário conectado verá apenas o Facepile, e não haverá botão Login ou Sair.

false, true

default_audience

data-default-audience

Determina qual público será selecionado por padrão na solicitação de permissões de gravação.

everyone, friends, only_me

Migração

O Facebook mantém a compatibilidade com os botões do SDK do JavaScript mais antigos por 90 dias. Após esse período, os botões são migrados para os novos. A tabela a seguir mostra o mapeamento.

Botão antigoAltura antigaBotão novoAltura 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 anteriores. É 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 extragrande, ele será um pouco menor. Se você não definir o parâmetro button_type, seu botão será exibido conforme você definir.

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é que a página Web e o JavaScript terminem de ser carregados. Então ele poderá criar o i-frame e carregar os recursos para apresentar 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:

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.

Perguntas frequentes

Como uso esse recurso para conectar usuários?

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.

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

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.

Posso usar o botão Login para solicitar novamente uma permissão que uma pessoa negou?

O botão Login não permite novas solicitações, pois pedir permissões negadas 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 no Facebook para a Web.