Setting up Facebook Connect

Before you begin implementing the Facebook Connect feature on your website, make sure you have read the Facebook Connect Policy
Images disclaimer: This article contains images from third party sources which we do not have access to. Some configuration screenshots may be different

Overview

Facebook Connect is a system that allows any user with a Facebook account to join your site easily with just one single click. It saves your visitor the hassle of registering to yet another site and maintaining another username and password. With this system, your site can easily verify the identity of your site visitor and log them into your site easily.

Creating the Facebook App

Prerequisites

  1. You need to have valid Facebook account.
  2. Need to have Privacy Policy page and Terms of Service page on your website accessible by general public.
  3. A transparent 1024px X 1024px icon is also required.

Creating new app

Step 1: While logged in to Facebook website, browse to https://developers.facebook.com/ and from My Apps dropdown chose Add a New App option.

Createapp.png

Step 2: In the popup window that opens, click a Website icon

Websiteapp.png

Step 3: Enter the name of the app. This name will be displayed later when user tries to login or register on your site, so we recommend that you name your app exactly as your website name is.

Appname.png

Step 4: In the following window, enter the contact email and chose a category which best describes your site, then press Create App ID button

Note: At this point, you might be asked to resolve Captcha

Step 5: Scroll down to the box with title Tell us about your website
Enter the Fully Qualified Domain Name (FQDN) of your website

Sitename.png
Note: If you read the page that has been worked on, you will find out that we just enabled entire Facebook Javascript SDK for the URL we specified in Step 5.

Step 6: Click on the Skip to Developer Dashboard link as indicated on the image.

Nextsteps.png
If you decide to still click on the large box with Facebook Login title, that is fine too, but then you will be redirected to the Facebook Login documentation which is not really what we need.

App Dashboard Settings

Step 1: Once in the App Dashboard, go to Settings from the left menu and make sure you are on the Basic tab.
To ensure faster approval of your app, enter all the details as explained bellow and save changes.

Dashboard settings.png
  • Display Name - Enter the name which will be shown in the Facebook Connect login window at your site.
  • App Domains - Enter the domain name WITHOUT http:// or www prefixes.
  • Contact Email - Enter the contact email Facebook will use if there is a problem with the app.
  • Privacy Policy URL - Full URL to your privacy policy.
  • Terms of Service URL - Full URL to your ToS policy.
  • App Icon - A high quality icon which will be used in Facebook Connect popup window. Make sure that dimension of the file are exactly 1024x1024px and that it is transparent PNG icon. Facebook will actually nag about non-transparent icons with solid color backgrounds.

Step 2: Go to App Review link from left-hand sidebar navigation and make your app public. This will automatically initiate review process but will also allow you to use the app.

Configure JomSocial

Step 1: Go to Backend dashboard of your site and navigate to JomSocial Backend -> Configuration -> Integrations and enter the API and Secret keys.

Step 2: Save the configuration and go to the site frontend. The Facebook Connect button should now be available on all JomSocial login forms.

Fbcbutton.png

App Review

JomSocial Facebook Connect asks way too much permissions by default, and you will most likely encounter the issue with review process.
It usually reflects with notice in the login window that will look like this:

Review issue.png

If this happens at your site as well, go to Integrations settings of JomSocial configuration and disable all options for Facebook Connect as outlined on the picture below:

Review issue backend conf.png

This will ensure notice is gone and you can start enabling those options back once your application is approved by Facebook.

Review no issue.png

How to get my app approved faster

Facebook will review your app to ensure a high-quality experience across apps. In general, your users must be aware that they are logging in and eventually posting to Facebook while using your app.
Facebook imposes strict review process allowing app users to be in complete control over information they share with your app or back to Facebook.

You only need to submit your app for review if:

  • You want your App to be listed in the Facebook App Center
  • You want to create new, or edit existing, Open Graph actions and stories
  • Your app asks people for any extended permissions including publish_actions (JomSocial does this by default, but disabling all options mentioned above will prevent this from happening)

Your app can use Facebook Login to access public profile, email and users friends without submitting for review.

See Also