How to create a Google App for Social Connect

Login into Google Developers Console

First you will need to Login into your Google Account and then to access the Google Developers Console.

Profile Builder Pro - Social Connect - Google Developers Console

Select a project

After you login and access the Google Developers Console click on “Select a project” Menu Item.

Profile Builder Pro - Social Connect - Google Developers Console - Select a project

Create a project

After we click on “Select a project” Menu Item a popup will appear. We will need to click on the “+” sign to “Create a project”.

Profile Builder Pro - Social Connect - Google Developers Console - Create a project

Setup the project

After we click on the “+” sign we will need to fill in the fields from the “New Project” popup. After finishing to setup the Project we will need to click on “Create”.

Project options:

  • Project name – Type in a name for your project
  • Project ID – Optionally you can type in a project ID or you can use the generated one
  • Accept the Terms of Service

Profile Builder Pro - Social Connect - Google Developers Console - Setup project

Enable the API

After we create the App we need to enable the API. Go to the Dashboard and click on “Enable API”.

Profile Builder Pro - Social Connect - Google Developers Console - Enable API

Select the Google+ API

After clicking on “Enable API” we will need to select the Google+ API, displayed under Social APIs.

Profile Builder Pro - Social Connect - Google Developers Console - Google+ Api

Create Credentials

To use the Google+ API we need to Create Credentials. Click on “Create credentials” to get started.

Profile Builder Pro - Social Connect - Google Developers Console - Create Credentials

Add Credentials to Project

After clicking on “Create credentials” we will need to set the following options:

  • Which API are you using? -> Google+ API
  • Where will you be calling the API from? -> Web browser (JavaScript)
  • What data will you be accessing? -> User data

After we finish setting up the options we need to click on “What credentials do I need?”.

Profile Builder Pro - Social Connect - Google Developers Console - Add credentials to Project

Create an OAuth 2.0 client ID

After clicking on “What credentials do I need?” we will need to set the following options:

  • Name – Add your own name
  • Authorized JavaScript origins – Add your website url – Example: http://www.yourdomain.com
  • Authorized redirect URIs – Add your website url – Example: http://www.yourdomain.com

To continue we need to click on “Create Client ID”.

Profile Builder Pro - Social Connect - Google Developers Console - OAuth 2.0 client ID

Create Client ID

After clicking on “Create Client ID” we will need to set the following options:

  • Email address – Select your Gmail address
  • Product name shown to users – Set your own name
  • Homepage URL – Optional
  • Product logo URL – Optional
  • Privacy policy URL – Optional until you deploy your app
  • Terms of services URL – Optional

To view the additional options click on “More customization options”. After you finish click on “Continue”.

Profile Builder Pro - Social Connect - Google Developers Console - Create Client ID

Client ID Credentials

After clicking on “Continue” you will be prompted with your Client ID Credentials. You will need to copy the Client ID and click on “Done”.

Profile Builder Pro - Social Connect - Google Developers Console - Client ID Credentials

You can later find the Client ID if you click on the “Credentials” Menu Item.

Profile Builder Pro - Social Connect - Google Developers Console - Credentials

Paste the Google+ Client ID

After you copy the Google+ Client ID go to your website -> Dashboard -> Profile Builder -> Social Connect -> Enable Google+ Login and paste your Client ID. Scroll to the bottom to Save.

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

Google+ Login in Front End

Social Login with Google+ should be available on WordPress Default and Profile Builder forms.

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