pmpro_social_login

The Workflow:
For a Free Level

User selects a level from your Membership Levels page.

User is taken to the Membership Checkout page and can click an icon to “Login with” the configured social networks.

User’s membership is confirmed.

The Workflow:
For a Paid Level

User selects a level from your Membership Levels page.

User is taken to the Membership Checkout page and can click an icon to “Login with” the configured social networks.

User is logged in and returned to the Membership Checkout page to complete payment information and confirm membership.


Step 1: Install and Configure WordPress Social Login

Go to Plugins > Add New in your WordPress admin. Search for “WordPress Social Login” and install. The plugin is written by Miled. View at the WordPress Repo

You’ll need to create “applications” in the social networks you wish to offer integration for. See below for help for a few top networks:

You will need an “App ID” and “App Secret” key.

  1. Go to: https://developers.facebook.com/apps
  2. Hover over the “My Apps” tab and select “Add a New App”.
  3. Select Website (www) as the platform.
  4. social_login_facebook_app_setupClick “Skip and Create App App ID” in the upper right. This will bring up a box to simply enter:
    • Display Name (I just use my website name)
    • Don’t enter a namespace
    • Select “No” for “Is this a test version of another app?”
    • Choose an appropriate category
    • Create App ID
  5. You’ve got an app! Click “Settings” in the left column and update your “App Domain” and “Site URL”. You can now copy and paste the “App ID” and “App Secret” keys into the Facebook section under Settings > WP Social Login in your WordPress site admin.

You will need an “Application Key” and “Application Secret”.

  1. Go to https://apps.twitter.com/
  2. Click “Create New App”.
  3. Under “Application Details” complete the fields for Name, Description and Website. (Note: Make sure that your Twitter account has a verified mobile number before completing this step. You can add your mobile number via Settings > Mobile here.)
  4. For the “Callback URL”, you need to enter the URL as provided in the Settings > WP Social Login > Twitter admin screen. The URL will look something like this: http://www.YOURDOMAIN.com/wp-content/plugins/wordpress-social-login/hybridauth/?hauth.done=Twitter
  5. Thats (technically) it. For completeness, I did go back to the “Settings” tab in the Application Management section to update my “Application Icon” and Organization information.
  6. Click the “Keys and Access Tokens” tab and locate the “Consumer Key (API Key)” and “Consumer Secret (API Secret)” values, which you can enter into the “Application Key” and “Application Secret” fields under Settings > WP Social Login > Twitter in your WordPress site admin.
Note: Twitter does not provide the user email address and instead generates a random email associated with the user’s account. If you are using Social Login for a paid level or would like to require email address, click the “Bouncer” tab and under “Profile Completion” set “Require E-mail” to “Yes”.

You will need a “Client Key” (Application Key) and “Client Secret” (Application Secret).

  1. Go to https://www.linkedin.com/secure/developer
  2. Click “Create Application”.
  3. Complete all required fields (Company Name, Application Name, Description, Application Logo URL, Application Use, Website URL, Business Email and Business Phone.
  4. Read and agree to the API Terms of Use then click “Submit”.
  5. Navigate to “Settings” in the left column, and update your “Application Status” to “Live”. Click “Update”.
  6. That’s it – LinkedIn will provide you with the “Client ID” and “Client Secret” on the “Authentication” menu page, which you can enter into the “Application ID” and “Application Secret” fields under Settings > WP Social Login > LinkedIn in your WordPress site admin.

You will need a “Client ID” and “Client secret” key.

  1. Go to https://console.developers.google.com/project
  2. Click “Create Project”.
  3. Enter the “Project Name” (I just use my website name) and click “Create”.
  4. Navigate to “APIs & auth” > “APIs” in the left column, then click on “Google+ API” (under Social APIs heading) and click “Enable API”.
  5. Next, set up your “OAuth Consent Screen” under “APIs and auth” > “Credentials”. Google will ask for some required and optional information to display on the authorization screen your users will see as part of Social Login via Google.
  6. After saving your Consent Screen, navigate to “APIs and auth” > “Credentials”, then click on “Add credentials” > “OAuth 2.0 client ID”.
    pmpro_social_login_google_oauth
  7. Select “Web application” as your application type.
  8. Enter the URL of your site under “Authorized JavaScript origins”. You may want to enter both the www and non-www version of your domain (i.e. https://www.paidmembershipspro.com and https://paidmembershipspro.com).
  9. Under “Authorized redirect URLs” you need to enter the URL as provided in the Settings > WP Social Login > Google admin screen. The URL will look something like this: http://www.YOURDOMAIN.com/wp-content/plugins/wordpress-social-login/hybridauth/?hauth.done=Google
  10. That’s it – Google will provide you with the “client ID” and “client secret” which you can enter into the “Application ID” and “Application Secret” fields under Settings > WP Social Login > Google in your WordPress site admin.


Step 2: Install and Configure the Social Login Add On

Download and install manually via the Plugins > Add New > Upload admin page. Or, go to Memberships > Add Ons in your WordPress admin, click the “Check Now” button, then locate “Social Login” in that list.

By default, all levels will show the Social Login option, but you can choose to hide social login for a specific level on the Memberships > Membership Levels > Edit Level admin page.

pmpro_social_login_edit_level

What if a non-member uses Social Login via your Login page?

If you have set your WordPress Social Login Widget Advanced Settings > “Widget display” to show on the login form, it is possible for non-users/non-members to create accounts on your site.

To give these users a default membership level (i.e. a Free level like on our site), you can set the default level on the Memberships > Membership Levels > Edit Level admin page. Only one level can be set as default at a time.


Step 3: Additional Settings for WordPress Social Login (Optional)

For my setup, I updated the “Widget” tab with a few additional settings:

  • I set the “Connect with caption:” to say “Login with:”.
  • I removed the “Redirect URL”, set “Force Redirection” to “No” and set “Authentication display” to “Popup”.

If you’re using Memberlite, you can also use this CSS in the “Custom CSS” box: