Facebook Integration

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.

  1. 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.
  2. Click the Apps tab at the top and then click on the Add a New App link.
  3. Select Website on the overlay which appears.
  4. Give the application a name, for example your site or domain name, and click on the Create New Facebook App ID button.
  5. Choose a category and click on the Create App ID button.
  6. After the app is created, enter the URL of your site and click Next.
  7. Reload the https://developers.facebook.com/ page, click on the Apps tab at the top again and this time select the app you have just created.
  8. Click on Settings in the sidebar on the left and enter any other details as required, such as a contact email address.
  9. From the same menu, select Status & Review and choose the option to make the app available to the general public. Note that you must have a valid contact email address configured to perform this step.
  10. Now return to the Settings section and make a note of your App ID and App Secret (you may need to click a button to show them). Copy these values into the respective fields in the Options > Facebook Integration section of 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.

  1. Log in to the Admin Control Panel.
  2. Click on the Options icon.
  3. Select the Facebook Integration group from the list.

Enter the Application ID and App Secret obtained earlier into the respective fields.

Facebook Recommend

Facebook Recommend will allow visitors to recommend/like pages which will post a link on the wall of their Facebook account. This does not require the Facebook application.

The Open Graph

Your XenForo homepage, threads, pages etc. have the ability to become Open Graph objects. This can have numerous benefits, including the ability to specify an image to accompany any Like/Recommend news feed items posted to Facebook.

How to Find the ID of a Facebook User.

In order to participate in the Open Graph you must provide some extra information, which can take the form either of an Application ID, or the user IDs of one or more Facebook users who are authorized to act as administrators for the pages within the Open Graph. Both of these values can be set within the Facebook section of options within the XenForo Admin Control Panel.

Open Graph Image

Facebook will automatically pick images to act as thumbnails from a page on which a person has clicked Like / Recommend, unless it is acting as part of the Open Graph. XenForo can provide an Open Graph Image to Facebook, but in order to do so, you must provide either a Facebook App ID or a Facebook Admin ID in the Facebook Integration group of options in the XenForo Admin Control Panel. At the minimum, you should enter your own Facebook user ID as one of the Admin IDs.

Changing the Default Open Graph Image

When a visitor clicks on the Facebook Recommend / Like button for a page participating in the Open Graph, a logo image and link is posted on their Facebook Wall. If they make a comment when doing so, a snippet of the page (if applicable) is also posted.

If the URL is posted directly to their Facebook Wall, they will be given a choice of which image to use; either the logo or thread author's avatar.

The default logo image is located at
/styles/default/xenforo/logo.og.png

If you wish to change the default logo image, create a new image 100 pixels square, save it as logo.og.png and upload it to your styles directory, overwriting the existing image.

Alternatively, you can upload a new image to the server and change the image path for each style.

  1. Log in to the Admin Control Panel.
  2. Click on the Styles icon.
  3. Click on Style Properties for the style you wish to change.
  4. Select the Header and Navigation group from the list.
  5. Enter the path to the uploaded file in the Facebook Open Graph Logo field.

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

  1. Select the Tools tab.
  2. Click on Test Facebook Integration from the list on the left hand side.
  3. Click on the Run Test button.

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.

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.

Visitors will now 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.