Social media integration

The ability for visitors to log in and register via various social media networks benefits site owners due to the ease at which new accounts can be created. This can help reduce the friction of creating an account or remembering login details, leading to increased engagement.

In order to make use of this functionality, it is required to register and fill in some basic developer details to register your application. This provides the necessary integration between the forum software and the social media network.

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 My Apps button at the top and then click on the Add a New App link.
  3. Provide a name and email and then click Create App ID.
  4. Next you should see a page called Add Product; if you do not, click the Plus Icon on the left next to the Products Heading. Under Facebook Login, click Setup.
  5. You will then need to choose the platform. Click Web and enter the URL to your site. Click *Next through all of the steps.
  6. In the sidebar on the left, click Settings under Facebook Login.
  7. In Valid OAuth redirect URIs, enter <XF board URL>/register/facebook. For example, https://xenforo.com/community/register/facebook. The beginning of this URL must match your Board URL setting in XenForo exactly. If you are not using Friendly URLs, the URL would be, for example, https://xenforo.com/community/index.php?register/facebook. The Board URL Requires HTTPS. Once entered, click Save Changes at the bottom.
  8. In the sidebar on the left, click Settings followed by Basic. For the Privacy Policy URL and the Terms of Service URL enter the links to those pages on your site.
  9. 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.
  10. Go back to the sidebar on the left and click Settings followed by Basic 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.

  1. Log in to the Admin Control Panel.
  2. Go to Options > Facebook Integration.
  3. Enter the Facebook Application ID and Facebook Application Secret obtained earlier into the respective fields and save.
  4. Test the integrated account

Google

Creating the Google project

  1. Browse to https://cloud.google.com/console/project and log in with your Google account. Note that the email address associated with this account may be displayed when users register using their Google account.
  2. Click the Create Project button and enter a name and ID. These will only be used internally.
  3. Once the project is created, click the hamburger menu icon located at the top left, then select APIs & Services, then Credentials in the sidebar, and finally OAuth Consent Screen and complete the details as necessary and save the settings.
  4. Click CREATE CREDENTIALS, select OAuth Client ID, then WEB APPLICATION and complete the details as follows:
    1. In both the AUTHORIZED JAVASCRIPT ORIGINS and AUTHORIZED REDIRECT URIS fields, enter <XF board URL>/register/google. For example, https://xenforo.com/community/register/google. The beginning of this URL must match your Board URL setting in XenForo exactly. If you are not using Friendly URLs, the URL would be, for example, https://xenforo.com/community/index.php?register/google. Note that if users access your site both with and without the "www" (http://www.xenforo.com and http://xenforo.com), you should enter both URLs. Similarly, if users can access your site both with and without HTTPS, you should enter a value with http and https. Each URL should be placed on its own line. Ensure all variations of the URL used to access your site are entered.
    2. Double check all of the URLs are correct and then click the Create Client ID button. The Create Client ID overlay will be displayed so just click the Cancel button.
  5. On the Credentials page, make a note of the CLIENT ID and CLIENT SECRET.

To change the values displayed when a user attempts to register via Google, you can customize this in your Google project via APIs & auth > Consent screen.

Configuring Google integration

To finalize the Google 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. Go to Options > Google Integration.
  3. Enter the Google Client ID and Google Client Secret obtained earlier into the respective fields and save.
  4. Test the integrated account

Twitter

Creating the Twitter application

  1. Browse to https://developer.twitter.com/ and log in with your Twitter account.
  2. After logging in, hover over your username in the top right corner and from the menu select Apps.
  3. Click Create an app.
  4. Fill out the form as necessary:
    1. The name and description will be displayed to users when they attempt to register via Twitter.
    2. The website URL should be set to the Board URL value set in XenForo. It's very important that the correct domain is entered here. Registration will only work if the request comes from the domain entered here.
    3. Click Enable Sign in with Twitter
    4. The callback URL should be set to <XF board URL>/register/twitter. For example, https://xenforo.com/community/register/twitter. The beginning of this URL must match your Board URL setting in XenForo exactly. If you are not using Friendly URLs, the URL would be, for example, https://xenforo.com/community/index.php?register/twitter.
    5. You need to explain how the app will be used. Words to the effect of "This app will be used to provide log in/sign up with Twitter functionality so that users can log in and register to the forum with their Twitter accounts."
  5. After creating the application, you will be redirected to a page displaying information about the application. Click the Keys and tokens tab.
  6. On the same page, make a note of your API key and API secret key below the Consumer API keys heading.

Configuring Twitter integration

To finalize the Twitter integrated , 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. Go to Options > Twitter Integration.
  3. Enter the Twitter Application Consumer Key and Twitter Application Consumer Secret obtained earlier into the respective fields and save.
  4. Test the integrated account

Testing integrated accounts

To confirm everything is configured and working correctly, you can run the test tool.

  1. Select the Tools Menu.
  2. Click on one of the social media networks in the Diagnostics menu.
  3. Click on the Run Test button.

If the test is successful, the resulting screen will show the name, email address and profile picture (where applicable) of the account which is associated with the account provider.

If the test is unsuccessful, confirm that your Board URL is correct and that the correct details have been entered for the key and secret.

After a successful test, visitors will be able to log in and register using their respective accounts. The first time they attempt to do so, they will be required to allow the application access to their account.

When a user shares a page to various other sites, they 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 an Open Graph Logo in style properties.

To set this, in the control panel, go to Appearance > Style properties > Header and Navigation and change the Open Graph Logo to point to a logo you've uploaded. This should generally be a square image and as large as possible.

Note

Due to caching, it can take several weeks for the image to update on the service provider's servers.