A Cozmoslabs Product

Social Connect

Social Connect Add-on lets you enable social login on your website. Users can log in with social platforms like Facebook, Google, Twitter, or LinkedIn.

Activating the Social Connect Add-on

Social Connect is an Advanced add-on, available with a Profile Builder Basic, Pro, or Agency license only.

After purchasing a premium version of Profile Builder, you can check the following guide on how to install Profile Builder.

After the installation of the Basic, Pro, or Agency version, in order to activate The Social Connect add-on, go to Dashboard → Profile Builder → Add-ons → Social Connect Add-on and click activate.

For the Social Connect add-on to work as expected, you’ll also need to have the following plugin installed and activated on your site:

Social Connect Settings

Social Connect Settings can be found if you go to Profile Builder -> Social Connect.

Inside the Settings tab we can set up the:

General Settings

In the General Settings section we can choose where to display the Social Connect Icons. We can display them in:

In order to display the Social Connect Icons you will need first to set up the appropriate Apps inside the Application Settings section.

Profile Builder Login

First, you will need to add the [wppb-login] shortcode inside a page to generate the Profile Builder Login Form. If the Apps are setup correctly you will see the Social Connect Icons.

Front End Profile Builder Login Form

Profile Builder Pro - Social Connect - General Settings - Login Form

Profile Builder Register

First, you will need to add the [[wppb-register]] shortcode inside a page to generate the Profile Builder Register Form. If the Apps are setup correctly you will see the Social Connect Icons.

Front End Profile Builder Register Form

Profile Builder Pro - Social Connect - General Settings - Register Form

Profile Builder Edit Profile

First, you will need to add the [wppb-edit-profile] shortcode inside a page to generate the Profile Builder Edit Profile Form. If the Apps are set up correctly you will see the Social Connect Icons.

Front End Profile Builder Edit Profile Form

Profile Builder Pro - Social Connect - General Settings - Edit Profile Form

Default WordPress Login

To see the Social Icons on the Default WordPress Login Form go the wp-login.php page – Example: http://www.yourdomain.com/wp-login.php.

Front End Default WordPress Login Form

Profile Builder Pro - Social Connect - General Settings - Default Login Form

Default WordPress Register

To see the Social Icons on the Default WordPress Register Form go the wp-login.php?action=register page – Example: http://www.yourdomain.com/wp-login.php?action=register.

Front End Default WordPress Register Form

Profile Builder Pro - Social Connect - General Settings - Default Register Form

Multiple Registration and Edit Profile Forms

Inside Profile Builder Pro we have 2 modules called Multiple Registration Forms and Multiple Edit Profile Forms that are used to create Custom Registration and Edit Profile Forms with different fields for different user roles.

Inside the settings page we can choose if we want to display Social Connect on our Custom Registration or Edit Profile Forms. You can enable or disable Social Connect for each individual form. It only works with Profile Builder Pro.

Multiple Registration Form Settings

Multiple Edit Profile Form Settings

Application Settings

In the Application Settings section we can enable Social Connect in Profile Builder or WordPress Default Forms, as we selected in the General Settings section.

We can enable the following Social Platforms:

You can enable one or all of the available Social Platforms. In order to enable the Social Platforms we need to add the corresponding App ID / Client ID / API Key – Secret.

Create and Enable the Facebook App

To create a Facebook App please follow the steps from the following documentation link:

After we created the Facebook App we can add the generated Facebook App ID and Enable the Facebook Social Platform on Profile Builder or WordPress Default Forms, as we selected in the General Settings section.

Front End Profile Builder Form

Profile Builder Pro - Social Connect - Application Settings - Facebook in Login Form

Create and Enable the Google App

To create a Google App please follow the steps from the following documentation link:

After we created the Google App we can add the generated Google Client ID and Enable the Google Social Platform on Profile Builder or WordPress Default Forms, as we selected in the General Settings section.

Front End Profile Builder Form

Profile Builder Pro - Social Connect - Application Settings - Google in Login Form

Create and Enable the Twitter App

To create a Twitter App please follow the steps from the following documentation link:

After we created the Twitter App we can add the generated Twitter API Key / API Secret and Enable the Twitter Social Platform on Profile Builder or WordPress Default Forms, as we selected in the General Settings section.

Front End Profile Builder Form

Profile Builder Pro - Social Connect - Application Settings - Twitter in Login Form

Create and Enable the LinkedIn App

To create a LinkedIn App please follow the steps from the following documentation link:

After we created the LinkedIn App we can add the generated LinkedIn Client ID and Enable the LinkedIn Social Platform on Profile Builder or WordPress Default Forms, as we selected in the General Settings section.

Front End Profile Builder Form

Profile Builder Pro - Social Connect - Application Settings - LinkedIn in Login Form

Appearance Settings

