The Social Connect addon extends the core functionality of the User Registration & Membership plugin by enabling seamless social media authentication. This powerful integration allows website visitors to register and log in using their existing social media accounts, eliminating the need to create and remember additional login credentials for your WordPress site.

Prerequisites:
✅ Active installation of User Registration & Membership Plugin (Pro).
✅ Active installation of Social Connect Addon.

Install User Registration & Membership Pro #

To use the Social Connect Addon, ensure User Registration & Membership Pro is installed and activated. If not, purchase it from wpuserregistration.com and follow our guide on activating it with a license key.

Activate Social Connect Addon #

1. Navigate to User Registration & Membership > Addons in your WordPress dashboard.
2. Locate the Social Connect Addon in the list of available addons.
3. Toggle to activate the addon.

Once activated, you’ll find new Social Connect settings under: User Registration & Membership > Settings > Social Connect.

From here, you can configure your preferred social login options and begin setting up each social network integration. Currently, the plugin integrates with Facebook, X (formerly Twitter), Google, LinkedIn, and Instagram.

The social login option using social media (whichever is enabled) appears on your login page as below:

Social Connect Advanced Settings #

To get started using social connect, you need to go to Advanced Settings and toggle to “Enable social registration“. Also, toggle “Display social buttons in registration” to display the social buttons on your registration form.

Other Advanced Settings

• Allow Multi Social Login: Enable users to connect more than one social account to their profile. More on multi-social login.
• Default User Role: This option allows you to select the user role for social registration.
• Connect socially connected users with form: Choose the registration form from the dropdown to connect with the socially connected users. It will provide the additional form field from your registration form to socially connected users.

In order to allow users to edit their profile details and add more information, you will have to connect these users to the registration form created with the User Registration plugin.

• Social Login Position: Determine where social login should appear on your login form.
• Social Login Templates: Select a template for social login.

Social text: 

From here, you can edit the text that appears on the social icon login page.

Click the Save Changes button after you have set up everything. Now, you can start by authorizing the apps one at a time.

Setting Up Facebook Login in the User Registration Form #

The User Registration & Membership plugin enables you to integrate Facebook login or registration on your website, allowing users to log in or register using their Facebook accounts.

Prerequisites: 
✅ A Facebook developer account.

Step 1: Register a Facebook App

First, log in to the Facebook Developer portal or create a new account to access Meta for developers. Here’s where you’ve to create an app.

Click the Create App button to proceed.

Now, select the app Type as Consumer and hit the Next button.

You’ll now be asked to provide App Details:

• App Name: Enter your website name (e.g., “My Site Login”).
• App Contact Email: Use your admin email.

Once you give the app name and email, click the Next button.

Next, select App Use Case as Other. Continue clicking the Next button to complete the setup.

Now, you’ll see the details of your app, where you can confirm them and click Create App.

Step 2: Set Up Facebook Login

In your app dashboard, navigate to Products > Add Product.

Here, you need to select Facebook Login and click Set Up. After that, you’ll be asked to choose the platform for the app, so select Web.

Now, provide the necessary details like your site URL.

Follow the setup wizard until you reach the final step.

Step 3: Configure OAuth Redirect URIs

1. Go to Facebook Login > Settings.
2. Under Valid OAuth Redirect URIs, enter all URIs.
   • When configuring the Valid OAuth Redirect URIs for your User Registration & Membership plugin, you must add specific URLs that tell Facebook where to send users after they authenticate.
   • You can add pages such as login, my-account, and registration, and include the user_registration_social_login=facebook parameter at the endpoint.

After adding these URLs, click Save changes at the bottom of the Facebook settings page to apply your configuration.

3. Check the Redirect URI

You can now enter the OAuth redirect URI individually to verify its validity under the Redirect URI Validator.

Few examples of valid redirect URls:

• https://yoursite.com/login/?user_registration_social_login=facebook
• https://yoursite.com/my-account/?user_registration_social_login=facebook
• https://yoursite.com/registration/?user_registration_social_login=facebook

Important Notes: Replace yourdomain.com with your actual domain name.

Hence, these must match your site URLs. If you have added a custom page, copy the URL and add the endpoint as mentioned earlier under valid OAuth redirect URIs. You can add multiple redirect URIs if you have login functionality on different pages.

