Twitter

Let users login with their Twitter accounts and fetch their latest tweets.

Signup/login with a social network

This workflow step allows you to integrate a Twitter authentication event when registering a new user or logging in an existing user.

OAuth provider - Twitter

Allows the Bubble editor to verify the correct social platform to login/signup the user.

Current user’s Twitter

When adding dynamic data, this operator allows you to fetch and display content from a user’s connected Twitter account.

User’s ID

The unique ID of a user’s Twitter profile

User’s name

The full name listed on a user’s Twitter profile

User’s handler

The user’s Twitter handle

User’s location

The location listed on a user’s Twitter profile

User’s description

The user’s Twitter bio

User’s followers count

The total count of followers on a user’s profiles

User’s picture

A user’s Twitter profile picture

User’s banner

The banner image from a user’s Twitter profile

Setup

Configuring your API

Once you’ve installed the Twitter plugin, you’ll need to configure your API keys through the Twitter developer portal here. Add your API key into the ‘consumer key’ field, and the secret key into the ‘consumer secret’ field.

After connecting your plugin, you’ll now need to enable the Twitter OAuth settings within your developer portal. To find this, head to the settings page of your application, then select to edit the authentication settings.

When enabling this service, you’ll also need to provide a URL to a terms and policies page within your application.

Finally, you’ll then need to provide a callback URL. This is the page in your application that Twitter will redirect user’s to once their account has been verified.

Registering a user with Twitter OAuth

After configuring your API and app settings, you can now use the ‘signup/login with social network’ step within a workflow. From the event dropdown menu, you’ll see an option to select the Twitter OAuth provider. This event can be added to an element like a login button.

After a user clicks this button, they’ll be redirected to a Twitter portal where they can verify their account, then be redirected back to the destination URL of your application.

Now, you can choose to display data from a user’s Twitter profile by selecting the ‘current user’s Twitter’ operator.

Fetching a user’s Twitter timeline

After verifying a user’s Twitter account, it’s also possible to fetch a list of their previous tweets from their timeline.

When adding a repeating group, select the type of content to be a Tweet.

From here, select the data source to be the ‘current user’s Twitter timeline’ option.

Now, when adding a dynamic element within your repeating, select from the ‘current cell’s Tweet’ option.

FAQ

How do you store a user’s Twitter profile information within your own database?

When signing a user up through Twitter OAuth, it’s possible to add an additional step to your workflow that makes changes to the current user’s account.

Within this workflow step, connect your user data fields with the ‘current user’s Twitter’ operator.