In this blog, I’ll show you how to simply use the Facebook JS SDK on React or Next JS.
This blog assumes;
- You have already created an app on the Meta Developer Platform
- You have configured your app’s Facebook login settings to allow Web client authentication and use the FB SDK.
- Furthermore, you have added secure valid OAuth Redirect URI and domains for the JavaScript SDK
1. The first step is to add the SDK script to your project’s public files. Inside your public > index.html add the following script in the head of your html.
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>2. The second step is to create a Facebook SDK file that will initialize our application and contain all our Facebook functions. You can add this to your utils directory, like src > utils > FacebookSDK.js
In the FacebookSDK.js file, let’s export a function to initialize our application.
export const initFacebookSdk = () => {
return new Promise((resolve, reject) => {
// Load the Facebook SDK asynchronously
window.fbAsyncInit = () => {
window.FB.init({
appId: '1268250524120464',
cookie: true,
xfbml: true,
version: 'v16.0'
});
// Resolve the promise when the SDK is loaded
resolve();
};Let’s also export a function in the same file to get the Facebook login status of our clients.
export const getFacebookLoginStatus = () => {
return new Promise((resolve, reject) => {
window.FB.getLoginStatus((response) => {
resolve(response);
});
});
};Finally, let’s export a function to log in with Facebook.
export const fbLogin = () => {
return new Promise((resolve, reject) => {
window.FB.login((response) => {
resolve(response)
})
})
}3. We can finally use these functions in our components. Create a new component in your directory.
Let’s add a use effect to get and console log the login status of our users.
import { useEffect } from "react";
import {
getFacebookLoginStatus,
initFacebookSdk,
fbLogin,
} from "../../utils/FacebookSDK";
export default function FBInit() {
useEffect(() => {
console.log("Started use effect");
initFacebookSdk().then(() => {
getFacebookLoginStatus().then((response) => {
if (response == null) {
console.log("No login status for the person");
} else {
console.log(response);
}
});
});
}, []);Let’s add a login button for our users to click and be directed to Facebook’s log in page.
function login() {
console.log("reached log in button");
fbLogin().then((response) => {
console.log(response);
if (response.status === "connected") {
console.log("Person is connected");
} else {
// something
}
});
}
return (
<div>
<button onClick={login}>Login</button>
</div>
);
}The Javascript SDK should be working now!!
