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

3. when prompted, enter your community name as the name for your first app. If you have previously registered, click Add a New App 

2.png

Click to create a new app

4. Enter your community name when prompted


3_add_name.png

Enter your community name here

 

5. You will be taken to the dashboard for the app you have just created. Under the Add a Product section, find the Facebook Login section and click Set Up.

 

4_facebook_login.png

Facebook App Dashboard

6. Choose Web as the platform you want to set up facebook login for

5_select_www.png

Click WWW here

 

7. 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

8. 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.

7_callback.png

Callback URL

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. Note at this point you may be asked for other information such as your privacy policy URL etc, which you ned to populate.

2018-09-26_12-24-26.png

App ID and Secret

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

Entering details in Invision Community

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.

 

Enabling Promotion

Within the Invision Community product, you can enable the ablility for yourself, and other selected staff, to promote items directly to your facebook pages and groups. This is set up from following location in your AdminCP 

Settings -> Site promotion -> Social Media Promotion

In order to enable this however, you first need to ensure you have the correct facebook permissions. 

1. On the Facebook for Developers site, go to App Review from the left-side menu. Click 'Add Items'
8_addperms.png

3. Check the following items to ensure you and staff you select to do so, can promote on the platform 

  • manage_pages
  • publish_pages
  • publish_to_groups

9_select_review_items.png

Select for Review

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.

Important:- Ensure you edit text below as appropriate to group or page, and with the links for your site where noted in brackets

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

    Allows users with the appropriate permissions to promote content to our facebook page/group

  • 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 an item of content (include a link here so facebook can test)
    3. Click "Promote" in the top right of the topic
    4. Enter details in the box next to the facebook icon (click x next to all others)
    5. Click promote
    5. Await 5 mins as it runs on a task
    6. Observe how the content entered, along with link to the topic, is posted to the facebook page/group (add your facebook page here)

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.

10_facebook_review.png

Example submission

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.

Go Live

IMPORTANT: - Do not go live with your product, until you have completed any application permission reviews required by facebook for Statuses, and/or social media promotion.

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


  Report Guide


×