Login Button-Here is the amazing things about it

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.

Table of Contents

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 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 Size	Height	Width	Custom 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} 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”.

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:

Settings

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


`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`
`onlogin`	`data-onlogin`	A JavaScript function to trigger when the login process is complete.	`Function`
`scope`	`data-scope`	The list of permissions to request during login.	`public_profile` (default) or a comma separated list of permissions
`size`	`data-size`	Picks one of the size options for the button.	`small`, `medium`, `large`
`default_audience`	`data-default-audience`	Determines what audience will be selected by default, when requesting write permissions.	`everyone`, `friends`, `only_me`

Migration

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

Old Button	Old Height	New Button	New 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, 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.

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.

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