Step 5: Copy App ID and Secret

In your Meta dashboard, navigate to App Settings > Basic, locate:

• App ID.
• App Secret (click Show to reveal).

Copy both credentials and keep them safe.

Step 6: Configure the Facebook API Settings

In your WordPress dashboard, go to User Registration & Membership > Settings > Social Connect. Now, enable Facebook Login: Toggle the switch to “On”. Finally, paste the App ID and App Secret into their respective fields.

Click Save Settings. Users can now log in using their Facebook account.

Step 7: Test Facebook Login

1. Open your website in Incognito or private browsing mode.
2. Navigate to the login or registration page.
3. Click the Login with Facebook button.
4. Users will be redirected to Facebook for authentication.

Troubleshooting

• “Invalid Redirect URI” Error: Ensure the URIs in Facebook’s settings match your site’s URLs exactly (case-sensitive, no typos).
• “App Not Live” Error: Add your domain to App Domains and ensure HTTPS is enabled.

For more details, visit Facebook Documentation.

Facebook Login is not working on Mobile Phones.

If you get the following error message while logging in using Facebook on your mobile devices, this suggests that the App you created on the Facebook Developer site isn’t live.

For this, follow the steps below.

• Go to Facebook for developers from here.
• Choose My Apps from the top bar.
• Click on your app icon ( then you will notice that your app is not live from the top bar ).

• From the left side, select Settings > Basic.
• Put your privacy policy link in the Privacy Policy URL, and in the User data deletion field, you can make a copy from this privacy policy ( select file from the top bar and select make a copy ).
• Save changes.

Setting Up Google Login in the User Registration Form #

Prerequisites:
✅ An active Google account.

If you have a Google account, you can easily create the API keys from Google. Follow these steps:

Step 1: Create a Google Cloud Project

1. Go to console.cloud.google and click on Create project on the top menu bar.

2. Enter a meaningful project name that you’ll recognize and select the organization location if required.
3. Click Create to create your project.

Step 2: Configure the OAuth Consent Screen

1. In the left navigation menu, expand APIs & Services and select OAuth consent screen.

2. Now, select your newly created project, and click on Get started.

3. Complete the required project configuration:

• Give the App name.
• Choose the appropriate user type for your application (External or Internal).
• Developer contact information.

 4. Click on Create.

Step 3: Create OAuth Client ID Credentials

Now, you’ll see the OAuth Overview screen asking you to create an OAuth client.

1. Click on Create OAuth client to create client IDs.

2. Select the application type as Web Application for your WordPress site.
3. Give the name to your OAuth 2.0 client.

Configure Authorized JavaScript Origins and Redirect URIs.

