Introduction : Login Button

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

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.

Information: Login Button

If someone hasn’t logged into your app yet, they’ll see this button, and clicking it will open 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.

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. Enable Continue as {Name} by adding data-use-continue-as=”true” to the settings for your button.

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

Button SizeHeightWidthCustom Widths?
Small20 px200 pxNo
Medium28 px200 – 320 pxYes
Large40px240 – 400 pxYes

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} Login 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 JavaScript SDK buttons that say “Continue With Facebook”.

Login Button

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.

Login Button 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
  • Use a placeholder/spinner while the Login button is loading and remove it when button is loaded. An example of such code:


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

auto_logout_linkdata-auto-logout-linkIf enabled, the button will change to a logout button when the user is logged in.falsetrue
onlogindata-onloginA JavaScript function to trigger when the login process is complete.Function
scopedata-scopeThe list of permissions to request during login.public_profile (default) or a comma separated list of permissions
sizedata-sizePicks one of the size options for the button.smallmediumlarge
default_audiencedata-default-audienceDetermines what audience will be selected by default, when requesting write permissions.everyonefriendsonly_me


Old buttons will be migrated to the new buttons. The following table shows the mapping.

Old ButtonOld HeightNew ButtonNew Height
Icon18 pxDeprecatedDeprecated
Small18 pxSmall20 px
Medium22 pxSmall20 px
Large25 pxSmall20 px
XLarge39 pxSmall20 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, it 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, your buttons will appear as specified.

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 iframe and load up the resources to render the button.

Login button


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.

Also know more about Book it Now-How to the Login it now ?

Leave a Reply

Your email address will not be published. Required fields are marked *