The ability for visitors to log in and register via Facebook benefits site owners, due to the ease at which new accounts can be created.
In order to make use of this functionality, a Facebook Application is required to provide the necessary integration between the forum software and Facebook.
Creating a Facebook application
Before you configure your XenForo installation, follow the steps below to create a custom application for your site. A Facebook account is required to create an application.
- Browse to https://developers.facebook.com/ and be sure that you're logged into your Facebook account. Note that you must be logged in as a person, not a page.
- Click the My Apps button at the top and then click on the Add a New App link.
- Provide a name and email and then click Create App ID.
- Next you should see a page called Select a Product; if you do not, click Add Product on the left. Under Facebook Login, click Setup.
- You will then need to choose the platform. Click Web and enter the URL to your site. Click *Next through all of the steps.
- In the sidebar on the left, click Settings under Facebook Login.
- In Valid OAuth redirect URIs, enter
<XF board URL>/connected_account.php. For example,
https://xenforo.com/community/connected_account.php. The beginning of this URL must match your Board URL setting in XenForo exactly. Once entered, click Save Changes at the bottom.
- In the sidebar on the left, click App Review. If the app is listed as in development, click the toggle next to it to make it live/public.
- Go back to the sidebar on the left and click Settings near the top. Make a note of the App ID and App Secret*. These values will need to be entered into the XenForo control panel.
Configuring Facebook integration
To finalize the Facebook integration, you must enter the data obtained above into the relevant section of the XenForo control panel.
- Log in to the Admin Control Panel.
- Go to Setup > Connected accounts.
- Click on Facebook in the list. Enter the App ID and App Secret obtained earlier into the respective fields and save.
- Test the integration by clicking the Test provider link and following any onscreen instructions.
Changing the Facebook share logo
When a user shares a page to Facebook, Facebook will either display a nominated image or attempt to pick an image from the page. To nominate an image for all pages, you may define a Metadata logo URL in style properties.
To set this, in the control panel, go to Appearance > Style properties > Basic options and change the Metadata logo URL to point to a logo you've uploaded. This should generally be a square image. Facebook recommends it be at least 200x200 pixels.
Due to caching, it can take several weeks for the image to update on the Facebook servers.
Testing Facebook Integration
To confirm everything is configured and working correctly, you can run the test tool.
- Select Setup from the navigation panel, and click on Connected accounts.
- Click on Test provider next to Facebook's entry in the list of providers.
- Click on the Test button.
If the test is successful, the resulting screen will show the name, email address and profile picture of the Facebook account which is associated with the Facebook Application.
If the test is unsuccessful, confirm that the Board URL includes the
http:// and that the correct details have been entered for the Facebook Application ID and Facebook Application Secret.
After a successful test, visitors will be able to log in and register using their Facebook accounts. The first time they attempt to do so, they will be required to allow the application access to their account.