How to Create a Facebook Application for Vanilla Forums Single Sign-On (SSO)

In order for members of your community to sign in using Facebook Connect, you must create an “application” in Facebook. This guide will illustrate how. In addition, it will show you how to configure Vanilla with the IDs provided by your new Facebook application. There are a minimal number of steps, and the process should take only a few minutes. Key areas of the set up process are highlighted in blue. All other steps are optional.

The primary step has no illustration: you must have a Facebook account. Following that, you must register as a developer if you have not already. Skip steps 1 and 2 if you are a registered developer.

Registering as a Facebook developer

1) Navigate to https://developers.facebook.com, and click the “Apps” link. A dropdown will appear, and if you are not already registered as a Facebook developer, a single option will be provided, “Register as a Developer.” Click that option.

facebook-dev-register-1

2) A modal prompt with a breadcrumb of steps will appear. This guide will not cover them, because Facebook does a good job of doing that. Upon successfully registering as a developer, scroll to step 3 to begin the process of creating a Facebook application.

facebook-dev-register-2

Creating a Facebook application

3) The first thing you will want to do is navigate to their developers page. Click on the “Apps” link. A dropdown with some options will appear, but the important one for this guide is the “Create a New App” link. Click it and progress to step 4.

facebook-sso-app-0

4) A modal prompt with three key areas are displayed. Fill out the “Display Name” with the name of your Web site, typically followed by the word, “Forums,” for clarity. Select “Communication” as the “Category.” Finally, click on “Create App.” A security challenge will appear: type in the characters you see. This step is not illustrated.

facebook-sso-app-1

5) Successfully completing step 4 will redirect you to the developers dashboard. Four key areas are highlighted. Be sure to click on “Settings” in the left-side panel. Verify that the “Display Name” is the one that you typed in step 4. Provide a valid “Contact Email” in case you need to be contacted. The last key area of this illustration is the “+Add Platform” button. Click that and proceed to step 6.

facebook-sso-app-2

6) A modal prompt will appear with several options. Select “Website” and proceed to step 7.

facebook-sso-app-3

7) In the Website options, only the “Site URL” is required. Provide that and click “Save Changes.”

facebook-sso-app-4

8) The application has been created, but it will not be accessible by the public. It is operating in “sandboxed” mode, which means no one but you has access. Click on the “Status & Review” link in the left-side panel. You will need to make the application available to the general public, so toggle the switch to “Yes.” You will be prompted to confirm this selection.

facebook-sso-app-5

Setting the “App ID” and “App Secret” in Vanilla’s dashboard

9) Once the relevant steps above are completed, navigate to Vanilla’s dashboard. Click on the “Social” link in the left-side panel. There will be a list of available social addons that appear on the right. Make sure the “Facebook Social Connect” toggle is “Enabled.” A cogwheel will display next to it. Click on it.

facebook-sso-app-6

10) Type in or paste the “Application ID”/”App ID” and “Application Secret” provided by Facebook’s developers dashboard, under the “Settings” link in the left-side panel: see the illustration in step 7 for an example. Tick the “Enable Social Sign In” checkbox. Finally, save the information.

facebook-sso-app-7

Everything should now work. If members of your community are unable to sign in using Facebook Connect, please review the steps once more. The troubleshooting resources below may also help.

§

Troubleshooting

  • Facebook’s (old) documentation for creating an application can be found here: https://developers.facebook.com/docs/web/tutorials/scrumptious/register-facebook-application/
  • Make sure you’ve entered your site’s url. If the url you enter in your Facebook application doesn’t match your forum’s url then Facebook will give errors when trying to sign in.
  • When copying your app ID and secret make sure you haven’t copied any leading or trailing spaces around them.
  • If you can sign in to your site through Facebook, but no one else can then your Facebook application may be in sandbox mode. See step 8 above to disable this.