Note: You need to activate the User Registration premium addon for this.
Once you have completed the above tasks of installing and activating the feature, we can move on to setting up this feature for your website.
Before using this feature, you need to generate and enter the API keys for the respective social connection. To do so, follow the steps listed below:
- Go to Everest Forms Settings -> UserRegistration -> Enable the Social Login
Social Connect API Settings #
- In this setting, we can use various social media credentials to login by enabling the toggle button.
- We can see the social login option using social media (whichever enabled) in the login screen now.
- Get the Facebook App ID and Facebook App Secret from http://developers.facebook.com. Login to your Facebook account and click on Create App button.
- Enter your display name and contact email and then click on the create app id button.
- After creating an app id you are redirected to the dashboard, where you can get the app id. For viewing the app secret, go to App Settings > Basic.
- You also need to add the redirect URL (your callback page (at the redirect URL) when Facebook sends the user back). For this click on Add product and then, Facebook login setup. Adding adding the Product go to Advanced -> Share Redirect Allow List.Now, enter the redirect as:
https://example.com/wp-login.php/?everest_forms_social_login=facebook
- Insert the app id and app secret into our user-registration settings tab.
- Now you should be able to login using your Facebook credentials.
Facebook Login is not working on Mobile Phones
If you get the following error message while logging in using Facebook on your mobile devices, this suggests that the App you created on the Facebook Developer site isn’t live.
For this, follow the steps below.
- Go to Facebook for developers from here
- Choose My Apps from the top bar
- Click on your app icon ( then you will notice that your app is not live from the top bar )
- From the left side select Settings > Basic
- Put your privacy policy link in the Privacy Policy URL and in the User data deletion field, you can make a copy from this privacy policy ( select file from the top bar and select make a copy )
- Save changes
- Similarly, go to console.developers.google.com to create a new project to get the app id and app secret key.
- After creating a project you’ll be redirected to the dashboard, go to the credentials tab.
- Go to create credentials dropdown shown above and then click on the OAuth client-key.
- Now, select the Web application radio button, enter your redirect URL (your callback page (at the redirect URL) when Google sends the user back), and click on the create button.
Also, OAuth Redirect URIs should have the exact match.
- OAuth Redirect URIs should be similar to: https://example.com/my-account/?everest_forms_social_login=google
- Now, you should get the app id and app secret:
- Insert the app id and app secret into our User Registration settings tab.
- Now you should be able to login using your Google credentials.
- Go to the LinkedIn developers page https://www.linkedin.com/developer/apps and then to My Apps tab to create a new application.
- Enter the details of your app and submit the form:
- After submitting the form, you will be redirected to the settings page of your app. Now, go to the ‘Auth’ tab to find your authentication keys.
- Also, enter the fully qualified URLs to define valid OAuth 2.0 callback paths in the OAuth 2.0 settings in the Auth tab.
OAuth Redirect URIs should have the exact match.
OAuth Redirect URIs should be similar to: https://example.com/my-account/?everest_forms_social_login=linkedin
- Now, you will have to add permissions in order to use the LinkedIn login on your website. For this, go to the Products tab and add ‘Sign In with LinkedIn using OpenID Connect’.
- When you add the ‘Sign In with LinkedIn’, you will be able to see the permissions in the OAuth Scope section in the Auth Tab.
- Insert the app id and app secret into our User Registration settings tab.
- Now you should be able to log in using LinkedIn credentials.
Social Login Button on Individual Form #
Now, the Everest Forms’s Social Connect feature provides you the flexibility to add a custom social connect button on individual forms.
To do so, please go to the individual form setting. Scroll down and there you will find the setting called ”Social Connect option” to select the social button on the specific form.
