Overview
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 it Works
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 AmeriCommerce online store. It will send the customer back to the AmeriCommerce 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.
The Setup
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:
- Navigate to the Settings tab on the left
- Select the Advanced tab at the top.
- Locate the setting "Client OAuth Login"
- Enable it.
- Find this setting: "Valid OAuth redirect URIs".
- Add https://public.americommerce.com/facebook/login to this field.
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:
##FACEBOOKLOGIN## - This will need to go in the Customer Login Page
located under Themes > Edit > Pages > Customer Login > HTML Editor.
Note: ##FACEBOOKLOGIN## - 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; }
Comments
8 comments
This is great! You should make the code you show on this page as text so I can copy and paste it into my site!
What counts as a Newer Theme? I have the Base Theme, but it doesn't seem to be working.
What happens if a customer already has an account and clicks login with Facebook?
Does it link that account to Facebook?
Copy&Paste would be very nice; but I'm happy enough with getting this feature!
Since I rewrote it you might as well copy & paste it.
<ac:visibilityarea id="btnFacebookLogin">
<div class="form-signin">
<div class="pad-10 pad-t-only">
$$FACEBOOKLOGINBUTTON$$
</div>
</div>
<p style="text-align: center;">- or -</p>
/ac:visibilityarea
<ac:visibilityarea id="LinkedLoginServices">
<div class="panel panel-default">
<h3 class="panel-heading no margin MyAccountSectionHeader"? Linked Login Services</h3>
<div class="panel-body">
<div class="pad-10 pad-t-only">
$$FACEBOOKLINKACTION$$
</div>
</div>
</div>
/ac:visibilityarea
Michael - customers can link their existing account to Facebook. Login, click MY ACCOUNT, scroll down & link.
John - I did see the feature for customers to link their account, I was just hopeful there was something more automated.
Instead of requiring existing customers to go to their account page and linking to facebook it would be nice if there were something like a prompt to put in the password tied to that account, or maybe an email sent to that account, and clicking a button to verify the account.
Don't get me wrong, I'm happy to see this feature, and I'm excited to use it. I just wondered how we could make it easier for existing customers to link their account.
Thanks for the text, and the response.
@admin - To answer your question, all responsive themes should have this functionality. However, if you cannot get it to work on your store front, try adding the $$FACEBOOKLOGINBUTTON$$ merge code into the customer login header widget of your theme using the Widget Layout. Hope this clarifies that.
What John wrote above had some < brackets missing. Seems that saving the post deleted them.
Just be aware that the ac:visibilityarea is enclosed with <>
Here is how I did mine. Did a slight modification to make it look natural in my web site. It actually works pretty cool.
<!-- FB code -->
<div>
<p style="text-align: center;">- or -</p>
<ac:visibilityarea id="btnFacebookLogin">
<div class="form-signin">
<div class="button">
$$FACEBOOKLOGINBUTTON$$
</div>
</div>
/ac:visibilityarea
<!-- end FB code -->
and for CSS on the customer login page I added this.
.FacebookButton { background-color: #4c66a4; color: #fff; }
.FacebookButton:hover { background-color: #364c7c; color: #fff; }
.FacebookButton .icon-facebook { font-size: 1.2em; }
This didn't seem to fit anywhere nor do anything when I added it that I could see so I left it off.
.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%; }
and for the Customer my account page I did this.
<!-- FB code -->
<div>
<ac:visibilityarea id="LinkedLoginServices">
<div class="panel panel-default">
<h3 class="panel-heading no margin MyAccountSectionHeader"> Linked Login Services</h3>
<div class="panel-body">
<div class="pad-10 pad-t-only">
$$FACEBOOKLINKACTION$$
</div>
</div>
</div>
/ac:visibilityarea
</div>
<!-- end FB code -->
Please sign in to leave a comment.