In this video I'm explaining how I'm connecting the Facebook Pages in my Social Scheduler app using the official API.
Category
🦄
CreativityTranscript
00:00In this video, I'll explain how I'm connecting Facebook pages in my social scheduler app.
00:11And, to connect the Facebook pages, I need to click on this button.
00:20And, it will connect the Facebook pages in my application.
00:34Now, let's take a look at the code.
00:39I have an event handler for clicks on the Connect button.
00:51When I click on this button, it triggers this function.
01:03And, this function opens a pop-up with this view file.
01:19And, I'm using an unmounted hook here to execute an HTTP request after the component has been rendered.
01:36The scope of this request is to request a URL redirection for Facebook to request an authorization code with permissions to grant.
02:01Sure, I could generate this URL directly here.
02:09But, I don't want to use the Facebook application ID and secret in multiple places like frontend and backend.
02:26For this reason, I'm using the Facebook credentials only in the backend.
02:38When this request returns the redirect URL, I'm using it to redirect the user to the Facebook login page
02:52where the user should grant the permissions.
02:59Then, the user will be redirected to this URL which will call this view.
03:29In this view, I'm using the unmounted hook with HTTP request
03:39where I will use the authorization code to exchange for an access token in the backend.
04:09If the access token was obtained successfully, I will request the Facebook pages and I will save them in the database.
04:39And, finally, I will close the model or pop-up and will reload the social accounts.