How to Set Up Facebook Social Login for BuddyBoss

Introduction

Facebook Social Login allows users to seamlessly log in or register on your BuddyBoss Platform (Web and App) using their Facebook accounts.

This guide provides step-by-step instructions on enabling and configuring Facebook Social Login, enhancing user convenience and engagement while simplifying account management.

Prerequisites and Key Considerations

App Publishing Requirements

• If you enable Social Login in the BuddyBoss App, both Google and Apple Social Logins are required for publishing on app stores. This is mandatory even if other social providers (e.g., Facebook, X, LinkedIn) are used, ensuring compatibility with device-associated accounts.
• Google and Apple Social Logins are optional only if the BuddyBoss App exclusively uses your company’s account sign-in system.

Important Limitation:
The Pull Additional Data from Social Account feature does not support syncing profile photos when using Facebook Social Login.

Note: Any changes to the Social Login settings require new builds for both iOS and Android apps. Ensure to regenerate and publish updated app versions after making any modifications.

Required Information for Facebook Social Login

To enable Facebook Social Login, you need the following details:

• App ID
• App Secret

Creating a Facebook App for Social Login

Follow the steps below to create a Facebook App and obtain the required App ID and App Secret for integrating Facebook Social Login with your BuddyBoss Platform.

Step 1: Access Facebook Developer Console

1. Navigate to the Facebook Developer Console.
2. Log in using your Facebook credentials.
3. Click the Create App button.

Step 2: Enter App Details

1. Fill in the following fields:
   • App Name: This name will appear on the Consent screen during login.
   • App Contact Email: Provide an email for inquiries related to the app.
2. Click Next.

Step 3: Select Use Case

1. For Use Cases, select:
   • Authenticate and Request Data from Users with Facebook Login.
2. Click Next.

Step 4: Connect Business Profile

1. Select the Business Profile you want to connect to this app.
2. Click Next.

3. Click Go to Dashboard

Step 5: Customize Use Case

Step 5.1: Add Permissions

1. From the App Dashboard, click on Use Cases from the left sidebar.

2. Under Authentication and Account Creation, click Customize.

3. Under Permissions, click Add next to Email.

Step 5.2: Configure OAuth Redirect URIs

1. In the left sidebar, click Settings under Permissions.

2. In the Valid OAuth Redirect URIs field, add the following URL:

https://yourdomain.com/wp-login.php?bb_social_login=facebook

3. Click Save Changes.

Note: If you receive a blank page after saving, refresh the page to confirm the changes were applied.

Step 6: Configure Facebook App Settings

1. In the left sidebar, go to App Settings > Basic.

2. Fill in the following fields:
   
   • App Domains: Enter your domain name without subdomains (e.g., yourdomain.com).
   • Privacy Policy URL: Provide a public and accessible link to your website’s privacy policy that explains what data you are collecting and how you will use that data.
   • User Data Deletion:
     • Choose Data Deletion Instructions URL.
     • Enter the URL for instructions on how users can delete their accounts.
     • This is required to comply with GDPR regulations.

If each user has an option to delete the account, the URL should point to a guide showing the way users can delete their accounts.

If the accounts are deleted by an admin, then you should have a section with the contact details, where users can send their account erasure requests (e.g. Privacy Policy).

In this case, the URL should point to this section of the document.

• Category: Select the relevant category for your app.
• App Icon: Upload a 1024×1024 app icon.

3. Click the + Add Platform button at the bottom of the page.

4. Select Website as the platform and click Next.

5. Enter your Site URL.

6. Click Save Changes.

Note: By default, your application only has Standard Access for the “public_profile” and “email” permissions, which means that only you can log in with it.

To get Advanced Access you will need to go through the Business Verification, and you can start on the “Verification” tab on the left side.

Step 7: Prepare the App for Verification

1. In the left sidebar, navigate to Review > App Review.

2. Click Edit on your current request.

3. Answer the Data Handling Questions.
4. Click Submit.

5. Complete the App Verification process, including:

• How will your app use the Advanced Access Email permission
• How will your app use the Advanced Access public_profile permission

6. Click Submit for Review.

Step 8: Publish the App

1. In the left sidebar, click Publish.
2. Click Publish at the bottom.

3. Go to the Required Actions tab on the left menu

4. Click Get Started on the Annual Data Use Checkup.
5. Complete the following sections:

