Facebook Login makes it easy to connect with people using your app or website. The Facebook SDK for Javascript provides a simple path to integrating login with your websites and mobile web apps.
After you complete this guide, your app will be able to make API calls on behalf of a person using it. You'll need somewhere to host HTML files. If you don't have one, you can get set up quickly at no cost with Heroku.
1Create a Facebook app
You will need a Facebook App ID before you start using the SDK.
Hide
Create a new app on the Facebook App Dashboard, and enter your app's basic information.
Once you've created the app, note the app ID shown at the top of the dashboard page.
Alternately, you can use the ID of an existing app.
2Add the Facebook SDK for JavaScript
Insert the Javascript SDK initialization snippet after the opening
<body> tag in your HTML page
Hide
This code will load and initialize the JavaScript SDK in your HTML page. Replace
YOUR_APP_ID with the app ID noted in Step 1 above and WWW.YOUR_DOMAIN.COM with your own domain. The best place to put this code is right after the opening <body> tag.<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional init code here
};
// Load the SDK asynchronously
(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 = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
The channel file addresses some issues with cross-domain communications in certain browsers. The contents of the
channel.htmlfile can be just a single line: <script src="//connect.facebook.net/en_US/all.js"></script>3Add the login code
Add the login handling to your HTML to end up with the code below
Hide
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired
// for any auth related change, such as login, logout or session refresh. This means that
// whenever someone who was previously logged out tries to log in again, the correct case below
// will be handled.
FB.Event.subscribe('auth.authResponseChange', function(response) {
// Here we specify what we do with the response anytime this event occurs.
if (response.status === 'connected') {
// The response object is returned with a status field that lets the app know the current
// login status of the person. In this case, we're handling the situation where they
// have logged in to the app.
testAPI();
} else if (response.status === 'not_authorized') {
// In this case, the person is logged into Facebook, but not into the app, so we call
// FB.login() to prompt them to do so.
// In real-life usage, you wouldn't want to immediately prompt someone to login
// like this, for two reasons:
// (1) JavaScript created popup windows are blocked by most browsers unless they
// result from direct user interaction (such as a mouse click)
// (2) it is a bad experience to be continually prompted to login upon page load.
FB.login();
} else {
// In this case, the person is not logged into Facebook, so we call the login()
// function to prompt them to do so. Note that at this stage there is no indication
// of whether they are logged into the app. If they aren't then they'll see the Login
// dialog right after they log in to Facebook.
// The same caveats as above apply to the FB.login() call here.
FB.login();
}
});
};
// Load the SDK asynchronously
(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 = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
// Here we run a very simple test of the Graph API after login is successful.
// This testAPI() function is only called in those cases.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
}
</script>
<!--Below we include the Login Button social plugin. This button uses the JavaScript SDK to-->
<!--present a graphical Login button that triggers the FB.login() function when clicked.-->
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
</body>
</html>
Now you can test your app by going to the URL where you uploaded this HTML. Open your JavaScript console, and you'll see the
testAPI() function display a message with your name in the console log.
0 komentar:
Posting Komentar
1. Dilarang Spam.
2. Dilarang Memasang Link Aktif.
3. Dilarang Menghina, Sara, Dan P*rn.
4. Dilarang Promosi.
5. Komentar Harus Relevan Dengan Artikel.
Jika anda melanggar 5 point diatas, maka komentar anda akan kami hapus langsung tanpa pemberitahuan sebelumnya.
Terima kasih dan selamat berblogging ria.