Social Connect

Profile Builder Pro - Social Connect - Thumbnail

 

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

Install the Social Connect Add-on

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

After purchasing the add-on, the .zip file will be available for download under your account page by clicking the “Add-ons Download” button.

Profile Builder Pro - Account Page - Download Add-ons

Once downloaded, you can install the add-on as a normal WordPress plugin, by uploading the .zip file in your WordPress Admin -> Plugins -> Add New -> Upload Plugin.

Alternatively, you can install the Social Connect add-on by extracting the folder found inside the archive and uploading the entire folder via FTP to your /wp-content/plugins folder found inside your WordPress install.

Note – For 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.

Profile Builder Pro - Social Connect - Settings

Inside the Settings tab we can setup the:

General Settings

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

Profile Builder Pro - Social Connect - General Settings

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 setup 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

Profile Builder Pro - Social Connect - General Settings - Multiple Registration Forms

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.

Profile Builder Pro - Social Connect - Application Settings

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.

Profile Builder Pro - Social Connect - Application Settings - Facebook App

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.

Profile Builder Pro - Social Connect - Application Settings - Google+ App

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.

Profile Builder Pro - Social Connect - Application Settings - Twitter App

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.

Profile Builder Pro - Social Connect - Application Settings - LinkedIn App

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 setup how our Social Icons will look like in Profile Builder or WordPress Default Forms.

We can set the following options:

Profile Builder Pro - Social Connect - Appearance Settings

Buttons Order

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

Profile Builder Pro - Social Connect - Appearance Settings - Buttons Order

Buttons Location

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

Profile Builder Pro - Social Connect - Appearance Settings - Buttons Location Options

Social Icons After Form Fields

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

Social Icons Before Form Fields

Profile Builder Pro - Social Connect - Appearance Settings - Buttons Location

Buttons Style

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

Profile Builder Pro - Social Connect - Appearance Settings - Buttons Style

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:

  • Facebook Button Text – Login, Register and Edit Profile
  • Google Button Text – Login, Register and Edit Profile
  • Twitter Button Text – Login, Register and Edit Profile
  • LinkedIn Button Text – Login, Register and Edit Profile

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.

Profile Builder Pro - Social Connect - Appearance Settings - Buttons Style - Large 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.

Profile Builder Pro - Social Connect - Appearance Settings - Heading Before Buttons - Login-Register

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.

Profile Builder Pro - Social Connect - Appearance Settings - Heading Before Buttons - Edit Profile

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 Edit Profile Form.

Profile Builder Pro - Social Connect - Appearance Settings - Unlink Account

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.

Profile Builder Pro - Social Connect - Appearance Settings - Default CSS

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 setup 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 login, 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

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

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

After adding the password, in order to login, 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 login. This happens only once when the user registers. A registered user will not need to add the email address each time they login.

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.

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 setup 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 promoted 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.

Note – When we link our account with Twitter, besides adding the password, we will be promted 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.

Lets say for example that the user logs in with Facebook and then decide to link his account with his Google+ Account. He will need to login 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 Hobbyist or Pro license.

Get Social Connect – Profile Builder Add-on