• Log In
  • Welcome
  • Features
  • Pricing
  • Documentation
  • Add Ons
  • Payment Gateways
  • Support
  • Customer Showcase
  • Blog
  • Contact

Log In


Join Now | Lost Password?

Skip to content

Paid Memberships Pro

WordPress Membership Plugin

  • Log In
  • Choose a Plan
  • Features
    • Product Overview
    • Screenshots
    • About Us
  • Pricing
  • Documentation
  • Showcase
  • Add Ons
  • Gateways
  • Support
  • Blog
Home  >  Blog  >  Social Registration at Checkout and Social Login for Your Membership Site

Social Registration at Checkout and Social Login for Your Membership Site

Estimated reading time: 7 minutes

TweetFacebookLinkedIn

Many people ask about using social login (i.e. “Login with Facebook”) on their WordPress Membership Site. Meet our new Social Login Add On that works in conjunction with WordPress Social Login. The Add On adds the [wordpress_social_login] shortcode to Membership Checkout, with the option to manually create the user name and password.

Banner Image for 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.

My Opinion: Social Login is Most Useful for Free Membership Levels

Adding social login to a free membership level can (when implemented correctly) make the “membership checkout” a very quick process. If your membership level requires payment, the potential member is filling out a checkout form, in most cases entering a personal credit card number. So the benefit of social login here isn’t to save time completing the form, reduce “cart abandonment” or for security. It’s more to simplify the future visit “login” experience.

One could argue that social login on your membership checkout page can hurt membership signups. What if the user clicks to login with Facebook, forgets their Facebook login information then gets caught up in the Facebook reset process or that cute video of a dog at the dinner table?

Wait, now I’m getting distracted…

Step 1: Install and Configure WordPress Social Login

I’ve tested a few social login plugins, and I find this one to be the easiest to setup, most lightweight, and simple to style/integrate in your site. [WordPress Repo] [Docs]

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:

  • Facebook
  • Twitter
  • LinkedIn
  • Google

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

PMPro Plus members can download the add on .zip here 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.

View the Add On

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:
https://gist.github.com/strangerstudios/04bff9a1a11c86b785d3

If you have a different view of how you’d like social login on your membership site, hopefully this tutorial can provide some direction as you implement.

Kimberly Coleman

Author: Kimberly Coleman

Kim is co-founder of Paid Memberships Pro. She has her hand in all aspects of the development, management, and marketing for the product and the team. She oversees frontend development for the core open source plugin and Add Ons.

Tagged: memberlite, social login. Posted in Add Ons. Bookmark the permalink. Last updated: August 31, 2015.

Post navigation

← Show Your SSL Seal Code on Membership Checkout (and where to find it for top SSL Issuers)
Disable Paid Memberships Pro Emails to the Member/User or Admin →

Build a membership site—for free.

The fastest way to charge for access to your WordPress site. Our core plugin is free and includes more than other membership plugins. You deserve more.

Start for Free
Choose a Plan

We’re 100% GPL

Our plugin's code is not obfuscated, runs on as many sites as you want and can be customized to fit your project's needs. We just ask that you follow the GPLv2 guidelines by applying the GPLv2 license to any altered or unaltered version of PMPro that you distribute. License Details »

GPL v2

Recent Articles and Updates

  • Banner for 10 Marketing Strategies to Boost Membership Business
    10 Marketing Strategies to Boost Your Membership or Subscription Business
  • Banner image for 6 benefits repurposing content
    6 Major Benefits to Repurposing Content for Your Membership Site
  • Development Changelog for Paid Memberships Pro Release Updates
    PMPro Update 2.10.3

Platform

  • Pricing
  • Features
  • Reviews
  • Screenshots
  • Videos
  • Step-by-Step Guides

Use Cases

  • Associations
  • Blog & News
  • Community
  • Courses
  • Directory & Listing
  • Paid Newsletter
  • Podcast
  • Videos

Add Ons

  • Free
  • Standard
  • Plus
  • Admin
  • Integration
  • View All

Get Help

  • Support
  • Download & Install
  • Hosting
  • Developers
  • Blog
  • Contact Us

Company

  • About Us
  • Work With Us
  • Brand Assets
  • Affiliates
  • Privacy Policy
  • Terms of Service
Follow Us On

© 2023 Paid Memberships Pro. All Rights Reserved.

  Demo + Live Chat: Using Google Analytics with your Membership Site
with Kim Coleman • Thursday, March 23rd at 2pm EDT. SEE DETAILS ▸