Home > BigCommerce > Docs > How to Setup BigCommerce Login with Facebook?

How to Setup BigCommerce Login with Facebook?

Last updated: March 01, 2024
This article has been written and researched by our expert Avada through a precise methodology. Learn more about our methodology

Sam

Author

Daniel

Researcher

Social media has long been considered an indispensable element for successfully running an online business. They accompany your store from the beginning to the post-purchase phase. Knowing how to make good use of them will decide whether your store attracts many customers or not. And setting up a Facebook login button on the sign-up page is a part of it.

That is why this article is written. It will revolve around everything you need to know about Facebook login, including what they are, the functions, and most importantly, a tutorial of How to set up BigCommerce login with Facebook.

If you are interested in the same topic, keep reading to find out more!

What are Facebook logins?

BigCommerce login with Facebook

It is stated that the number of people using Facebook as one of their main sources for social networking has increased up to 2.85 billion across the globe. For this reason, a plethora of eCommerce retailers has updated their website with Facebook logins for convenient purposes.

More specifically, logging in with Facebook gives users the ability to utilize their current information to sign in to third-party sites. In this way, they do not have to fill in the form one more time and quickly track these websites from Facebook. Additionally, they may skip the password creation process, and it is totally fine not memorizing it.

OAuth, a mechanism used for granting third-party apps a “session token” so they may post to providers on behalf of the user, is often implemented when Facebook logins are employed.

Why should your store use BigCommerce login with Facebook?

There are reasons leading to the common use of BigCommerce login with Facebook. Some of its outstanding benefits could be listed below:

  • Easy to use: within only one button, your visitors can quickly sign in for an account and start using or shipping at your store. There is no need to think of a new account name or password and start typing the information repeatedly. This decreases the friction that customers experience while they are onboarding or returning to your site.
  • Gain permission to access private information: The moment your customers start integrating their Facebook account with your BigCommerce store, you are allowed to gather valuable information about their demographics and social circumstances. These contain everything from address, hometown, date of birth, phone number or email address. Apparently, most people tend to have only one account at a time, which has proven the authenticity of this data.
  • Growth in registration rate: The data has illustrated that nearly 90% of users choose to exit from a website instead of finishing a standard registration form. Thanks to this innovation, the average conversion rate for eCommerce stores has been around 50% greater.

How to set up BigCommerce login with Facebook for your online business?

Now that you have already gained a full understanding of the definition, how it works and the advantages that BigCommerce login with Facebook can bring to your business, let’s make it real. We will guide you through the setting up process for Facebook login button to your website in the easiest way possible, steps by steps:

Step 1: Fulfill requirements

Several things you need to have in order to have access to setting up your BigCommerce login with Facebook button appearing on the signup page:

If you have not signed up for this account, make sure that you have it all well-prepared before the journey begins!

On the other hand, once you have fulfilled all the mentioned requirements, you are ready to move on to the next step.

First of all, go to your Facebook App Dashboard, you can see in the center of the screen there is a section called “Facebook Login” and a “Set up” button under that, click on it:

Set up the Facebook login

On the left-hand side, choose the “Settings” under the “Facebook Login” text:

Facebook Login settings

Scroll down and then you will see a box asking you to fill in your URL links under the line “Valid OAuth Redirect URls”, copy and paste in your link:

Copy and paste your URL link

Don’t forget to “Save” your work!

Step 3: Checking a visitor’s status

This is where you can identify if someone is logged into Facebook with their username and password before entering your website or not. Therefore, FB.getLoginStatus will begin a call to Facebook to check the status of your customer. Once Facebook has retrieved the results, it invokes your callback function.

This is how your code for the calling part will look like:

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

The “Status” might change depending on your customers’, there are three types of them in total:

Status Type Description
connected The person is logged into Facebook, and has logged into your webpage.
not_authorized The person is logged into Facebook, but has not logged into your webpage.
unknown The person is not logged into Facebook, so you won’t know if they have logged into your webpage. Or FB.logout() was called before, and finanly, it cannot connect to Facebook.

If they appeared as “connected”, the system will automatically answer with one of these authResponse parameters, such as:

authResponse Parameters Value
accessToken An access token for the person using the webpage.
expiresIn A UNIX time stamp when the token expires. Once the token expires, the person will need to login again.
reauthorize_required_in The amount of time before the login expires, in seconds, and the person will need to login again.
signedRequest A signed parameter that contains information about the person using your webpage.
userID The ID of the person using your webpage.

Step 4: Inserting the Login with Facebook button

Setting up the BigCommerce login with Facebook might look difficult and require a lot of technical knowledge to finish them. However, we have simplified the process to solve your problems. Just ensure that you follow every single step carefully:

Facebook will provide you with a Plugin Configurator, where you can adjust the size and the text for your BigCommerce log in with the Facebook button. If you are done, choose “Get code” underneath the table:

Get code

You insert the following code after the content script:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v10.0&appId=2946661078949907&autoLogAppEvents=1" nonce="YoflBAAn"></script>

And this one at anywhere you want it to be available on your site:

<div class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="false"></div>

Step 5: Additional settings (if necessary)

Furthermore, you can also update a box asking for the permission of your customers to use their private information by adding this set of code:

FB.login(function(response) {
  // handle the response
}, {scope: 'public_profile,email'});

Also, rather than logging a person Facebook account in, your customers can log out from your website within this call:

FB.logout(function(response) {
   // Person is now logged out
});

Another recommended way is to customize your BigCommerce login with Facebook button into “Continue as Name”, it’s something looks like this:

An example

All you have to do is change a little bit in your original login button code by adding data-use-continue-as=”true”. The downside here is that it is impossible to adjust the button size based on your preference. This has been a default setting designed by Facebook:

Conclusion

So that is everything you need to catch up with relating to How to set up BigCommerce Login with Facebook button. It might look challenging at first, but it is all worth it once you have put your effort into it!

We hope that this article has cleared your thoughts and helped you set up your own login with Facebook for your BigCommerce store!


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.