Skip to content
Log in Sign up

Facebook Social Authentication – How To Get A Facebook API Key?

Create a Facebook app, copy its App ID and App Secret into the Vehica Panel, and take the app through App Review so your visitors can log in with Facebook.

4 minute read

Create the Facebook app

  1. 1 Open the Facebook for Developers page

    Go to https://developers.facebook.com/apps/ and sign in.

  2. 2 Click Create App

    The button sits above the list of your existing apps.

    My Apps page on the Facebook developer site with a search box and the green Create App button highlighted.
  3. 3 Fill in the app details

    Enter an App name and an App contact email, then click Next.

    Create an app wizard on the App details step with the app name and app contact email filled in and a blue Next button.
  4. 4 Choose the Facebook Login use case

    On the Use cases step set Filter by: All and select Authenticate and request data from users with Facebook Login, then click Next.

    Use cases step with the filter set to All (18) and the option "Authenticate and request data from users with Facebook Login" ticked at the bottom of the list.
  5. 5 Pick a business portfolio

    You can choose I don’t want to connect a business portfolio yet. or an existing business portfolio if you already have one. It is up to you.

    Business step asking which business portfolio to connect to the app, with the "I don’t want to connect a business portfolio yet" option and a note that no businesses are available.
  6. 6 Review the requirements

    Facebook lists what you will have to complete later.

    Requirements step listing Business verification and App Review as publishing requirements, each marked Required for 1 use case, with a Next button.
  7. 7 Go to the dashboard

    On the Overview step, click Go to dashboard.

    Overview step summarising the app name and email, the Facebook Login use case, no business selected, and the business verification and App Review requirements, with a Go to dashboard button.

Configure Facebook Login

  1. 1 Open App customization and requirements

    You land on the app dashboard — select App customization and requirements.

    Facebook app Dashboard with the "App customization and requirements" row highlighted above rows for testing requirements, business verification, App Review and publishing.
  2. 2 Add the email permission

    In the Permissions and Features panel, add email.

    Customize use case screen showing the Permissions and features table, with the Add button on the email row highlighted and public_profile listed below it.
  3. 3 Open the Settings tab

    This is where the Valid OAuth Redirect URIs field lives — the next step is where you get that address from.

    Facebook Login Settings tab with Client OAuth settings listed and the Valid OAuth Redirect URIs field outlined at the bottom.
  4. 4 Copy your OAuth redirect URI from Vehica

    You will find it in Vehica Panel > User Panel, in the Facebook section. Paste it into Valid OAuth Redirect URIs.

    WordPress admin with the Vehica panel open on User Panel; arrows point at the menu entry and at the Facebook section’s OAuth Redirect URI, with Enable Facebook Auth, App ID and App Secret on the right.
  5. 5 Select the Web platform in Quickstart

    Go to Quickstart and choose Web.

    Quickstart screen offering the iOS, Android, Web and Other platforms, with Web highlighted.
  6. 6 Add your domain as the Site URL

    Enter your site address in the Site URL field and click Save.

    Quickstart step "Tell us about your website" with an empty Site URL field outlined and a Save button on the right.

Fill in the basic settings and copy the keys

  1. 1 Open App settings > Basic

    Use the menu on the left of the app.

    App menu with Dashboard, Required actions, Use cases, Review and Publish (marked Unpublished) above App settings, expanded to show Basic highlighted and Advanced below it.
  2. 2 Complete the missing information

    The app only works properly once Privacy Policy URL, Terms of Service URL, User data deletion instructions, App icon and Category are filled in.

    Basic settings page with App ID and App secret at the top and the Privacy Policy URL, Terms of Service URL, User data deletion, App icon (1024x1024) and Category fields outlined.
  3. 3 Copy the App ID and App Secret

    Click Show to reveal the secret.

    Close-up of the App ID field showing a numeric app ID and the App secret field masked with dots beside a Show button.
  4. 4 Paste them into the Vehica Panel

    Put them in the App ID and App Secret fields of Vehica Panel > User Panel, tick Enable Facebook Auth, and save.

    Vehica Panel on User Panel with the Facebook section showing Enable Facebook Auth ticked, the App ID field marked 1, the App Secret field marked 2 and a Save all changes button.

Complete App Review and publish the app

The app must pass App Review
For the app to work correctly, you must complete all required verifications listed under Review / App Review. You may also be required to complete Business Verification — if so, it is indicated in this section. In the screenshots below, verification is already marked as completed.
  1. 1 Answer the data handling questions

    Start here — the questions cover how your app uses the data it receives.

    Review > App Review page with business verification submitted and the "Answer questions about data handling" card outlined.
  2. 2 Provide reviewer instructions

    Describe how a reviewer can test the login on your site.

    App Review page with the "Provide reviewer instructions" item outlined under Complete app settings.
  3. 3 Answer the permission questions

    Answer the questions marked in green: “How will this app use email?” and “How will this app use public_profile?”.

    Reviewer instructions section with "How will this app use email?" and "How will this app use public_profile?" outlined as the two remaining questions.
  4. 4 Submit for review

    Once every required step is done, the Submit for Review button becomes active.

    App Review checklist with app settings, reviewer instructions and both permission questions ticked, and an active Submit for Review button in the bottom right.
  5. 5 Publish the app

    Go to the Publish section and click Publish in the bottom-right corner.

    Publish section stating that all required app settings are complete, listing the Facebook Login use case, with the Publish button in the bottom-right corner.
Dialog reading “Your app was successfully published, 3 of 3 completed”, with the note that the app is now available for the public to use and a Done button.
After publishing you get this confirmation.

Now the Facebook login should be available on your website.

Resolving Permission Issues in Live Mode for Facebook Login App

If your app operates smoothly in development mode but encounters problems in Live mode, the issue may stem from permissions settings.

To address this, navigate to App Review > Permissions and Features > public_profile and check whether the API calls column is active. For your app to function properly, it should be set to "Auto granted", as shown below:

App Review > Permissions and Features list with two permission rows showing Standard access and their API calls status, and Request advanced access / Get advanced access buttons on the right.

However, if you find it displayed as "Inactive (0)" like this:

Close-up of the public_profile permission row with Advanced access marked and the status shown as a red “Inactive (0)”.

This indicates that Facebook requires additional verification for your app and the problem is not related to WordPress and Listivo Theme. To resolve this issue, follow Facebook's App Review process detailed in their official documentation: https://developers.facebook.com/docs/app-review/introduction

public_profile must be Advanced
Facebook requires the public_profile permission to be upgraded to "Advanced" for Facebook Login to work. To enable this option, you must complete Business Verification. More on access levels: https://developers.facebook.com/docs/graph-api/overview/access-levels/

Ask the people who build Vehica

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers 

We can also run your site for you, or build a new one.

Was this guide helpful?