Jump to content

Guides

Facebook

You can allow your members to sign in to your community using their Facebook account.

 

Basic Facebook Login

To start the process, go to AdminCP -> System -> Login & Registration, click Create New to setup a new login method and choose Facebook. You will now be prompted to fill in some details which you'll need to acquire by creating an "app" with Facebook.

Creating a Facebook App

1. Go to the Facebook for Developers site and sign in with your Facebook account.

2. If you have not already registered with Facebook for Developers, click Register Now and follow the instructions to register - when prompted, enter your community name as the name for your first app. If you have previously registered, click Add a New App and enter your community name. You will be taken to the dashboard for the app you have just created.

Screen Shot 2018-03-02 at 16.27.12.png

Facebook App Dashboard

3. Under the Add a Product section, find the Facebook Login section and click Set Up. Then choose Web as the platform and fill in the URL to your site and click Save. You do not need to go through the rest of the setup wizard.

Screen Shot 2018-03-02 at 16.30.16.png

Facebook Login Setup - You only need to fill in the URL

4. Go to the Products > Facebook Login > Settings tab from the left sidebar. In the Valid OAuth redirect URIs field enter the value shown in your AdminCP, which will be your community's URL ending with "/oauth/callback/" on the end. You must click Save Changes at the bottom to save this.

Set Up Invision Community

Go to Settings > Basic from the left sidebar. You will see your App ID and a button to reveal the App SecretBack in your AdminCP, fill in the form, using these details.

Now go to the front-end of your community, log out, and log in with the Sign in with Facebook button. At this point, only your own Facebook account, which you used to create the client, will work. If it works, you can continue to the next step.

Screen Shot 2018-03-02 at 16.40.06.png

Enterring details in Invision Community

Go Live

1. Back in the Facebook for Developers site, go to Settings > Basic from the left sidebar. Enter a value for the Privacy Policy URL (you can create a pages for this in your AdminCP under System -> Terms & Privacy Policy if you haven't already). Make sure you click Save Changes to save.

2. In the top-right you will see an On/Off switch next to Status: In Development. Click the on/off switch and confirm. The switch should now indicate On and you should see Status: Live.

5a997faa032ac_ScreenShot2018-03-02at16_44_57.png.813d22586e2246249fbf55ea3870f533.png

Live Facebook App

Enabling Status Imports

When setting up Facebook Login in your AdminCP you will have seen a Allow Status Imports? setting which mentions requiring additional setup. Using this feature means gaining access to restricted Facebook APIs, which, before you can do, you need to get approval from Facebook.

1. To get started, enable the Allow Status Imports? setting from AdminCP -> System -> Login & Registration -> Facebook. 

2. On the Facebook for Developers site, go to App Review from the left-side menu. Click Start a Submission.

3. Check the user_posts checkbox.

4. You will now see the review, for each of the items you have chosen, there is an Add Details link.

Screen Shot 2018-03-02 at 16.56.53.png

Incomplete Facebook Review

Click Add Details and fill in the form. Details for what to provide are below. In addition to these information, you will need to provide a screencast of you demonstrating that process of signing in with Facebook and doing the thing you are asking Facebook for permission for (importing a status or automatically sharing to Facebook). Make sure your video shows you doing exactly the steps in the instructions you provided otherwise your review will likely be rejected. This video needs to show your community, so we cannot provide a video for you to send to Facebook - you must record and submit it yourself.

  • For How is your app using user_posts? choose Other and enter something like:
    Quote

    Allows users to import their timeline posts into their profile on the website.

  • For What platforms does your app use user_posts on? choose Web. You will be prompted to fill in instructions of how Facebook can test the functionality. Enter something like this (you might need to adjust if you have a custom theme which makes the UI different top what is described or your site is in a different language):
    Quote

    1. On the home page, click "Existing User? Sign In" in the top-right and then click "Sign in with Facebook" from the dropdown.
    2. Click on your name on the top-right and then click "Profile".
    3. Click "Edit Profile" and then enable the "Enable status updates?" setting to enable the site's status update feature.
    4. Click on your name on the top-right and then click "Account Settings".
    5. Click the "Facebook" tab.
    6. Enable the "Copy my Facebook status updates to my profile" setting and save the form.
    7. Click on your name on the top-right and then click "Profile".
    8. Observe how your latest timeline post has been imported and shows alongside other content from the site.

5. You may see additional requirements such as submitting an App Icon. Follow any additional instructions Facebook provides for preparing your review until you see a Submit For Review button.

Screen Shot 2018-03-06 at 11.44.40.png

Facebook Review Ready to Submit

6. Click Submit For Review to submit the review and confirm the submission. You will be advised how long it will take you for Facebook to approve the submission, and should receive an email once it is complete.

 

Automatic Sharing

Prior to version 4.2.3, you may also see a Users can share immediately when posting? setting. Unfortunately, Facebook have removed the API features which allowed this feature to work and so that setting has now been removed. If you are setting up Facebook login on 4.2.2 or prior, that setting must be turned off otherwise you will see an error when trying to log in.


  Report Guide


×