How To Create Facebook App For Social Login

Social Login: Facebook App Setup

Overview

This document provides instructions on properly setting up a Facebook application so that users can log in/register via Facebook on your site. You will need to purchase the social login extension if you want users to log in via Facebook.

Creating a new app

To allow users to log in to your site with their Facebook account, you need to create a Facebook app. To create a new Facebook app, please do the following:
Go to the Facebook Developers site: https://developers.facebook.com/
If you are not logged in, log in to the site using your Facebook account details.
Once logged in, go to My Apps.
Click on Create App button. It will lead you to the create app page.
This is where you can select an app type. Choose the "Consumer" type. Once selected, click the button.
Fill out the Display Name, App Contact Email. Then click theCreate App button.

Note: After clicking this button, you may be presented with a security check

Click on the Set Up button.

Note: Add your website URL to the "Site URL" field below. Then click on Save & Continue buttons.

Setting up the app

After creating the app, go to the navigation menu for your new app. There are a few steps that you will need to do before your app setup is complete.

App Review > Permissions and Features

On this tab, you can set the permissions for scopes. In Graph API version 11, it is required that you add advanced permissions to scopes `public_profile` and `email` so that the API returns the Email Address and Basic Profile Details syncs it with UM Form.

Scroll down and look for thepublic_profile and email. Click on the "Get Advanced Access" buttons.

A pop-up message will appear. If you agree with the message, check the box and click confirm.

Note: After clicking confirm, you may be presented with a security check.

Settings > Basic

On this tab, you can get the App ID and App Secret. You need to copy and paste both into the Facebook tab on the Ultimate Member Settings Facebook tab. In particular, you must fill in the following information: Privacy Policy URL and Terms of Service URL. You can also add an app icon to make the app look more professional.

When you scroll down the page, you will find the Website section.

Add your website URL, then click the "Save Changes" button.

Settings > Advanced

App Restrictions - You can restrict your app to a specific age range and countries if your site references alcohol or an adult nature site.

Security - These are optional if you wish to make the app more secure:

Facebook Login > Settings

On the Menu under theProducts, you will findFacebook Login. Click on Settings under the Facebook Login tab.

Client OAuth Settings - You need to enter your site's login, register, and account's social tab URIs into the field "Valid OAuth redirect URIs." Add the custom page URL if you plan to use the social login shortcode on the custom page.

We recommend adding additional URLs with the parameter " return_provider" and "provider," see example:

https://www.yoursitedomain.com/
https://www.yoursitedomain.com/?provider=facebook
https://www.yoursitedomain.com/?return_provider=facebook
https://www.yoursitedomain.com/login/
https://www.yoursitedomain.com/login/?provider=facebook
https://www.yoursitedomain.com/login/?return_provider=facebook
https://www.yoursitedomain.com/register/
https://www.yoursitedomain.com/register/?provider=facebook
https://www.yoursitedomain.com/register/?return_provider=facebook
https://www.yoursitedomain.com/account/social/
https://www.yoursitedomain.com/account/social/?provider=facebook
https://www.yoursitedomain.com/account/social/?return_provider=facebook

To make the app live all you need to do is go on top of the page and click the switch button from Development to Live.

Note: Before you can switch to live mode, you must complete Data Use Checkup.

When you complete the Data Use Checkup, make sure that you have switched to Live Mode.

App Setup Complete

Once you have done all that, the app is now complete. You should now add the App ID and App Secret into the Ultimate Member Settings Facebook Tab if you have not already done so.

Facebook for Developers > Settings> Basic

Ultimate Member > Settings > Extensions > Social Login > Facebook Social Connect