In the Appearance Settings section we can set up how our Social Icons will look like in Profile Builder or WordPress Default Forms.

We can set the following options:

Buttons Order

To re-order the Social Icons simply drag and drop the dots.

Buttons Location

We can position the Social Icons After Form Fields or Before Form Fields.

Social Icons After Form Fields

Profile Builder Pro - Social Connect - General Settings - Login Form

Social Icons Before Form Fields

Buttons Style

We can set Social Connect to display Small (only Icons) Social Icons or Large (Icons and Text) Social Icons.

Small Social Icons

Profile Builder Pro - Social Connect - General Settings - Login Form

Large Social Icons

Selecting Large Social Icons inside the Buttons Style option allows us to modify the text for:

Using the Large Social Icons option will remove the Heading Before Buttons (Login/Register) and Heading Before Buttons (Edit Profile) options. It only works with Small Social Icons.

Front End Login Form with Large Social Icons

Profile Builder Pro - Social Connect - Appearance Settings - Buttons Style - Front End Large Icons

Front End Edit Profile Form with Large Social Icons

Profile Builder Pro - Social Connect - Appearance Settings - Buttons Style - Front End Edit Profile Form Large Icons

Heading Before Buttons (Login/Register)

Here we can set the Heading displayed before the Social Icons inside the Login and Register Forms. This option will work only if you are using Buttons Style – Small Icons. Empty field will remove the heading.

Front End Social Icons inside the Login Form

Profile Builder Pro - Social Connect - General Settings - Login Form

Heading Before Buttons (Edit Profile)

Here we can set the Heading displayed before the Social Icons inside the Edit Profile Form. This option will work only if you are using Buttons Style – Small Icons. Empty field will remove the heading.

Front End Social Icons inside the Edit Profile Form

Profile Builder Pro - Social Connect - General Settings - Edit Profile Form

Unlink Accounts (Edit Profile)

This option will display linked Social Platforms inside users’ accounts and will allow users to easily Unlink them in the Edit Profile Form.

Enabling this option allows users to Unlink Accounts inside the Profile Builder Edit Profile Form.

Profile Builder Pro - Social Connect - Appearance Settings - Unlink Account in Edit Profile Form

Default Social Connect CSS in the Front End

Uncheck this option to use your own Custom CSS for the Social Icons. Don’t uncheck it if you don’t have a Custom CSS for the Social Connect Icons.

Using Social Connect

We can display Social Connect inside Profile Builder Forms or Default WordPress Forms, as we selected in the General Settings section.

In order to display the Social Connect Icons you will need first to set up the appropriate Apps inside the Application Settings section.

As New User – Creating an Account

If the Social Platforms Apps are set up correctly visitors will be able to create a WordPress account using their Facebook, Google, Twitter or LinkedIn account.

Profile Builder Pro - Social Connect - General Settings - Login Form

Using Facebook

After clicking on the Facebook Icon a popup will appear asking for the user’s Facebook Email or Phone and Password.

Profile Builder Pro - Social Connect - Using Social Connect - Facebook Popup

Users that are already logged in inside their Facebook account will see a popup that asks them to Continue.

Profile Builder Pro - Social Connect - Using Social Connect - Already Logged In - Facebook Popup

After adding the Facebook Email or Phone and Password, in order to log in, or clicking on continue the Facebook Icon will change into a spinner notifying the user that the request is processed.

Profile Builder Pro - Social Connect - Using Social Connect - Facebook Spinner

After a Successful Registration with Social Connect the user will be automatically logged in inside their account.

Profile Builder Pro - Social Connect - Using Social Connect - After Login

We receive from Facebook the First Name, Last Name, and Email Address. The Username will be automatically generated based on First and Last Name.

Since we created the account using Facebook the Facebook Link Account option will be grayed out inside the Edit Profile Form.

Profile Builder Pro - Social Connect - Using Social Connect - Facebook Edit Profile Form

Using Google

After clicking on the Google Icon a popup will appear asking for the user’s Google Email or phone.

Profile Builder Pro - Social Connect - Using Social Connect - Google Popup

After adding the Google Email or phone the user will need to add the password in order to Sign In.

Profile Builder Pro - Social Connect - Using Social Connect - Google Popup Step 2

After adding the password, in order to log in, the Google Icon will change into a spinner notifying the user that the request is processed.

Profile Builder Pro - Social Connect - Using Social Connect - Google Spinner

After a Successful Registration with Social Connect the user will be automatically logged in inside their account.

Profile Builder Pro - Social Connect - Using Social Connect - After Login

We receive from Google the First Name, Last Name, and Email Address. The Username will be automatically generated based on First and Last Name.

Since we created the account using Google the Google Link Account option will be grayed out inside the Edit Profile Form.

Profile Builder Pro - Social Connect - Using Social Connect - Google+ Edit Profile Form

