How to Implement Facebook Javascript SDK For SignIn and SignOut With PHP

0
Shares
How to Implement Facebook Javascript SDK For SignIn and SignOut With PHP
4 (80%) 4 votes

Now a days, it’s important to posses javascript knowledge for all web app developers, no matter whether they’re specialized for ASP.Net, PHP, front end, or backend.

Javascript implementation is very common in most third-party APIs, and Facebook API is no different. It follows the same robust implementation process of Facebook Javascript SDK to access data.

However, Javascript is easy to integrate and use among all available platforms, and it can be asynchronously on external web app development with minimum speed performances effect. And, in this PHP tutorial, we’ll go through the implementation process of Facebook Javascript SDK with example.

Let’s Get Started

The implemenation process for Facebook Javascript SDK divide into main two parts.

  1. HTML
  2. Javascript

First go to https://developers.facebook.com/ and enter login details to go to developer dashboard. If you don’t have account, create by clicking on Sign up button.

Now, click on My Apps Menu > Add New App.

Go through all process of inserting required data and collect App ID.

Now comes the coding part.

First, create a file with Index.html for Facebook login button.

Index.html

<html>
<head>
<script type="text/javascript" src="fblogin.js"></script>
</head>
<body>
<button onclick="fb_login()">Fb Login</button
</body>
</html>

FBLogin.js

function fb_login(){
FB.login(function(response) {
if (response.authResponse) {
var access_token;
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api('/me?fields=id,name,email, gender, age_range, first_name,last_name', function(response) {
alert("Welcome " + response.first_name);
});
}
}, {
scope: 'email, public_profile',
auth_type: 'rerequest'
});
}

Javascript Code

function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}

window.fbAsyncInit = function() {
FB.init({
appId : '{AppID}',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.5
});

// FB.getLoginStatus(function(response) {
// statusChangeCallback(response);
// });

};

// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function fb_login(){
FB.login(function(response) {
if (response.authResponse) {
var access_token;
access_token = response.authResponse.accessToken; //get access token
user_id = response.authResponse.userID; //get FB UID
FB.api('/me?fields=id,name,email, gender, age_range, first_name,last_name', function(response) {
alert("Welcome " + response.first_name);
});
}
}, {
scope: 'email, public_profile',
auth_type: 'rerequest'
});
}

And done!

fb

Now, this was to give you basic introductory overview, but you can use Facebook Javascript SDK for different purposes such as uploading images, posting in groups, and so on. Though, the implementation can get tricky when you integrate the core APIs, and if you’re unaware about the process it’s easier to hire PHP developer to get it implemented in your web application development project.

Grab a free copy of Facebook API Javascript demo from Github.

This page was last edited on August 6th, 2018, at 9:27.
 
0
Shares
 

Have an App Idea?

Get your free consultation now