Note: When Google asks for a redirect URI, they’re essentially asking for a URL (e.g., https://yourdomain.com/callback). 

• Click Add URI (Uniform Resource Identifier) and add your website URL under Authorized JavaScript origins:
  
  For example: https://yoursite.com. Now, replace yoursite.com with your domain.

• Under the Authorized redirect URIs, add the URLs of the page where users will log in or register, followed by the endpoint:
  ?user_registration_social_login=google

These are the URLs of the page, where you want to allow user to log in or register using their Google account.

Few examples of valid redirect URls:

• https://yoursite.com/login/?user_registration_social_login=google
• https://yoursite.com/my-account/?user_registration_social_login=google
• https://yoursite.com/registration/?user_registration_social_login=google

Important Notes: Replace yourdomain.com with your actual domain name.

Hence, these must match your site URLs. If you have added a custom page, copy the URL and add the endpoint as mentioned earlier under valid OAuth redirect URIs. You can add multiple redirect URIs if you have login functionality on different pages.

Click Create to authorize Google login.  

Step 4: Add Credentials to WordPress

After creating the OAuth client, Google will give you a Client ID and a Client Secret. Copy both keys and navigate to WordPress Dashboard.

You can also access these keys throguh APIs & Services >OAuth consent screen. Click on Clients and open your recently created client to view the keys.

In your WordPress Dashboard:

1. Go to User Registration & Membership > Settings > Social Connect >API Settings.
2. Toggle to enable Google Login and paste the Client ID and Client Secret into their respective fields.
3. Click Save Changes.

Now, users will see the option to log in using their Google account.

You can customize the login message with anything you want through Advanced Settings.

Step 5: Test Google Login

1. Visit your site’s login page in private or incognito mode.
2. Click the Google Login button.
3. If successful, users can now log in or register using their Google accounts!

If you have not configured the settings properly, you might see the error as shown in the image below:

So, verify that all redirect URIs are correctly formatted and have the endpoint ?user_registration_social_login=google

Setting Up X (formerly Twitter) Login in User Registration Form #

Let’s now learn to set up X, which was previously known as Twitter.

Prerequisite:
✅ X developer account.

Step 1: Create an APP in the X(formerly Twitter) Developer Portal

1. Go to the X (formerly Twitter) developer portal to create a new app.

2. If you don’t have a developer account, it will ask you to create one. So, hit the Apply button and create an account for free. If you already have a developer account, you can skip this step.

3. The default app will be available under Projects & Apps in your dashboard. Click on it, and you will see the details for this app.

Step 2: Configure User Authentication for X (formerly Twitter)

1. Under User authentication settings, click on the Set up button.

2. Set up app permissions as per your preference and choose the type of app as Web App for WordPress website.

3. Add your app info to configure app settings

Callback URI/Redirect URL: This is the callback page (at the redirect URL) that X (formerly Twitter) sends the user back to.

Do not add query strings to your callback URLs in your X (formerly Twitter) app’s configuration.

X will allow you to pass any standard query strings along with your callback URL in your OAuth/request_token request. Therefore, Twitter does not allow you to add query strings to the end of the callback URL you list in the X (formerly Twitter) apps dashboard.
Example:

• You want to use https://yourdomain.com?source=twitter as your callback URL.
  • Add this to the app dashboard: https://yourdomain.com

For further information read X's documentation.

After configuring, click on Save.

Step 3: Copy Client ID and Secret Key

You’ll now be redirected to the page with your OAuth 2.0 Client ID and Client Secret. Copy them and go back to your WordPress dashboard.

If you lost the keys, you can navigate to Keys and tokens tab and copy the keys or regenerate if needed.

Step 4: Configure the X in your WordPress Dashboard

Go to User Registration & Membership > Settings > Social Connect in your WordPress dashboard. Now, enable Twitter Login and paste the Client ID and Client Secret into their respective fields.

Click Save Settings. Users can now log in using their X (formerly Twitter) account.

Step 5: Test X (formerly Twitter) Login with User Registration & Membership Plugin

1. Open your website in incognito/private browsing mode.
2. Navigate to the login or registration page.
3. Click the Login with Twitter button.
4. Users will be redirected to X (formerly Twitter) for authentication.

Your users should now be able to log in using your Twitter credentials.

For more details, visit the X's developer guide. 

Setting Up LinkedIn Login in the User Registration Form #

Prerequisite:
✅ LinkedIn developer account.

Setting up LinkedIn is similar to setting up other apps. Let’s see in detail.

Step 1: Create an App on LinkedIn

Go to the LinkedIn developers page and click the My Apps button to create a new application.

Now, sign up (if you don’t have a developer account) or log in for the developer account. After you log in, click on “Create App.”

Next, enter the details of your app and submit the form:

After submitting the form, you will be redirected to your app’s settings page.

Step 2: Configure Authentication on LinkedIn

Go to the ‘Auth‘ tab to find your authentication keys. Make a note of the Client ID and Client Secret for later use. These keys are used in OAuth requests to identify your app to LinkedIn.

Authorized redirect URLs for your app

Redirect URIs are critical security components that indicate to LinkedIn where users should be redirected after authentication.

So, scroll to find the setting for OAuth 2.0. Here, you need to enter the fully qualified URLs to define valid OAuth 2.0 callback paths. Make sure you also add ?user_registration_social_login=linkedin as the endpoint.

Few examples of valid redirect URls:

• https://yoursite.com/login/?user_registration_social_login=linkedin
• https://yoursite.com/my-account/?user_registration_social_login=linkedin
• https://yoursite.com/registration/?user_registration_social_login=linkedin

Important Notes: Replace yourdomain.com with your actual domain name

Hence, these must match your site URLs. If you have added a custom page, copy the URL and add the endpoint as mentioned. You can add multiple redirect URIs if you have login functionality on different pages.

Now, you must add permissions to use the LinkedIn login on your website. To do this, go to the Products tab and add ‘Sign With LinkedIn‘.

When you add the ‘Sign In with LinkedIn‘, you will be able to see the permissions in the OAuth Scope section in the Auth Tab.

Step 3: Enable LinkedIn Social Connect in User Registration & Membership Settings

1. Go to User Registration & Membership > Settings > Social Connect tab in your WordPress dashboard.
2. Toggle the LinkedIn option to enable it.
3. Enter the Client ID and Client Secret obtained from the LinkedIn app configuration.

Save your settings.

You can now allow users to log in using their LinkedIn accounts on your WordPress website.

To test, follow the steps mentioned above for other apps. That’s all for the social connect API settings.

Setting Up Instagram Login in the User Registration Form #

The User Registration & Membership plugin enables you to integrate Instagram login or registration on your website, allowing users to log in or register using their Instagram accounts.

Prerequisites: 
✅ A Facebook developer account.

Step 1: Register a Meta App

Since Instagram is part of Meta, you’ll need to create an app within the Meta for Developers portal.

1. Log in to your Meta Developer account.

2. Click the Create App button.

3. Fill in the App Name (e.g., “My Site Instagram Login”) and App Contact Email (use your admin email).

4. Under Use Cases, select Other (the last option) and click Next to continue.

5. Choose Business as the App Type and click Next.

6. Finally, confirm your details and click Create App.

Step 2: API setup with Instagram business login

1. In your app dashboard, navigate to Products > Add Product.

Here, select Instagram and click Set Up. You’ll be redirected to the Instagram API setup.

Note: You will get the Instagram App ID and App Secret. To make it work, you must complete the Instagram Business Login setup.

2.  Set up Instagram business login

During the Instagram Business Login setup, click Set Up and provide the page URL where you want the Instagram login to appear and click Save to apply the changes.

You can add multiple URLs by clicking on Business Login Settings.

Note: The URLs shown in the screenshots belong to my demo site, where I have set up Instagram Login. You need to replace them with your own site URLs where you have enabled Instagram Login for your users.

3. Copy App ID and Secret

Once you’ve completed the Instagram Business Login setup and added the Redirect URL(s), you can now use the Instagram App ID and App Secret in your site’s User Registration & Membership plugin to enable Instagram login.

App Review:
To use Instagram Login, your app must be in Live Mode or your Instagram user’s account has to be added to it as a test user.

Add a Test User:

1. Go to Facebook Developer > App roles > Roles >>Add people.
2. Click Add Instagram Testers, enter your Instagram username, and send the invite.
3. Log in to Instagram, go to Settings > Apps and Websites > Tester Invites, and accept the invitation.

Step 3: Configure the Instagram API Settings

In your WordPress dashboard, go to User Registration & Membership > Settings > Social Connect. Now, Enable Instagram: Toggle the switch to “On”. Finally, paste the App ID and App Secret into their respective fields.

Click Save Settings. Users can now log in using their Instagram account.

You can now allow users to log in using their Instagram accounts on your WordPress website.

Social Login Option on Individual Form #

As you configured the global setting for social login, you can override the setting for individual form. This allows you to enable only the required login option on the form.

To do so, navigate to your Form Settings > General and scroll down to find the Social Connect Option. Next, select only the required social login for your form. The option here appears based on the login options you have enabled through the global settings.

Click ‘Update form’ to experience the changes.

Multi Social Login Option #

After you configure all the social logins or those that are necessary for your site, you can also allow user to log in using any of their social account. For example, if they log in with a Google account, they should also be allowed to use their LinkedIn account to log in. Meanwhile, both accounts must have the same email address.

Here’s an example of registering a user with multiple social login options:

Now, you can view the registered users through User Registration & Membership > Users. Even if the user registered through a different social media account, only one user will be registered on their email. Similarly, they can now login using any of the social login option.

However, in the case of X, multi-social login will not work, and the user will be registered as a new user.

Hence, you can disable Twitter for multiple social logins.