Using Twitter

After clicking on the Twitter Icon a popup will appear asking for the user’s Twitter Username or Email and Password.

Profile Builder Pro - Social Connect - Using Social Connect - Twitter Popup

After Singing In Users will need to Authorize the App. Users that are already logged in inside their Twitter account will only need to Authorize the App.

Profile Builder Pro - Social Connect - Using Social Connect - Already Logged In - Twitter Popup

After Authorizing the app the user will be redirected back to the form.

Profile Builder Pro - Social Connect - Using Social Connect - Twitter Popup Redirect

After the Redirect Social Connect will ask the user to add their Twitter Email Address in order to log in. This happens only once when the user registers. A registered user will not need to add the email address each time they log in.

Profile Builder Pro - Social Connect - Using Social Connect - Twitter Popup - Add Email

If the Email Address is valid the Twitter Icon will change into a spinner notifying the user that the request is processed.

Social Connect will not ask the user for their Twitter email address if you follow the instructions from here.
Profile Builder Pro - Social Connect - Using Social Connect - Twitter Spinner

After a Successful Registration with Social Connect the user will be automatically logged in inside their account.

Profile Builder Pro - Social Connect - Using Social Connect - After Login with Twitter

We receive from Twitter the First Name, Last Name, and Email Address. The Username will be automatically generated based on the Email Address. We remove from the email address the “@” and “.” characters.

Since we created the account using Twitter the Twitter Link Account option will be grayed out inside the Edit Profile Form.

Profile Builder Pro - Social Connect - Using Social Connect - Twitter Edit Profile Form

Using LinkedIn

If the LinkedIn App is not set up properly the LinkedIn Icon will be grayed out.

Profile Builder Pro - Social Connect - Using Social Connect - LinkedIn Grayed Out

After clicking on the LinkedIn Icon a popup will appear asking for the user’s LinkedIn Email and Password.

Profile Builder Pro - Social Connect - Using Social Connect - LinkedIn Popup

Users that are already logged in inside their LinkedIn account will see a popup that asks them to “Allow Access”.

Profile Builder Pro - Social Connect - Using Social Connect - Already Logged In - LinkedIn Popup

After adding the LinkedIn Email and Password, and clicking on Allow Access, the LinkedIn Icon will change into a spinner notifying the user that the request is processed.

Profile Builder Pro - Social Connect - Using Social Connect - LinkedIn Spinner

After a Successful Registration with Social Connect the user will be automatically logged in inside their account.

Profile Builder Pro - Social Connect - Using Social Connect - After Login

We receive from LinkedIn the First Name, Last Name, and Email Address. The Username will be automatically generated based on First and Last Name.

Since we created the account using LinkedIn the LinkedIn Link Account option will be grayed out inside the Edit Profile Form.

Profile Builder Pro - Social Connect - Using Social Connect - LinkedIn Edit Profile Form

As Existing User – Linking an Account

Registered users can link their WordPress account with their Facebook, Google, Twitter, and LinkedIn account.

Linking Account as a Logged Out User

If the WordPress Account uses the same Email Address as the Social Platform Account then the user will be prompted with a message to link the Accounts.

Profile Builder Pro - Social Connect - Using Social Connect - Account Already Exists

If the user selects Yes then he will need to enter the existing WordPress Account Password in order to connect with that account.

When we link our account with Twitter, besides adding the password, we will be prompted to add the Twitter Account Email Address. This is necessary only once when we are linking the account with Twitter
Profile Builder Pro - Social Connect - Using Social Connect - Account Already Exists - Add Password

If the user selects No then he will need to enter a new Email Address so a new account can be created. The new account will use the Email Address added in the popup.

Profile Builder Pro - Social Connect - Using Social Connect - Account Already Exists - Add New Email

You will need to enter these details only once, at account creation.

Linking Account as a Logged In User

Logged In users can link their account with another if they access the Profile Builder Edit Profile Form.

Let’s say for example that the user logs in with Facebook and then decides to link his account with his Google Account. He will need to log in and access the Edit Profile Form. There he will be able to link his account with Google by clicking on the Google Social Icon.

The Edit Profile page will refresh and display a Success Notification if the Account has been linked. A grayed Social Icons means the account is linked with that Social Platform.

Profile Builder Pro - Social Connect - Using Social Connect - Account Already Exists - Linking Account in Edit Profile Form


This level of flexibility and integration is meant to make it as easy as possible for users to sign up for your site.

Social Connect is an Advanced add-on, available only with a Profile Builder Basic or Pro license.

The Ultimate Membership Bundle

Combine the power of Profile Builder with Paid Member Subscriptions to set up user registration, memberships, and recurring revenue.

Get 25% off with the bundle

Help & Support

We’re here to help you every step of the way.

Open a Support Ticket