Creating a Facebook App

To start collecting social registrations with Facebook, you need to get your Facebook app up and running. Facebook is one of the one services that requires your app to get manually approved by their team. It's not really that tricky. Just follow along with the video or the written instructions and shout out if we can help.


The three main steps for Facebook are:

  1. Creating your app on Facebook
  2. Checking your live site is working with login
  3. Submitting your Facebook app to them for approval

So let's get cooking with Facebook and get the first part of your app up:


1. Sign into Facebook at the Developer site

It'll get you to log into your normal Facebook account, then it'll prompt you to create a Facebook for Developers account if you don't already have one.

If you had to make a new account, you may have to press the blue Log In button once more (it will be in the same place, but the text will have changed to Get Started).


2. From the My Apps drop-down in the top-right corner, click on Add a New App


3. Fill in your first screen of app details and press Create App ID


4. Click Set Up next to Facebook Login (the button appears when you put your mouse there)




5.  Click Settings on the left sidebar, under the heading Facebook Login

Facebook will try to send you the Quickstart route when we actually want to manually choose our settings.



6. Fill in your app details

This is pretty straightforward. 

The following toggles should be set to YES:

  • Yes - Client OAuth Login
  • Yes - Web OAuth Login 
  • Yes - Use Strict Mode for Redirect URIs

Fill in the blank fields as follows:

1. Valid OAuth redirect URIs: 

https://theappreciationengine.com/FacebookAuthenticator_Controller

2. Deauthorize Callback URL: 

https://theappreciationengine.com/FacebookAuthenticator_Controller

3. Redirect URI to Check: 

https://theappreciationengine.com/FacebookAuthenticator_Controller

(and press Check URI)

*If you're on a custom AE Enterprise plan you'll have a custom domain. Make sure to add in in front. 

E.g.
https://sony.theappreciationengine.com/FacebookAuthenticator_Controller

Press the Save Changes button.


7. Click on Settings in the lefthand menu and fill in the requested information

Make sure to fill in this information as much as you can including:
Display Name, App Domain (the website you'll be driving people to), Contact Email, Privacy Policy and Terms of Service.

Also make sure to upload your App Icon and choose a category for your product.

Once you're done, hit Save Changes!


8. Add your platform

Most of you are probably adding Facebook login to a website. So the last step is adding your website URL. Click the +Add Platform button and select Website.


9. Type in your website URL and press Save

If you have a mobile app and you want Facebook login on that too, you'll need to go through steps 7 and 8 once more, choosing "IOS" or "Android" and filling in the relevant details.


10. Click on the Show button at the top of the page to show the Secret


11. Go back to your AE dashboard tab

If you're using the walkthrough, skip ahead to step #14. If you don't already have AE open, go to a new tab and log into your AE dashboard account.

Click on AE Connect from the AE header.


12. Click on the Edit button


13. Select the Facebook icon


14. Paste your App ID and Secret into the AE window 

Then press the Activate service button.


15. You can see your Facebook app is live with AE!


16. High five! 

The first stage is complete and you've built your basic Facebook App.


17. Remember that you'll need to set it live and you may need to submit to Facebook for approval.

Just go to the App Review panel and set the slider to Yes


When you click the toggle, you'll see this message.


Facebook automatically approves permissions for email, public profile and user friends data.
 If you want more permissions, you'll have to submit your app to Facebook for approval. For more on that, see our article on Extended Facebook Permissions.



Next Step

Connect other social networks or integrate AE Connect, our social login solution, into your website.


How did we do?