Jump to content
WebFlake

Advertisement

How to setup Facebook

Technologx

By Technologx
in IC4 Guides

 Share

Recommended Posts

Technologx Contributor

Technologx

Posted
Posted

Facebook

You can allows users to sign in on your community with their Facebook account. This is a great way to make it easier for users to get started on your community and increase the number of signups. In addition, users who sign in with Facebook can have their profile photo automatically synced with Facebook and can even import their status updates and allow them to automatically share content they post on your community to Facebook. This guide covers everything you need to know to set up this integration.

Tip

If you enable either the "Allow Status Imports?" or "Users can share immediately when posting?" settings for Facebook login, make sure you read and follow the instructions in Step Five below.

 

Step One: Create a Facebook App

In order to use Facebook to log in on your community, you need to create an "application" through the Facebook Developer site. This gives Facebook some information about your community and a special key that is needed to complete the set up.

  1. Go to https://developers.facebook.com/apps and sign in with your Facebook account if you are not already signed in. 
     
  2. Click the button to add an app in the top-right.
    Screen Shot 2016-02-25 at 10.54.49.png
     
  3. Choose the option for a website.
    Screen Shot 2016-02-25 at 10.55.37.png
     
  4. Type the name of your community and create the application.
    Screen Shot 2016-02-25 at 10.56.55.png
     
  5. Leave the option about a test app off, choose the category which best matches your community and create the application.
    Screen Shot 2016-02-25 at 10.58.16.png
     
  6. On the next screen, you can ignore the part about the SDK, and just fill in the URL to your site below.
    Screen Shot 2016-02-25 at 11.01.11.png
     
  7. Click the link to to continue to the dashboard.
    Screen Shot 2016-02-25 at 11.03.29.png

 

Step Two: Update App Settings

There's a few more pieces of information you need to give Facebook about your community before continuing.

  1. On the dashboard for your app on Facebook's site, click the "Settings" link the sidebar.
    Screen Shot 2016-02-25 at 11.19.26.png
     
  2. Fill in a Contact Email and save the form.
    Screen Shot 2016-02-25 at 11.20.37.png

It is also a good idea to upload an App Icon so that when users sign in with Facebook they see your logo rather than a generic icon on the login screen. You can also set a Privacy Policy URL so users see a link to that on the sign in screen. These are normally optional, but if you intend to enable the "Allow Status Imports?" or "Users can share immediately when posting?" settings (discussed in Step Five), it is required. To do this:

  1. On the dashboard for your app on Facebook's site, click the "App Details" link the sidebar.
    Screen Shot 2016-02-25 at 14.08.17.png
     
  2. Under "Contact Info" fill in any details you like. It is a good idea to include a Privacy Policy URL (which is required if you are going to enable the settings discussed in Step Five) but you can also fill in the other fields to show additional information on the sign in dialog.
     
  3. Under "Icons" upload a logo for your community and save the form.
    Screen Shot 2016-02-25 at 14.09.07.png

 

Step Three: Link your Facebook App with your Community

Back on the dashboard for your Facebook App you will see a box like this at the top of the page:

Screen Shot 2016-02-25 at 11.08.25.png

You need to copy and paste the App ID and App Secret into the Admin CP on your community. Go to Admin CP -> System -> Login Handlers and click the "Edit" icon for Facebook and enter those details on that screen.

Screen Shot 2016-02-25 at 12.16.48.png

Tip

If you enable either the "Allow Status Imports?" or "Users can share immediately when posting?" settings for Facebook login, make sure you read and follow the instructions in Step Five below.

After saving, you need to enable the login handler. Make sure the badge next to Facebook says "Enabled", and click it to toggle if it doesn't.

Screen Shot 2016-02-25 at 11.11.55.png

 

Step Four: Enable your App

Now you need to set your Facebook App to be ready for use.

  1. Back on the dashboard for your app on Facebook's site, click the "App review" link the sidebar.
    Screen Shot 2016-02-25 at 11.16.26.png
     
  2. Click the toggle to make your application live and confirm the popup.
    Screen Shot 2016-02-25 at 11.22.13.png

    Screen Shot 2016-02-25 at 11.22.36.png

 

Users will now be able to sign in with Facebook on your community.

 

Optional Step Five: App Review for Status Integration

When setting up Facebook login, there are two settings which, if enabled, you need to perform additional steps to set up: "Allow Status Imports?" or "Users can share immediately when posting?".

Screen Shot 2016-02-25 at 12.07.01.png

