Guides
Start typing to search…

Integrating Facebook Login

Allow users to login to Facebook and select their own ad accounts.

📘

NOTE: You'll need to make sure you have your API key before this.

This flow breaks down how to integrate the ability to allow your users to login to Facebook, and connect their own ad accounts and pages to run ads.

In this scenario - all ads would be run through the user's own ad account and user's own FB page.


1. Whitelist your App Domains

To enable your domains, we will need to add them to our domain whitelist. Please share domain(s) with your Symphony representative to ensure that your domains are added.

This flow will not work without whitelisting your domain.


2. Add Symphony's FB Script

Import the following script into your site's <head/> tag:


<script src="https://docs.partner.symphonyos.co/symphony-connect.min.js" async></script>

This will automatically bring in all of the relevant scripts to support Facebook integration.

📘

If your user has an ad blocker on, they may need to turn it off. Facebook's Login scripts sometimes get blocked by ad blockers.


3. Add a "Login with Facebook" Button

On the page where you want your users to login, create a clickable element (e.g., a button) with the following attributes:

  • id set to sym-facebook-button
  • data-api-key set to your API Key
  • data-environment set to your URL, such as sandbox or production
    • Note: As the options indicate, using one will route the requests to the respective environment.
  • data-user-id is set to an ID, commonly your user's own ID, to represent the user attempting to connect.
    • Note: The data-user-id field is important to ensure that a user's Facebook Pages and Ad Accounts are linked appropriately to the same brand
      📘

      Take in mind that if you pass a value for data-user-id that you haven't passed before, symphony will create a new brand, meaning that any other request you make for this user will need you to use the same value in the x-brand-id header


<button
  class="login-btn"
  id="sym-facebook-button"
  data-api-key="YOUR_API_KEY"
  data-user-id="YOUR_LOCAL_BRAND_ID"
  data-environment="sandbox"
>
  Log in with Facebook
</button>

When the button is clicked, a Facebook connection modal will appear. This will allow a user to authenticate with SymphonyOS' Facebook App, which is configured to request the appropriate permissions from your user's Facebook login.


4. Listening for Login Success

Upon completing the login process on Facebook, the Facebook modal will automatically close. To track this event occurrence, add an event listener for the event login-success to your button with ID sym-facebook-button .

This will provide connection details on the user, including their Facebook profile name, picture URL, and more.

const facebookConnect = document.getElementById("sym-facebook-button");
const userCard = document.getElementById("userCard");

// Listen for the 'login-success' event
facebookConnect.addEventListener("login-success", (event) => {
  console.log("User logged in:", event.detail.user);

  // Display user information
  userCard.style.display = 'block';
  userCard.querySelector("img").src = event.detail.user.picture.data.url;
  userCard.querySelector("h3").textContent = event.detail.user.name;
});

Integration Example

You can find a complete example here:

https://docs.partner.symphonyos.co/test_connection.html

Or see the full HTML file example here:

<html lang="en">
  <head>
      <script src="https://docs.partner.symphonyos.co/symphony-connect.min.js" async=""></script>
  </head>

  <body>
    <p>Login with Facebook</p>
    <button class="login-btn" id="sym-facebook-button" data-api-key="11111111-1111-1111-a883-cb27d7fa9d91" data-user-id="1596" data-environment="localhost">Log in</button>
 
    <script>
      const facebookConnect = document.getElementById("sym-facebook-button");
      const card = document.getElementById("userCard");
      facebookConnect.addEventListener("login-success", (event) => {
        console.log("User logged in:", event.detail.user);
        card.style.display = 'block';
        card.querySelector("img").src = event.detail.user.picture.data.url;
        card.querySelector("h3").textContent = event.detail.user.name;
      });
    </script>
	</body>
</html>

Response Example

Below is an example of the data structure you will find in the event.detail.user object. This object contains information about the user who completed the login process, and can be used to access their basic profile details and Facebook asset permissions.

interface FacebookUserResponse {
  name: string;
  email: string;
  picture: {
      data: {
          url: string;
      }
  };
  id: string;
}

Updated 8 months ago