Instagram Integration
The Pathfix Instagram plugin enables integration from your Bubble app to your user's Instagram account. The plugin will render the Connect button (UI) and calls the relevant APIs without you spending time on the API setup. No configurations required to get the plugin working
This documentation will show setup guide and a few example use cases.
Instagram Graph API Usage
The Instagram Graph API is for users that want to access Instagram Professional accounts. This plugin, and any of Instagram Graph APIs are not meant for Instagram personal accounts. Refer to the following Facebook link for more information on usage: https://developers.facebook.com/docs/instagram-api/overview/
Complete your Instagram app setup to get your App ID and App Secret. Follow this documentation for the Instagram/Facebook Developer setup instructions.
You will need a Pathfix account to be able to use this plugin. Pathfix will manage the entire OAuth process and the plugin offers the relevant APIs for you to access.
- Login to your Pathfix account and select your application (or create a new application)
- Select Instagram Graph API 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 Instagram/Facebook Dev account and hit Save
- Click on Keys from the left nav bar and copy your Pathfix Public Key and x-partner-key for use in the plugin
The plugin is available in the Bubble Plugin store.
(Important Note: You need to install the Pathfix OAuth Connector first before installing this plugin)
- Select the Instagram Graph API (OAuth) plugin by Pathfix Inc. and install it (click here to access the plugin)
- Add your Pathfix x-partner-key from the Keys section of your Pathfix account
- On your Design page, select the Pathfix Connector element and select All Providers configured in my Pathfix Account
- Go to Preview to check the Connect UI Button for the Instagram integration
Once installed, there are no additional configurations required to get the Plugin to work. You can setup your workflow in Bubble and start using the actions.
The Connect button will automatically be added to your page that contains the Pathfix Connector Design Element. No additional settings are required
You can add Dropdown, text etc elements to pull in Instagram data for your users using the plugin and setup Workflows to Instagram actions.
The Connector plugin calls a few APIs and offers them as Actions in your Bubble Workflow once installed. These are:
Note: Each consumed action is counted as 1 API call in Pathfix
Get Media List
Below is a sample setup using the Instagram Graph API plugin to get the connected users media list:
- Add a Repeating group on your Bubble Design page
- Add an Image element to the first line of the Repeating group
- At the Repeating group level, add the following Dynamic input:
- To get the Instagram Business Account ID, you will need to make the call for it (included in the plugin), like so:
- Once done, click on the first image within the Repeating group and add the following Dynamic input:
This will pull up all recent media url for the connected user.
Get Media Comments
To pull the comments for a Media, here's the setup:
- Adding a Recurring group within the Repeating group of the Media List (above)
- Add Text element to the new Repeating group
- Select the Repeating group and add the following Dynamic input
- Once done, click on the first Text within the Repeating group and add the following Dynamic input:
This will pull up all recent media comments for the connected user.
In the same way, you can setup the rest of the Data calls and pull up data for the connected user depending on what you are looking to achieve.
Data calls allow you to pull List items into your app, Action calls allow you to take actions using the Bubble Workflow module. The below sample show how you can
Post a Media (image)
- Add a Picture Uploader, Input Text element and Button to Post in your Bubble Design page. We will use this as dynamic fields, as will be the case, to post on the connected users account
- Add a Dropdown for the user to select the page they would like to post to:
- Go to the Workflow tab in Bubble
- Add the first event to When the Button is clicked
- Setup the first step like so:
- Add Step 2 to Publish Media
The workflow will trigger when the user clicks on the button to post. On triggering, the image along with the text will get posted to the connected users account.
Need help? Reach out to us at [email protected]