Because these settings allow your community to read from and write to the user's timeline on Facebook, Facebook requires that before you can use these features you must submit an application to them to review this functionality. If you want to enable either of these settings, you need to do the following:

  1. If you have not already uploaded an App Icon and set a Privacy Policy URL as discussed in Step Two, do that now.
     
  2. Enable the settings as desired and then sign in with Facebook on your site. You will see a message that some permissions have not been submitted for approval, you can ignore that warning for now and press "OK" to continue logging in.
    Screen Shot 2016-02-25 at 12.51.21.png
     
  3. If you are enabling the "Users can share immediately when posting?" setting, you need to perform this action so that Facebook knows it works correctly. Submit a topic or other content on your community and when you do so, check the "Share on Facebook" checkbox.
    Screen Shot 2016-02-25 at 13.09.45.png
     
  4. Back on the dashboard for your app on Facebook's site, click the "App review" link the sidebar.
    Screen Shot 2016-02-25 at 11.16.26.png
     
  5. Click "Start a Submission".
    Screen Shot 2016-02-25 at 12.09.39.png
     
  6. If you are enabling the "Allow Status Imports?" setting, check the "user_posts" checkbox.
    Screen Shot 2016-02-25 at 12.11.27.png
     
  7. If you are enabling the "Users can share immediately when posting?" setting, check the "publish_actions" checkbox.
    Screen Shot 2016-02-25 at 13.11.35.png
     
  8. Click the "Add X Items" button.
    Screen Shot 2016-02-25 at 13.11.35 copy.png
     
  9. If you are enabling the "Allow Status Imports?" setting, click the "Add Notes" button for the "user_posts" permission and fill in the form explaining how your community will allow users to import posts from the user's timeline into the statuses feature on your community. You will need to select the "Web" platform and provide both instructions and a screencast of how Facebook can test the feature. Suggested instructions are:
     
    Quote

    1. On the home page, click "Existing User? Sign In" in the top-left and then click "Sign in with Facebook" from the dropdown.
    2. Click on your name on the top-left 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-left and then click "Account Settings".
    5. Click the "Facebook" tab. Observe how your latest timeline post is saved providing context to the user.
    6. Enable the "Update my status here with my Facebook status" setting and save the form.
    7. Click the "Synchronise Now" button.
    8. Click on your name on the top-left and then click "Profile".
    9. Observe how your latest timeline post has been imported and shows alongside other content from the site.

    Screen Shot 2016-02-25 at 13.39.47.png
     

  10. If you are enabling the "Users can share immediately when posting?" setting, click the "Add Notes" button for the "publish_actions" permission and fill in the form explaining how your community will allow users to share content they create on your community to their Facebook timeline. You will need to select the "Web" platform and provide both instructions and a screencast of how Facebook can test the feature. Suggested instructions are:

    Quote

    1. On the home page, click "Existing User? Sign In" in the top-left and then click "Sign in with Facebook" from the dropdown.
    2. Click the "+Create" button in the top-left and then choose "Topic" from the dropdown.
    3. Submit a topic, making sure you check the "Share on Facebook" checkbox before submitting.

    Screen Shot 2016-02-25 at 13.49.00.png
     

  11. Upload at least 4 screenshots showing the Facebook integration on your site. For example, you might show the "Sign in with Facebook" button, the homepage after the user has signed in, the Facebook screen in Account Settings, and the "Share on Facebook" button on the topic submission screen.
    Screen Shot 2016-02-25 at 13.55.19.png
     

  12. Submit the review.
    Screen Shot 2016-02-25 at 13.55.24.png
    Screen Shot 2016-02-25 at 13.56.39.png

You should be advised how long the review will take. Once Facebook have approved your review, the additional features will be available on your community.

  • Upvote 1
<p style="text-align: center;">
    <img alt="newforumsig2a8b7.png" class="ipsImage" src="https://technologx.com/applications/core/interface/imageproxy/imageproxy.php?img=http://upicme.technologx.com/images/newforumsig2a8b7.png&amp;key=39dac093df23a0bac3413cace79b784bbd9c7b204556aeca70f3d3b64bd6f656">
</p>
Be sure to click the green up arrow if I've helped you any or you like my uploads. Thank you it really helps! Also if possible if you download my files please review them thank you?
Link to comment
Share on other sites
  • 4 months later...
  • 2 weeks later...
  • 5 weeks later...
Technologx Contributor

Technologx

Posted
  • Author
Posted

Have no idea as I pulled this from Invision Powers website

<p style="text-align: center;">
    <img alt="newforumsig2a8b7.png" class="ipsImage" src="https://technologx.com/applications/core/interface/imageproxy/imageproxy.php?img=http://upicme.technologx.com/images/newforumsig2a8b7.png&amp;key=39dac093df23a0bac3413cace79b784bbd9c7b204556aeca70f3d3b64bd6f656">
</p>
Be sure to click the green up arrow if I've helped you any or you like my uploads. Thank you it really helps! Also if possible if you download my files please review them thank you?
Link to comment
Share on other sites
  • 2 weeks later...
  • 2 months later...
  • 1 year later...
mr-pimpen Rising Star

mr-pimpen

Posted
Posted

giving an update to this for members who needs help and don't know where to add the callback

Valid OAuth Redirect URIs 

https://www.site/oauth/callback/

Client OAuth Settings

don't for get to set the https on if you are using https

1525474867_FacebookLoginFacebookforDevelopers.thumb.png.0a058c297aad3b8dd7203ddaa97b7bd0.png

Approved Items

you only need  those to

656769539_FacebookforDevelopers.thumb.png.9eada3021174515a3c8d9170d0b6f040.png

 

when I load your site, I was like a vampire, slept for thousands of years and just now is my first glimpse of light haha.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...