---
title: Integrating with Facebook
slug: facebook-oauth
docTags: 
createdAt: 2020-04-16T06:07:28.000Z
---

Pathfix allows you to easily add end-user OAuth based integration, handling authorization and enable communication between your app and Facebook in just a few minutes.

Before proceeding, you will first need to register your application with Facebook here: [https://developers.facebook.com/](https://developers.facebook.com/)

Please note: You will need to create a developer account with Facebook and add an App for Facebook auth to proceed

:::hint{type="info"}
## Important

If you are working with Facebook and Instagram Graph API, make sure you create a new app for each in Facebook developer portal
:::



## Add your App in Facebook

Note: Facebook developer UI has gone through some changes, you may see new options for setup if you are creating a new developer app called Usecases.

We suggest you create your app as Other and proceed accordingly. 

::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/8fUEXkaz-jflI6musrBRJ_image.png" size="82" width="1673" height="961" position="center" showCaption="false"}



- Click on `My Apps` and click on Create App 



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/wwdpqtGG8fanWXkeh8S9l_image.png" size="80" width="1778" height="366" position="center" showCaption="false"}



- In the app use cases, select **Others **



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/wxJRsuZtaky-o-IBFbgEI_image.png" size="80" width="1314" height="905" position="center" showCaption="false"}



- For the App Type, select **None **(If you do not see the None option, please select Business as the app type)



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/I4e_W9YpbnUop7mxuTwMy_image.png" size="80" width="1585" height="1257" position="center" showCaption="false"}



- Complete the Details with your app name, contact email and select a verified Business account



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/CEK9AkwxZlor739WUwWvK_image.png" size="80" width="1626" height="744" position="center" showCaption="false"}



- Add the following **2 products**:
  - Facebook Login
  - Marketing API



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/fwpJphzer2QP2YO3nPDjb_image.png" size="80" width="2211" height="997" position="center" showCaption="false"}



- Select the product **Facebook Login**, complete the setup process
- Add the following Pathfix URI under the **Valid OAuth Redirect URIs**: `https://labs.pathfix.com/integrate/command`



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/ierwifLsrpGDfIc7Pv7Dg_image.png" size="80" width="2152" height="1109" position="center" showCaption="false"}



- From the App Dashboard, click on `Settings` in the left navigation
- Select `Basic`



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/-_--Qae_T4wJ9BBwPUMvL_image.png" size="46" width="710" height="640" position="center" showCaption="false"}





- Complete all the required fields including the terms, privacy and App Icon. Save the settings
- Copy the `App ID` and `App Secret` for use in Pathfix 
- This is your `Client ID` and `Client Secret` that will be used in Facebook configuration in Pathfix



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/Pj8dKj_jnZXIGUthc6CXm_image.png" size="94" width="1481" height="841" position="center" showCaption="false"}





## Setup in Pathfix



- Login to your Pathfix account and select the application (or create a new application)
- Select **Facebook** from the list of providers to integrate with. You can change the Display **Name** and **Description**. 
- Enter the **App ID** and **App Secret** received from Facebook Dev account and hit **Save **
- You can add additional scopes you would like to access by entering them in the **Scope **section (the scopes used in the below setup are: email,pages\_show\_list,pages\_manage\_posts,catalog\_management,pages\_read\_engagement,pages\_read\_user\_content)



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/Gd80-OfaGOXDnVoJZch1l_image.png" size="84" width="1231" height="991" position="center" showCaption="false"}



- Click on **Test Connection** and Connect an account to test the setup
- Once connected successfully, you will be able to choose a sample API from the dropdown to run test API calls
- Select a sample API from the dropdown and click on Send to test API connectivity 



::Image[]{src="https://api.archbee.com/api/optimize/E6H_--BmYJWG_yGaOUOxt/JKE9__rX7LsINB5JnkVkS_image.png" size="90" width="2076" height="1243" position="center" showCaption="false"}





## Adding Integration To Your SaaS

There are 2 steps to adding the integration to your SaaS:

1. Add the Connect button for [End-user authorization](docId\:MsCMNgUGRsGrzSCMLCiXf)
2. Making the API call [Enable pass-through API](docId\:JiDAxEPNR2Owz8w4_JpBK)



To add the integration to your Bubble/No code app, please follow this documentation [Bubble.io Setup](https://docs.pathfix.com/bubble)







Need help? Reach out to us at support\@pathfix.com and we would be happy to assist!