Enable customer registration with a Facebook ID

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.


  Did you build your store with another tool? Offering Facebook as a provider ID option for Customer Registration isn't currently supported for stores built using Web Hosting tools.

If you want 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: See our important notes for stores using custom checkout CSS. You'll 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.

To enable customer registration using a Facebook ID, first create a Facebook application.

  1. Go to the Facebook Developers page.
  2. Sign in to your Facebook account.
  3. Click the Apps link located at the top of the page.
  4. Click Create New App.
  5. Enter a display name for your application in the "App Display Name" field.
  6. Check the I agree to the Facebook Platform Policies checkbox is selected.
  7. Click Continue.
  8. If you're taken to a security check screen, enter the CAPTCHA code.
  9. You'll be taken to the settings screen for your application, where the Application ID and Application Secret appear.
  10. Under the Basic tab, click Settings.
  11. Click Add Platform.
  12. Click the Website option.
  13. Enter your domain name, without "www.". This information is required to enable the Facebook provider ID option for your store.
  14. Enter the same domain into the "App Domains." This is required to enable the Facebook provider ID option for your store. 
  15. Click Status & Review.
  16. Click Yes to make this app and all its live features available to the general public option in the first section.
  17. Click Save Changes.

After you've created a Facebook application, you'll need to enable this feature in your store.

  1. In the Global Settings section of Checkout & Registration Manager click Customer Registration.
  2. Enable Customer Registration.
  3. Next to "Allow Facebook ID" option, select Customers can register using their Facebook ID.
  4. Enter your Facebook Application ID in the "Application ID" field.
  5. Enter your Application Secret in the "Secret" field.
  6. Click Save.
  7. Go to Store Editor to preview the changes to your register and sign-in pop-ups.
  8. Publish your Order Settings and Store Editor.

Notes for stores using custom checkout CSS

If your store uses custom checkout CSS, the Facebook logo wont be 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'll also need to either edit your custom checkout CSS file, or change to the "Default" setting.

Edit your custom checkout CSS file

  1. In the Visual Customization section of Checkout & Registration Manager, Custom Styles page.
  2. Download your current custom checkout CSS file by clicking Download custom CSS file.
  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.
  7. Click Browse....
  8. Locate the updated custom CSS file on your computer and click Upload.
  9. Publish your Order Settings.

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.

 

  • Was this article helpful?

  • Yes
  • No

Still need help?