Configuring Facebook SSO Login

PLUS PLAN +

The MemberMouse Facebook login extension will allow users to create a new free membership using their Facebook login credentials.

Please note that these instructions can require a different order for some or look different than shown. The Meta interface changes regularly, and each account will have verification requirements that may not be covered in this article. We encourage you to read the documentation on Facebook for further details.

Creating a Facebook App

The first step to enabling the Facebook login extension on your site is to create a Facebook App. To create your app, follow these steps:

1. To access Facebook's app developers page, visit http://developers.facebook.com/apps. This is the page where Facebook lists your applications that you have already created with them. You can also create new apps here.
   
   
   
   
2. Facebook will ask you what kind of app you need to create. Choose Facebook Login.
   
   
   
   
3. Facebook may ask clarifying questions and then prompt you for application details:
   
   
   
   
4. Once you have created the basic app, Facebook will walk you through a multi-step process to get the app connected to your site, verified, and then published.
   
   
   
   
5. Each step may be unique to your situation and requirements, but the optional steps required for MemberMouse are included in the Client OAuth settings step.
   
   In the Client OAuth settings step, check to make sure your toggle switches match the ones shown below, and use the Valid OAuth Redirect URI below, first modifying yoursite.com to match your MemberMouse domain. Click the Save Changes button once complete:  
   
   https://yoursite.com/wp-content/plugins/membermouse/lib/hybridauth/?hauth_done=Facebook
   
   
   
   
6. Next, complete the setup steps with any verification and publishing Meta/Facebook may require.
   
   
7. Once your app is created and published, you will need to access the App ID and App Secret to configure the extension on your site.  These are accessible from App Settings > Basic:
   
   
   
   
8. Open up a new tab on your web browser, and move to configuring the Facebook Login Extension.

Configuring the Facebook Login Extension

To enable the Facebook login extension, follow the steps below:

1. In the MemberMouse menu, click on General Settings.
   
   
2. Next, click on the Extensions tab and from the following page, click on the Facebook logo.
   
   
3. You will need to provide some information from your Facebook app, as well as make a few selections:
   
   
   
   
   App ID – From your Facebook app dashboard.
   
   App Secret – From your Facebook app dashboard.
   
   Allow Signups? – If you want to allow new customers to sign up using their Facebook login credentials, then click this box. Otherwise, members will only be able to login using their Facebook credentials, but not sign up for a new membership.
   
   Membership Level – Customers can only signup for a free membership level when they are using their Facebook login credentials. Once they are members, they can purchase a paid membership. You need to select the default free membership you would like customers to join when using Facebook.
   
   Callback URL: – This is the URL that is used in the Facebook App.
   
   
4. Click Save Configuration.

Adding Facebook Signup and Login to your site

Once you have configured your site to accept Facebook login, you need to add the following SmartTags™ to allow for signup and login:

Signup Button SmartTag™

The following SmartTag™ generates a button that customers can use to sign up for a new account:

[MM_Social_Signup_Button provider='Facebook']


Attributes:

provider – Set the provider attribute to ‘all' to generate signup buttons for all active social login providers, or you can use an individual tag for each provider Twitter, Facebook and Google. For example:

[MM_Social_Signup_Button provider='all']


Optional Attributes:

membershipLevel – You can optionally use this attribute to override the default signup membership level
defined above. It takes a membership level ID for free membership levels only. For example:

[MM_Social_Signup_Button provider='Facebook' membershipLevel='2']

Read this article to learn how to find your membership level IDs.

Login Button SmartTag™

The following SmartTag™ generates a button that customers can use to log into an existing account:

[MM_Social_Login_Button provider='Facebook']

Attributes:

provider – Set the provider attribute to ‘all' to generate signup buttons for all active social login providers, or you can use an individual tag for each provider Twitter, Facebook and Google. For example:

[MM_Social_Login_Button provider='all']

Troubleshooting

NOTE: The Facebook Client Library requires that the timezone be explicitly set in the PHP configuration.  If you are setting directly in the php.ini file, a Central Timezone setting would look like this:

date.timezone = “US/Central”