Twitter Integration

The Pathfix Twitter Connector plugin enables integration from your Bubble app to your user's Twitter. The plugin will render the Connect button (UI) and calls the relevant Twitter API automatically. No configurations required to get the plugin working

This documentation will show setup guide and a few example use cases.



Setup

The plugin is available in the Bubble Plugin store. Before proceeding, make sure you have added the Twitter integration in your Pathfix account and your Twitter Developer app has Elevated access



Setup in Pathfix

• Log into Pathfix and add an application (or select an existing application)
• Select Twitter from the list of providers (the plugin will work with Twitter only, do not configure Twitter V2 as this is the newer APIs with limited functionality)
• Add your Twitter 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



Setup in Bubble

Important: You need to install the Pathfix OAuth Connector first before installing this plugin

• Log into your Bubble app and click on Add Plugin
• Pick the Twitter (OAuth) plugin by Pathfix Inc. and install it (click here to access the plugin)
• Under x-partner-key (shared headers), add your Pathfix x-partner-key from the Keys section of your Pathfix account





Image: plugin page





• Navigate to the Design section and select the Pathfix Connector element and enable Twitter from the list of providers. Or, select All Providers in my Pathfix Account, this will show all the integrations you have configured.



Image: enable provider





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 Twitter data for your users using the plugin and setup Workflows to Twitter actions.



Actions and Data Calls

The plugin calls a few APIs and offers them as Actions and Data Calls in your Bubble Workflow once installed. These are:





Note: Each consumed action is counted as 1 API call in Pathfix



Tweet With Media Setup

All of the actions and data calls are easy to use and is a one-step process, however, the process to Post Tweet with Media is a 4 step process (as required by Twitter). The plugin has been updated to offer this API connectivity, the following section shows the setup:

This is a 4 step process as Twitter needs certain info and file format, here is the sample setup.

Please note, you will need to select the user_Id as Current User's Unique Id everywhere.

Step 1:

• Select to include the file size and file type with the call





Step 2:

• Select the media ID String and Base 64 encoding







Step 3:

• Finalize the media and select the Media ID String







Step 4:

• Post the Tweet with media and Message







Tweet with Hashtag

You can also setup a Tweet with a hashtag.

However, instead of directly pushing the Tweet with a hashtag(#) you would need to replace the hastag with %23

This will post the tweet with the Hashtag symbol.

Setup Timeline Endpoint

Version 2.5.0

The plugin calls the Timeline endpoint, allowing you to fetch the mentioned Users timeline. Reference documenation

Here is how you can set this up:

• Add a Repeating Group on your Design page
• Select the repeating group and add the Data source as Twitter - User Mention's Data





• Get the Twitter id_str by calling the external API for Twitter Profile





• In the Repeating group, add a Text element and choose the dynamic value as below







Tweet Thread

Through the plugin, using the Twitter V1 API, you can build out threaded Tweets (multi-Tweets). Threaded conversations are for Tweets that are over the Twitter 280 tweet limit.

Here is how you can setup Twitter thread:

Note: This is a sample setup, you can change this to fit your UI/UX

• Add an Input text element on your Design page and add a character limit of 280 to the element
• Add additional Input text elements to the page depending on how many threading options you want to permit
• Add a Button to Post/Upload tweet







• Add a Condition or add a Workflow step to show these additional input elements only when the 280 character limit is met (or show them if the initial Input element has a value)







• Add Workflow to trigger when the button has been clicked
• Add Step 1 of Post Tweet and select the Tweet from the first input value







• Add Step 2 and search for the plugin action of Reply to Tweet
• Fill in the required inputs as shown in image below
• For the 'handle', make sure you add the @ sign before adding the dynamic input







• You can add additional steps for any additional Input elements (depending on how many threading options you want to offer your users)



Your workflow is ready. When you click on the button to upload, the Tweet and its threads will get posted as a threaded conversation.





Need help? Reach out to us at support@pathfix.com