Facebook Connector
The Pathfix Facebook Connector plugin enables integration from your Bubble app to your user's Facebook account. The plugin will render the Connect button (UI) and calls the relevant Facebook API automatically. No code configurations required to get the plugin working.
This documentation will show setup guide and a few example use cases.
- Log into Pathfix and add an application (or select an existing application)
- Select Facebook from the list of providers
- Add your Facebook ClientID and ClientSecret and hit Save
- Navigate to the Keys section
- Copy your Pathfix Public Key and x-private key for use in your Bubble plugin
The plugin is available in the Bubble Plugin store.
IMPORTANT: You need to install the Pathfix OAuth Connector plugin first before installing this plugin
- After you have installed the Pathfix OAuth Connector plugin, Install Facebook Plugin from the Bubble plugin page
- You can also search for Facebook and pick the Facebook Connector plugin by Pathfix Inc. and install it
- Under x-partner-key (shared headers), add your Pathfix x-partner-key from the Keys section of your Pathfix account
- Navigate to the Design section and select the Pathfix Connector element and select "All Providers configured in my Pathfix Account"
Your plugin is activated and ready for use.
If you are looking to post to Facebook pages, Facebooks needs you to call an additional API - ‘Get page access token’ API
The Facebook Connector plugin calls this API as well and allows you to set the state. Here are the steps to calling the API and acquiring the Page Access Token.
- On your Bubble Design page, select the Pathfix Custom element and add it to the page
- This element does not have a preview or display properties, it only checks for users connected status
Assuming you want to pull all the pages owned by the user and show it in a dropdown option to select the page they want to post to:
- Add a dropdown element to the page
- Select Dynamic choices
- Setup the Type of choices, Choices source and Option caption as follows
- Add a button on the page for when the user clicks to submit the post
- Head over to the Workflows to setup the dropdown workflow and submission workflow
- We will setup a workflow to set the page_id and page_access states for 'When Dropdown's value is changed'
- Element - Set State and set the following state
- Set page_access:
- Element - Set State and set the following state
- Now that the states for page_id and page_access has been set, we need to setup the Post button for when the button is clicked, we want to Post to FB page
- Here is the workflow setup for that
This will post the message to the user's selected page.
Since the page_id and page_access_token have been set, you can choose to save it to your Bubble database against the user.
You can setup the ability to show comments for a particular post within the selected page. You can choose to configure the comments showing however you like, the following instructions show how you can show comments once the user has selected the posts they wish to see the comments for.
Important: In order to make pull comments from a page post, you will need to request the scope pages_read_user_content
If you do not have the scope added to your Pathfix configuration, Edit your configuration, add the scope and re-authenticate/reconnect your Facebook account before proceeding.
- Add a Dropdown element for the user to select the page they wish to access the Posts for
- Configure the properties as shown below on the dropdown
- Add a Repeating Group on the page to show all posts on the page
- Add a Text element in the repeating group
- Select the Repeating group element and configure it as shown below
- Select the Text element within the repeating group and configure the properties like so:
- Click on Edit workflow to set a state that will allow you to save the post ID
- Once the Workflow tab is open, configure the workflow like so:
- Add another Repeating group and a Text element within the group to show the comments
- At the Repeating group level, choose the API to Get Comments on a Page Post and configure it as shown below
- Note: You can choose to keep the element hidden and add a condition to show only when a post has been selected
- Select the Text element and configure the properties as shown:
The following APIs are called in the Facebook Connector plugin.
Note: If you are looking for any additional APIs, send us an email to [email protected] and we will add the API to the plugin
