Picture of Social Logins - Facebook

Social Logins - Facebook

 

  1. What Is This?

    • Facebook Integration allows your customers to log in or register with a single click using their Facebook account. It also supports uploading images from a user’s Facebook albums into MegaEdit.

  2. Why Use It?

    • Simplifies registration and login processes, which can improve user adoption.
    • Makes it easier for users to import their own images from Facebook into MegaEdit.

  3. Key Scenarios

    • Storefronts wanting a quick, user-friendly registration option.
    • Sites that rely on user-generated content, especially images (e.g., in MegaEdit).

  4. High-Level Steps

    1. Create a Facebook Developer App for your storefront.
    2. Enter the App ID/Secret into your Infigo Admin (External Authentication > Facebook).
    3. Optionally Enable “Create users if not present” for automatic Infigo account creation.
    4. Go Live in your Facebook app settings if you want to allow anyone (not just test users) to log in.

  5. Important

    • If you don’t see the External Authentication configuration pages, you may need higher-level admin privileges or help from Infigo Support.
    • Keep your Facebook App Secret private.
    • When you first create your Facebook app, it is typically in “development” mode and only accessible to admins/testers you specify within Facebook.

1. Facebook Integration Overview

Your Infigo storefront can integrate with Facebook for two main purposes:

  1. Facebook Login

    • Allows customers to register an account or sign in via Facebook credentials.

  2. Facebook Image Upload

    • Enables customers to import pictures from their Facebook photo albums into MegaEdit.

To apply either feature to a storefront, you must create and configure a Facebook application via a Facebook Developer account. Generally, you should use a neutral, company-owned Facebook account so multiple team members can manage or update settings if needed.

Note: Infigo provides guidance for configuring your app to work with our platform. For all Facebook-specific setup or changes (e.g., “Going Live”), refer to Facebook’s official documentation or contact Facebook directly.

2. Setting Up Facebook Login

2.1 Create or Access Your Facebook App

  1. Go to Facebook for Developers and log in.
  2. Navigate to My Apps → Create App and select “Other” when prompted for the app type.
  3. Provide an App Name and other required details.
  4. Go to Settings > Basic, and ensure you do the following:
    • App Domains: Add your store’s domain (e.g., mystore.com, or training.infigosoftware.com if that is the domain you use).
    • Contact Email: Verify this is an email you can monitor for Facebook notifications.

2.2 Add the Platform (Website)

  1. On the Basic page, scroll down and click Add Platform.
  2. Select Website, then add the Site URL for your Infigo storefront, including https://.
  3. Click Save Changes.

2.3 Configure Facebook Login

  1. Under Add Product, click Set Up beside Facebook Login.
  2. Choose Web and enter your Site URL again if prompted.
  3. From your app dashboard, go to Facebook Login → Settings:
    • Valid OAuth Redirect URIs: Add your storefront URL followed by /Plugins/ExternalAuthFacebook/Login.
      • For example:
         
        https://training.infigosoftware.com/teststorefeb25/Plugins/ExternalAuthFacebook/Login
    • Redirect URI to Check: Paste that same URL and click Check URI to ensure it’s valid.
    • If required, enable Embedded Browser OAuth Login (often beneficial for mobile flow).

2.4 Obtain Your App ID and App Secret

  1. Return to Settings → Basic.
  2. App ID is visible by default—copy it for use in Infigo.
  3. App Secret is hidden—click Show and re-enter your Facebook password if prompted.
  4. Keep these credentials handy for the Infigo Admin setup.

2.5 Configure in Infigo Admin

  1. Log in to your Infigo Admin (Platform Admin or an account with the right permissions).
  2. Go to Admin > Configuration > Plugins > External Authentication.
  3. Find Facebook in the list and select Configure (in the Actions column).
  4. Enter:
    • Client key identifier = App ID
    • Client secret = App Secret
  5. Click Save to confirm.
  6. Ensure Facebook is enabled in the plugin list. (If there’s an Enable/Disable checkbox, tick it.)

2.6 (Optional) Create Users If Not Present

By default, Facebook Login will only log in users whose Facebook email matches an existing Infigo account. However, you can allow entirely new users to be created automatically if their Facebook email does not match any existing account:

  1. In the Infigo Admin, go to Admin > Configuration > Settings > Customer Settings > Registration.
  2. Look for a group named External authentication (or similar).
  3. Toggle Create users if not present.

2.7 Testing Your Facebook Login

  1. Log out of your storefront.
  2. Go to Login or Register, then click Sign in with Facebook.
  3. Approve any permissions requested by Facebook.
  4. You should be redirected back, now logged in.

If new user creation is enabled, verify that the newly created account appears in Admin > Customers. If it’s disabled, confirm that users without a matching email cannot log in.

3. Facebook Image Upload in MegaEdit

If your storefront uses MegaEdit, you can allow customers to upload images directly from their Facebook albums. To enable:

  1. Complete steps 2.1 → 2.5 above (you need a Facebook app with the correct domain and OAuth settings).
  2. In Infigo Admin, navigate to Configuration > Settings > Media Album Settings.
  3. Enable Facebook in the Installed Image Plugins section.
  4. Enter your Facebook App ID in the provided field.
  5. Save your changes.
  6. In MegaEdit, users should now see an option to import images from Facebook if they are logged in via Facebook.

4. Going Live with Your Facebook App

Initially, your Facebook app is in development mode, meaning only the Facebook account that created the app and any invited testers can use it. To allow all Facebook users to log in:

  1. In your Facebook app dashboard, navigate to App Review or App Settings.
  2. Complete any required steps to request permissions (e.g., email, user_photos, etc.).
  3. Switch the app from development to live.
  4. Facebook may require additional verification or detail for certain permissions (e.g., for user data like photos).

While we can offer advice on what permissions are needed (for example, email and user_photos for image import), the actual process of reviewing or approving your app is handled entirely by Facebook.

5. Troubleshooting & Tips

  • Permissions / Access: If you do not see External Authentication or the Facebook plugin, you might need a higher-level (Platform Admin) account or to contact Infigo Support to enable access.
  • Exact Match for Redirect URIs: Make sure the URL you enter in Valid OAuth Redirect URIs matches exactly what’s required by the plugin (including https:// and any subdirectory).
  • Keep App Secret Private: Treat your App Secret with care—if compromised, someone could misuse your app.
  • “Create users if not present”: If disabled, a user must already exist (with the same email) in your storefront to log in. If enabled, new store accounts are created automatically.
  • Going Live: While we can’t directly help with Facebook’s approval process, we do know that typically you need to request the following permissions at a minimum:
    • email
    • user_photos
    • Possibly user_birthday or user_hometown if your store uses that data.
  • Twitter Plugin Hidden: If you notice references to Twitter in your admin panel, note that it may be hidden or deprecated in some Infigo configurations. Please contact Support if you have questions about other social login options.
  • Facebook App vs. Facebook Page: A Facebook “App” (for developer purposes) is different from a standard business or personal Facebook Page. Make sure you are configuring the correct environment.
Incomplete
Alternate Search Terms
WYSIWYG stands for "What You See Is What You Get" which means that the styling choices made in this editor will be reflected on the front end.