• Verification
• Data Handling
• Usage Check
• Testing Instructions
• Terms & Policies

6. Click Submit.

Step 9: Obtain App ID and App Secret

1. Navigate to App Settings > Basic.
2. At the top of the page, find your App ID.
3. Click Show to view your App Secret.
4. Copy these keys.

Step 10: Complete Setup in BuddyBoss Platform

1. Go to your WordPress Dashboard.
2. Navigate to BuddyBoss Plugin > Settings > General > Registration.
3. Click the pen icon next to Facebook Social Login.
4. Paste the copied App ID and App Secret into the respective fields.

5. Click Save Changes.

Adding iOS and Android Platforms for Facebook Social Login on BuddyBoss App

To enable Facebook Social Login on your BuddyBoss App for both iOS and Android, follow the detailed steps below. This ensures users can seamlessly log in using their Facebook accounts on both platforms.

For iOS

Step 1: Add iOS Platform to Facebook App

1. In the Facebook Developer Console, go to your App Dashboard.
2. Navigate to App Settings > Basic.
3. Scroll down to the bottom of the screen.
4. Click on + Add Platform.

Step 2: Select iOS Platform

1. In the pop-up window, select iOS.
2. Click Next to proceed.

Step 3: Enter iOS App Details

1. In the Bundle ID field, enter your Release and Test App Bundle IDs.
2. To find these:
   • Go to WordPress Dashboard > BuddyBoss App Plugin > Configure > iOS Settings > App Configuration.
   • Locate the Bundle ID for both Release and Test versions.

Step 4: Save and Confirm

1. Once all details are entered, click Save Changes.
2. Confirm the configurations are saved successfully.

Note: Repeat this process for both your main app and test app, using their respective Bundle IDs.
This ensures that both versions are properly configured for Facebook Social Login.

For Android

Step 1: Add Android Platform to Facebook App

1. In the Facebook Developer Console, go to your App Dashboard.
2. Navigate to App Settings > Basic.
3. Scroll down to the bottom of the screen.
4. Click on + Add Platform.

Step 2: Select Android Platform

1. In the pop-up window, select Android.
2. Click Next to proceed.

3. In the Android Store pop-up, select Google Play.
4. Click Next to continue.

Step 3: Add Key Hashes

Key Hashes are required for Facebook to authenticate your app on Android devices.

1. To generate the Key Hashes:
   • Convert your SHA-1 Certificate Fingerprint from Hex to Base64 here
   • Use an online Hex to Base64 Converter. (Example Converter)

Step 4: Get SHA-1 Certificate Fingerprint

To get your SHA-1 Certificate Fingerprint:

1. Log in to your Google Console account.
2. Click on your App from the list.
3. In the sidebar menu, navigate to Test & Release > Setup > App Signing.
4. Copy the SHA-1 Certificate Fingerprint displayed on the page.

Note: For the Release app or Test app, go to WordPress admin dashboard > BuddyBoss App > Build, then click Install on Android Device to download your SHA-1 Certificate Fingerprint.

Step 5: Convert SHA-1 to Base64

1. Go to a Hex to Base64 Converter.
2. In the Hex String field, enter your SHA-1 Certificate Fingerprint.
3. Click Convert.
4. Copy the Output (Base64 format).

Step 6: Enter Android App Details

1. In the Facebook Developer Console, go to the App Dashboard.
2. Under Key Hashes, paste the Base64 Output.
3. In the Package Names field, enter your Release and Test App Application ID.
4. To find this:
   • Go to WordPress Dashboard > BuddyBoss App Plugin > Configure > Android Settings > App Configuration.
5. In the Class Name field, enter: com.bbapp.MainActivity

Step 7: Save and Confirm

1. Click Save Changes to complete the configuration.
2. Confirm the configurations are saved successfully.

Note: If the Facebook Social Login checkbox remains greyed out, click the pencil icon again and select Verify Settings.

Troubleshooting and FAQs

Q: Why is the Facebook Social Login not appearing on my site?

A: Ensure Enable Social Login is checked in BuddyBoss Settings. Verify that the App ID and App Secret are correctly entered and saved.

Q: Why is the Profile Picture not syncing?

A: Facebook Social Login does not support syncing profile photos due to Pull Additional Data from Social Account limitations.