NitroSell is pleased to announce that Facebook Connect is now available for all the stores on our ‘Beta’ branch. Facebook Login is a secure and easy way for people to register/log in to your WebStore.
The two main benefits are the speed with which a user can log in and register on your site and the shoppers no longer needing to memorize another username/password.
How does the integration work?
We want to make easier for the shoppers to log in your store, so if the user has already bought something from your store and he was registered with the same email he is using in ‘Facebook’ then he will be able to automatically log in your store after clicking on the ‘Facebook Log in’ button. It will be exactly as he had logged in with his traditional account.
If the customer exists but he used a different email to register then he can still link his Facebook account with his traditional account. To do so, he need to log in with his store credentials, go to the ‘Update Account’ page and click the link: “Login with Facebook to add or update details from your profile to your webstore account.”. After that his store account will have his Facebook ID and he will be able to log in with both systems.
If he is a new user after clicking on ‘Facebook Log in’ he will be redirected to the ‘Register’ page where all the information provided by Facebook will be auto populated. We use this information to create a traditional webstore account so if he decides he doesn’t want to use ‘Facebook’ any more he will still be able to log in your store using his email.
How to enable Facebook connect?
There are two options for enabling Facebook connect, and which one you choose depends on how your store is configured.
In the WebStore Manager go to ‘Settings’ → ‘Customer’. You will see the following:
(a) The first option (Enable Facebook login with NitroSell’s Facebook app (per-store SSL disabled)) is for when your store is using NitroSell’s shared SSL certificates, that is, your checkout is at https://secureX.nitrosell.com/, in which case the webstore can use NitroSell’s Facebook App to provide the service. If your store does not use a custom SSL cert, it is quicker and more straightforward to use this option. Simply select it, toggle the checkbox, and click Save:
(b) The second option (Enable Facebook login with your own Facebook app (per-store SSL enabled)) is for when your store is using its own SSL cert, that is, your checkout is at https://yourdomain.com, in which case you will need a unique Facebook App for your store. Please follow this guide to create the app under your own Facebook account. (NitroSell support is happy to assist with this process.) Once you have created the App, select the option, enter your App’s ID and Secret, and click Save.
Enabling either option will include the ‘Facebook Log in’ button on the ‘Update’ and ‘Registration page’ and on the one-page checkout automatically (if your templates are unmodified). If you have customised the templates you will need to update the templates.
When ‘Facebook Login’ is enabled the link in the checkout: ‘Please login if you have an account.’ will be substituted by a button with the text ‘Sign in’ . Be aware that probably you will need to redesign the look of that button to mimic your own store.
If the button doesn’t appear automatically you will need include it manually in the ‘Login Panel’ template.
How do I modify the buttons?
The size of the button can be adjust changing the html, you can choose between: icon, small, medium, large and xlarge. You can see more information here
<input type="hidden" name="action" value="Login" /></form>
{if (pageproperty['socialloginlink'] ne '')}
<div id="fb_login_button" align = "center">
<a href="{pageproperty['socialloginlink']}">
<div class="pluginFaviconButton pluginFaviconButtonEnabled pluginFaviconButtonMedium" tabindex="0" id="u_0_0">
<table class="uiGrid _51mz" cellspacing="0" cellpadding="0">
<tbody>
<tr class="_51mx">
<td class="_51m-">
<i class="pluginFaviconButtonIcon img sp_login-button sx_login-button_medium"></i>
<i class="pluginFaviconButtonIconActive img sp_login-button sx_login-button_mediuma"></i>
</td>
<td class="_51m- _51mw">
<span class="pluginFaviconButtonBorder">
<span class="pluginFaviconButtonText fwb fcw">Log In</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</a>
</div><!--end #fb_login-->
{endIf}
Another option is to add a fixed image of the Facebook login button in your Login Panel.
{if (pageproperty['socialloginlink'] ne '')}
<div class="fb-signin">
<a href="{pageproperty['socialloginlink']}">
<img src="{SITE_PATH}themes/assets/images/facebook-sign.png" alt="Sign In with facebook">
</a>
</div><!--end #fb_login-->
Permissions
At NitroSell we are aware that shoppers want to protect their privacy so we kept the permissions we require to the minimum. We only ask for their name, their location and their email. Information that they would need to complete an order.