NO CODE PLUGINS

Twitter Integration

17min

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
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
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:



Document image


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
Document image




Step 2:

  • Select the media ID String and Base 64 encoding



Document image




Step 3:

  • Finalize the media and select the Media ID String



Document image




Step 4:

  • Post the Tweet with media and Message



Document image




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

Document image




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




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



Document image




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



Document image




  • 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)



Document image




  • 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



Document image




  • 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



Document image




  • 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 [email protected]