Along with registering an account with your store using a Yahoo!, Google, or AOL ID for authentication, you can also give your customers the option to use a Facebook ID. If you wish to offer this option, you'll need to create a Facebook application and provide a valid Facebook Application ID and Application Secret when enabling the "Allow Facebook ID" option in Checkout & Registration Manager. Both the Facebook Application ID and Application Secret are required by Facebook for authentication purposes.

If your store uses custom checkout CSS, please see our important notes for stores using custom checkout CSS. You will need to edit your custom checkout CSS file to enable this feature, or to modify your checkout CSS settings to use either default styles or configurable styles. Learn more.

To enable customer registration using a Facebook ID, you must first create a Facebook application in order to generate a Facebook Application ID and Application Secret:

1. Go to the Facebook Developers page.
2. Sign in to your Facebook account. If you do not have a Facebook account, you will need to create one.
3. Click the "Apps" link located at the top of the page.
4. Click the "Create New App" button.
5. Enter a display name for your application in the "App Display Name" field. Ensure that the "I agree to the Facebook Platform Policies" checkbox is selected. (We strongly recommend reading the Facebook Platform Policies before agreeing to them.)
6. Click the "Continue" button.
7. You may see a security check screen. If so, enter the CAPTCHA information.
8. You will be taken to the settings screen for your application, where the Application ID and Application Secret appear (listed as App ID and App Secret). We recommend copying this information into a text file and saving it to your computer to easily access later.
9. In the Basic Info section of this page, you will need to enter your store domain into the "App Domain" field for your Facebook App Settings (e.g., papayadayspa.com). This is required to enable the Facebook provider ID option for your store. If your store domain is not entered or is missing, the provider ID sign in option will not work for your store.
10. Next, scroll down to the "Select how your app integrates with Facebook" section of the page, and click the "Website" option.
11. Enter your site URL (e.g., http://www.papayadayspa.com). This information is also required to enable the Facebook provider ID option for your store. If missing or invalid, you will not be able to save your app settings.
12. Click the "Save Changes" button.

Once you've created a Facebook application and have your Facebook Application ID and Application Secret:

1. In the Global Settings section of Checkout & Registration Manager, click the "Customer Registration" tab.
2. If you already have Customer Registration enabled for your store, proceed to step 3. If you don't have Customer Registration enabled, learn how to enable it.
3. Locate the "Allow Facebook ID" option, and select "Customers can register using their Facebook ID."
4. Enter your Facebook Application ID in the "Application ID" field, then enter your Application Secret in the "Secret" field. (Copying and pasting these values is recommended.)
5. Click the "Save" button to save your changes without previewing.
6. Go to Store Editor to preview the changes to your register and sign-in pop-ups.
7. Publish your Order Settings and Store Editor.

Important notes for stores using custom checkout CSS

If your store uses custom checkout CSS, the Facebook logo will not by enabled and displayed by default in your store's Customer Registration register and sign in pop-ups. Instead, you may see what should be the Facebook logo replaced with a second Yahoo! logo. In addition to enabling the "Allow Facebook ID" option in Checkout & Registration Manager, you will also need to do one of the following:

Option 1. Edit your custom checkout CSS file.

If you wish to retain your custom CSS, you may edit your custom CSS to enable the Facebook logo.

1. In the Visual Customization section of Checkout & Registration Manager, access the "Custom Styles" page.
2. Download your current custom checkout CSS file by clicking the "Download custom CSS file" link and saving the file to your computer.
3. When the CSS file is open for editing, find both instances of provider-sprite.gif and replace these with provider-sprite-yagf.gif.
4. Add the following CSS styles to the custom CSS file, as the CSS styles are shown below:
   
   li#yscp_facebook a {background-position:0 -150px;}
   li#yscp_facebook a:hover {background-position:-150px -150px;}
   
   
5. Save the changes you've made to your custom CSS file.
6. On the Custom Styles page, go to the "Upload CSS File" section of the page and click the "Browse..." button.
7. Locate the updated custom CSS file on your computer and click the "Upload" button to upload it.
8. Publish your Order Settings.

Option 2. Change to the "Default" or "Configurable Styles" setting.

Alternately, you may change your custom checkout CSS to "Default" or "Configurable Styles" in Checkout & Registration Manager to enable the Facebook logo on your Customer Registration register and sign in pop-ups. Note: Performing the following steps will overwrite the custom CSS you currently have in place. This option is not recommended if you wish to retain your custom checkout CSS.

1. In the Visual Customization section of Checkout & Registration Manager, change your settings either "Default" or "Configurable Styles."
2. Publish your Order Settings.