Introducing the new Login With Facebook feature! This is a single sign on integration that store owners can now use. It allows their customers to quickly login using their Facebook account for quick and easy registration. Everybody wins!
How Does It Work?k
When a customer clicks the Facebook Button it will send them to a Facebook Login page. If they are already logged in, it will refresh and log them in through the Spark Pay online store. It will send the customer back to the Spark Pay online store, to the page they were at initially. So if the customer signs in at checkout through Facebook, they will then be redirected back to the checkout after signing up. They will also have an account created in the back end of the customer records, and automatically be logged in. This customer account is like any others, and all functionality is still available as if they were to register the usual way by typing in all their information. What's good too - When they return to the store if they select "Login with Facebook" they will be signed in with their Facebook account automatically.
Using the "Login with Facebook" feature will also pre-fill the customers name and email at checkout, which is a huge benefit for mobile device users.
How do I set it up?
This is now included in all new themes from here on out. However, if you have an older theme you will need this to be added manually if you wish to have this functionality.
To get started, navigate to Tools > Apps & Addons > Facebook.
Note: If you are adding any additional facebook integration info above for an app you have, it will work with the temporary domain. So when you're in the works of this on the facebook end you'll want to set the app domain to americommerce.com . But keep the subdomain in the site and mobile site urls. Otherwise, you will get this error:
Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
To prevent this from occuring, in the Facebook dev area for the app, you will also need to do the following:
1. Navigate to the Settings tab on the left
2. Select the Advanced tab at the top.
3. Locate the setting "Client OAuth Login"
4. Enable it.
5. Find this setting: "Valid OAuth redirect URIs".
NOTE: Facebook login will not work if your facebook application is in developer made. Be sure to switch to live mode by going to the App Review Page:
To manually add the Login With Facebook feature to the theme:
- This will need to go in the Customer Login Page
located under Themes > Edit > Pages > Customer Login > HTML Editor.
Note: - can be used to place a facebook login button almost anywhere instead of just on login pages.
When it has been implemented, it will display like this:
The Customer My Account Page also needs to include the following:
*
*
If this is a newer theme, this CSS is already present. Otherwise, it will need to be added manually.
Find the following:
.form-signin input { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; }
Change it to:
.form-signin input, .form-signin button { position: relative; font-size: 16px; height: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; }
Extra optional additions for further customization:
.FacebookButton { background-color: #4c66a4; color: #fff; }
.FacebookButton:hover { background-color: #364c7c; color: #fff; }
.FacebookButton .icon-facebook { font-size: 1.2em; }
Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy.
While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs.