.svg)
In this tutorial I show how you access the Twitter API from your Bubble app using Pathfix. I demonstrate how to:
(Lightly edited for clarity)
Today we're going to show you how you can use the Twitter API in your Bubble app. There's a lot of different things we can do with the Twitter API, but a really simple use case is just posting tweets either from your account or from one of your user's accounts to Twitter. So a couple of workflows going on which we'll go through in a bit, but you can see that I've just typed it begins into the input box and we should see this come true on my Twitter account directly from Bubble. So let's go through what we need to set up to get this up and running.
Now you could use the API connector to work with the Twitter API. I did try that, I found it quite difficult to be honest. What I think is an easier solution is to use Pathfix. They're a really cool SaaS company that really make it easy to integrate for Bubble builders with various APIs. You can see here that they have a bunch of different integrations. We're going to be looking at the Twitter one. This is not a sponsored video, I just found them useful. They're really helpful in support and they have a really generous free plan, so I would recommend them. And the first thing we need to do if we want to integrate with Twitter using Pathfix is we need to sign up for an account. So let's do that now. Okay, so once you've answered some basic questions, you're going to be brought to this dashboard area and you're going to click on add application. We're then going to choose Twitter from a group of applications. Before we do that, we're going to put in some basic details. I'm just going to call this demo video and we don't need to answer the event call back URL at the moment. Click save. And now that is set up. We can choose which integration specifically we want to look at. So we're going to click on demo video and we're brought into this area here. And what's really important here is first of all that we pick Twitter. So let's go down to that now. You can see there's quite a few integrations going on. Let's choose the Twitter one.
We're going to be asked for two keys. We're going to be asked for the client ID and the client secret. You need to get these from the Twitter developer portal. So I've already set up a Twitter developer account. I'm just going to give a brief overview of what you need to look out for once you do have that set up. The first thing is that the default access level you get from the Twitter developer platform is called essential. Now to make full use of the Pathfix integration, you're going to need to apply for elevated access. There's tutorials elsewhere on how to do that, so I'm not going to go into too much detail, but it's quite straightforward. It can take up to 48 hours, although it's a lot quicker for me. You still might be able to get certain things to work even without that, but I do recommend doing it. Once you have this set up, you can start setting up projects and apps. There's a bit of a hierarchy here and a couple of things you really need to look out for. First of all is this user authentication setting section at the bottom of each app's kind of portal. Click on edit there. You need to have OAuth 1.0 ticked. You do not need 2.0 ticked. You need 1.0 ticked. You also need to have request email from users optional. That needs to be ticked. In terms of permissions, read and write and direct message all checked as well, or at least this one here, I should say. Finally, a couple of general authentication settings here we need to put in. For callback URL or redirect URL, you need to copy this URL here and slot that into this section. Website URL, just put in your own app's website and similar for terms of service and for privacy policy. That's what you need to fill out on the actual app screen itself and in terms of getting the keys, which you'll need to do in order to put in here and continue on with the Pathfix setup, you get that from here. I'm not going to show these now for obvious security reasons, but click on that, get your keys and paste them into Pathfix right here. Once you've done that, you can click down save, assuming you have your keys in, and then it's time to go back to our Bubble Editor.
We're going to install two plugins. We're going to install the Pathfix OAuth connector and we're going to install the Twitter OAuth plugin. Both from Pathfix and both free. Once you have these installed, what you're going to want to do is input some more keys. You can see here there's a section for public, ex-partner key, public key dev, and ex-partner key dev. We get these from the Pathfix dashboard. Again, if we go back into Pathfix and we go down to keys, you're going to have your own custom keys here. Get those, paste them into the relevant section here. It's a similar enough story for the Twitter OAuth plugin. Then we're nearly there in terms of configuring Pathfix and accessing the Twitter API. With that, we can go back into our Bubble Editor on the design tab. What you will see is there's two new visual elements available to you. There's a Pathfix connector and also the Pathfix custom visual element. We're going to use the Pathfix connector element. I've dragged it onto the screen here. If you click on it, what you'll see is there's a number of different integrations you can choose from. The easiest thing to do is simply take all providers configured in my Pathfix account. This essentially means that they're going to take everything you configured in Pathfix and just make that available. Once you leave that there, it's going to pop up on your screen. If we go to preview, we're going to see what this likes, this looks like. What you can do is it'll take a second to appear, but you can connect your Twitter account. Let's just do that now. I click on connect here. I'm going to be presented with this pop-up. This is essentially Pathfix asking for permission to connect me to my Twitter account. You can see your authorized tweet file, which again is the name of the app I created in the Twitter developer portal to access your account. It has quite a range of permissions. It's obviously a bit of a security angle to watch for here, but obviously if you're going to make the app, that's up to you. Click on authorize app, and then you will see that your account is now connected to Twitter.
A while back I posted a tweet, and that again is connected to my Twitter account. Let's just do that again. Click tweet. Now that it's connected to my Twitter account, we should see this pop-up here, and sure enough, Hello World appearing. That's one of the things we can do with the Twitter API. Let's look at a couple of other things that are possible using Pathfix onto the Twitter API. A good place to start is back in the workflow section. I have a really simple workflow set up here where when button tweet is clicked, I'm using this Twitter post-tweet action that's now available thanks to Pathfix. Again, going into plugins, we have all these things here. We have add member to list, like post-tweet, and various things that involve attaching media, reply to tweet, retweet, unlike, et cetera. It's really basic. You're at post-tweet one. You put in the current user's unique ID as this parameter here, and then I have an input section, and I'm just taking the value from that and posting it as a tweet. That's probably the most simple thing you can do with the Twitter API and Pathfix, but it's not the only thing we can do.
If we go back into our design tab, we add another group here. We can start pulling in some data from our own Twitter account. Let's do that now. Let's just give this a bit of a background so it's a bit more obvious what we're doing. We'll make it a row, and we'll make it non-fixed width. If we put in a piece of text here, we can dynamically pull data from the Twitter API. We're going to go to insert, we're going to go get data from an external API, and we're going to choose the Twitter get profile. We're going to put in current user's unique ID here, which is important. It will not work without this. Let's just do that now. Then we can choose from a range of options here. We can get ID, name, screen name. I'm going to go with screen name, which is essentially my Twitter handle. This could be useful for profile pages or something like that, maybe. Hopefully, when we refresh this page now, we should see that group with my Twitter handle inside of it. Sure enough, you can see your AC no code, which is my Twitter handle appearing in the group there. That's one way you can use the Twitter API to pull some data. There are plenty more. You can see here again, if we just copy and paste this, there's a range of different things we can pull in here just from this get profile alone between follower count, friend count, all that kind of stuff. I would encourage you to play around with that and pull in whatever you're interested in. That's it from this tutorial. Hope this has been useful and you do explore the Twitter API yourself. Like I said, I think it's a great way to add another tool to your bubble app.