Add 'Website' platform to facebook app

Learn add 'website' platform to facebook app with practical examples, diagrams, and best practices. Covers facebook, web-applications, facebook-opengraph development techniques with visual explanat...
Tags:
Categories:

Adding a 'Website' Platform to Your Facebook App

Facebook App settings interface with a website icon

Learn how to configure your Facebook App to support a website platform, enabling features like Facebook Login and Open Graph integration for web applications.

Integrating Facebook features into your web application, such as Facebook Login or Open Graph sharing, requires your Facebook App to be correctly configured with a 'Website' platform. This guide will walk you through the process of adding and configuring this platform within your Facebook Developer account, ensuring your web app can seamlessly interact with Facebook's APIs.

Understanding Facebook App Platforms

Facebook Apps are versatile and can be configured to support various platforms, including iOS, Android, Canvas, and Website. Each platform has specific settings and requirements to ensure proper integration and functionality. For web applications, the 'Website' platform is essential as it defines the URLs and domains that your app will operate on, which is crucial for security and functionality like OAuth redirects and Open Graph actions.

flowchart TD
    A[Start: Facebook Developer Account] --> B{Select Your App}
    B --> C[Go to 'Settings' > 'Basic']
    C --> D{Scroll to 'Add Platform'}
    D --> E[Choose 'Website']
    E --> F[Enter Site URL]
    F --> G[Save Changes]
    G --> H[End: Website Platform Added]

Flowchart for adding a Website platform to a Facebook App

Why the 'Website' Platform is Crucial

The 'Website' platform serves several critical functions for web-based Facebook integrations:

  • OAuth Redirect URIs: When users log in via Facebook Login, they are redirected back to your specified URL. The 'Website' platform's 'Site URL' and 'Valid OAuth Redirect URIs' ensure these redirects are secure and only go to trusted domains.
  • Open Graph: For your website to publish Open Graph stories or use Open Graph tags, Facebook needs to recognize your domain as associated with your app.
  • Domain Verification: It helps Facebook verify ownership of the domain associated with your app, which is important for certain features and for maintaining trust.

Without a properly configured 'Website' platform, your web application will likely encounter errors when attempting to use Facebook's APIs, such as 'URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app's Client OAuth Settings'.

1. Access Your Facebook Developer Account

Navigate to the Facebook for Developers website and log in with your Facebook account. From the dashboard, select the app you wish to configure. If you don't have an app yet, you'll need to create one first.

2. Go to Basic Settings

In the left-hand navigation menu, click on 'Settings', then select 'Basic'. This section contains the fundamental configurations for your app.

3. Add the 'Website' Platform

Scroll down to the bottom of the 'Basic Settings' page. You will see a button labeled 'Add Platform'. Click this button, and a modal window will appear. From the list of available platforms, choose 'Website'.

4. Configure Website Platform Details

After selecting 'Website', a new section will appear on the 'Basic Settings' page specifically for the Website platform. Here, you will need to enter your 'Site URL'. This is the base URL of your web application (e.g., https://www.example.com). For development, you might use http://localhost:3000.

5. Save Your Changes

Once you've entered the 'Site URL', make sure to click the 'Save Changes' button at the bottom right of the page to apply your configurations. Your Facebook App is now configured to support a website platform.

For Facebook Login, it's best practice to explicitly list your valid OAuth redirect URIs. Go to 'Facebook Login' > 'Settings' in the left navigation. Under 'Client OAuth Settings', add all the exact redirect URIs your application will use (e.g., https://www.example.com/auth/facebook/callback).