Login Button

The Login Button is a simple way to trigger the Facebook Login process on your website or web app.

If someone hasn't logged into your app yet, they'll see this button, and clicking it will popup a Login dialog, starting the login flow. People who have already logged in won't see any button, or you can also choose to show a logout button to them.

If you show a logout button, when people use it to log out, they log out both from your app and from Facebook.

The Login Button is only designed to work in connection with the JavaScript SDK - if you're building a mobile app or can't use our JavaScript SDK, you should follow the login flow guide for that type of app instead.

The "Continue with Facebook" button replaces earlier versions of the Login Button. For more information, see Migration.

Plugin Configurator

Width
Maximum Rows of Photos
Button Size
Button Text

"Continue as {Name}" Button

The "Continue as {Name}" button has the text "Continue as {persons' name}" and optionally includes the person's Facebook profile picture if they're logged in to Facebook in the same browser. To use the "Continue as {Name}" button, you must first load the JavaScript SDK. For instructions on setting up the JavaScript SDK, see the JavaScript SDK Quickstart.

The height of the "Continue as {Name}" buttons is not customizable.

Button SizeHeightWidthCustom Widths?

Small

20 px

200 px

No

Medium

28 px

200 - 320 px

Yes

Large

40px

240 - 400 px

Yes

If the you select a size beyond the maximum parameters, the button will default to the maximum width.

Best Practices for the "Continue as {Name}" Button

The "Continue As {Name}" button can be a great way to increase clicks and engagement. It lets the user see their profile picture and name on our Login button and can help make your app feel more personalized.

As a result, it can also be confusing if the user isn't expecting to see their name and profile photo in this context. Please consider the following to see if 'Continue As' is best for your app.

Even if the "Continue As {Name}" is not right for your app, you can still try the new JS SDK buttons which say 'Continue With Facebook'.

Suggested Use Cases

We serve a global user base and different regions have different user expectations. Be respectful of those expectations when using this button.

Best when
Your app is social:

When people are using social apps, they expect to connect with others. We have seen "Continue As {Name}" perform well in these cases.

People in the target market share phones:

When multiple people are using the same phone, "Continue As {Name}" can give them reassurance that they are using the right account.

Avoid when
Your app is new:

If your app is new to market, your users may be more likely to be confused about why their name and profile photo are showing automatically, versus an established or familiar app users plan to use on a regular basis.

People in the target market are concerned about privacy:

In many countries, profile images are considered very private. You may want to avoid using "Continue As {Name}" in this case as it will show the profile image of the person logging in.

Best Practices

/docs/facebook-login/best-practices

Please follow the general Best Practices for using Facebook Login. It is particularly important to follow these two best practices when using "Continue As {Name}":

  • Provide a way to log out (required by policy)
  • Test and Measure - Identify what impact this is having on user perceptions and conversion

Some other possible best practices:

  • Be clear about what Logging in Does

  • Put a placeholder or spinner while Login button is loading and remove when button is loaded. An example of such code:

<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>
}

Settings

In addition to the settings above, you can also change the following:

Setting HTML5 Attribute Description Options

auto_logout_link

data-auto-logout-link

If enabled, the button will change to a logout button when the user is logged in.

false, true

max_rows

data-max-rows

The maximum number of rows of profile photos in the Facepile when show_faces is enabled. The actual number of rows shown may be shorter if there aren't enough faces to fill the number you specify.

int

onlogin

onlogin

A JavaScript function to trigger when the login process is complete.

Function

scope

data-scope

The list of permissions to request during login.

basic_info (default) or a comma separated list of permissions

size

data-size

Picks one of the size options for the button.

small, medium, large, xlarge

show_faces

data-show-faces

Determines whether a Facepile of logged-in friends is shown below the button. When this is enabled, a logged-in user will only see the Facepile, and no login or logout button.

false, true

default_audience

data-default-audience

Determines what audience will be selected by default, when requesting write permissions.

everyone, friends, only_me

Migration

Facebook will support the older JS SDK buttons for 90 days. After that, the hold buttons will be migrated to the new buttons. The following table shows the mapping.

Old ButtonOld HeightNew ButtonNew Height

Icon

18 px

Deprecated

Deprecated

Small

18 px

Small

20 px

Medium

22 px

Small

20 px

Large

25 px

Small

20 px

XLarge

39 px

Small

20 px

The new "Continue as {Name}" buttons have a parameter called button_type, which the old buttons do not require. This is how you specify either the "Continue with Facebook" or "Log in with Facebook" buttons. If you don't specify a button type, the button is rendered as the new small button. This size is medium compared to the old buttons. For the x-large case, it will shrink down a bit slightly. If you do specify the 'button_type' parameter, you're buttons appear as you specify them.

You can cause the buttons to load more quickly by launching the Javascript SDK as soon as possible. However, the system can't load the buttons until the webpage and javascript have finished loading. Then it can create the i-frame and load up the resources to render the button.

 <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>
}

Localization:

Loading a button in a different locale requires the Javascript SDK for that locale to be loaded. For more information on localizing the JavaScript SDK, see Localization with Social Plugins and JavaScript SDK.

FAQ

How do I use this to log users in?

Once someone has clicked the Login Button, and accepted the Login Dialog - completing the Login flow - your app can now use the Facebook SDK for JavaScript to make API calls on behalf of that person.

There is no extra set up required here, however you can use the onlogin setting in the button to trigger your own JavaScript function that will run upon login.

Can I use the Login Button with server-side registration code?

You can, however you will still need to use the JavaScript SDK partially. Once the login process started by clicking on the button is done, the SDK will have access to an authResponse object using FB.getLoginStatus(). You can use this function to pass the response object to your server-side code to complete any registration that exists there.

Can I use the Login Button to re-request a permission that a person has declined?

The Login Button doesn't support re-requests because asking for declined permissions doesn't fit the verb on the button. If you need to re-request a permission, set up a custom button and use FB.login() as described in the Facebook Login for the Web documentation.