Facebook App Development Tutorial Part 1

Published on : August 12, 2014

Author: wahid

Category: Facebook Fanpage and App

Now a days FaceBook App development have high demand and I am writing a Facebook App development tutorial for you so you can develop a FaceBook App easily.

Facebook App Tutorial Part 1:

Step 1: Go to this link and create a Facebook app https://developers.facebook.com/apps/

This is a demo app that I’v created already.

Give a valid app name and and app namespace.

Now we are going to learn how to login into my apps with facebook login by using both javascript and php. You can follow just one either javascript or php to complete login process.

Facebook login with javascript:

[sourcecode]</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

/*–
<pre><span style="font-family: Georgia, ‘Times New Roman’, ‘Bitstream Charter’, Times, serif; font-size: 13px; line-height: 19px;">When using a Javascript SDK is that you must start with FB.init function. This function serves to perform the initialization of all devices of Javascript SDK.</span></pre>
Two ways to enable FB.init first is by using window.fbAsyncInit and second is jquery. Using jquery we can save loading process.

*/
<pre></pre>
window.fbAsyncInit = function(){

FB.init({

appId:’your app id’, // app id.

status:true,

cookie:true,

xfbml:true,

oauth:true,

frictionlessRequests : true

});

FB.getLoginStatus(function(response){

if(response.status === ‘connected’){

//connected.

}

else if(response.status === ‘not_authorized’){

//not authorized.

}

else{

//not loged in.

}

});

};

// Load SDK Asynchronously.

/*–

You must implement Asynchronously SDK to all functions up to work.

(function(d){

var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0];

if (d.getElementById(id)) {return;}

js = d.createElement(‘script’); js.id = id; js.async = true;

js.src = "http://connect.facebook.net/en_US/all.js";

ref.parentNode.insertBefore(js, ref);

}(document));

/*–

This is login function.

function login(){

FB.login(function(response){

if(response.authResponse){

//Do something

alert(‘login’);

}

else{

alert(‘login failed’);

}

},{scope:’publish_stream,user_photos’});

}

</script>

</head>

<body>

<a href="#" onclick="login();">Login</a>

</body>

</html>
<pre>[/sourcecode]