As we mentioned earlier on Javascript SDK, that the main purpose of the login button is getting access token. The value of the access token is then used to obtain, publish, update to the facebook social activities. Previously, we also have discussed how to use the login plugin. However, you can not get the access token. On this topic, we will discuss how to get that value. To obtain this values, you should be able to apply FB.login, FB.logout, FB.getLoginStatus, FB.EventSubscribe. Implementation of these functions depends on the type of login button is used, when you use the login plugin then you no longer need to apply FB.login (or FB.logout). Conversely, when you create your own login button, then you should apply FB.login, FB.logout.
Applying Login Plugin Without Autologoutlink = True
If you are not applying autologoutlink in login plugin, meaning you only activate the login function. So that after login, the login plugin turns into your friends photos (if the attribute data-show-faces = "true"). So that users can not logout from facebook via your blog. In this condition, you should apply FB.logout. The advantages of using login plugin is user no need to login every time they move from one page to another page on your blog. However, you still can not get the access token. To obtain the access token, then you should apply FB.getLoginStatus. Consider the following code
Dengan fbAsyncInit | Dengan Jquery |
---|---|
<body> <script type=”text/javascript”> window.fbAsyncInit = function() { FB.init({ appId : 'Your-App-Id', status : true, cookie : true, xfbml : true, oauth : true, }); FB.getLoginStatus(function(response) { if (response.status === 'connected') { // the user is logged in and has authenticated your // app, and response.authResponse supplies // the user's ID, a valid access token, a signed // request, and the time the access token // and signed request each expire var uid = response.authResponse.userID; var accessToken = response.authResponse.accessToken; getUserPicture(accessToken); //function to retrieving data of your user, will discussed later } else if (response.status === 'not_authorized') { // the user is logged in to Facebook, // but has not authenticated your app } else { // the user isn't logged in to Facebook. } }); }; // 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/all.js#xfbml=1&appId= Your-App-Id "; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="user_checkins,email,publish_actions"></div> </body> | <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <script type=”text/javascript”> $(document).ready(function(){ window.fbAsyncInit = function() { FB.init({ appId : 'Your-App-Id', status : true, cookie : true, xfbml : true, oauth : true, }); FB.getLoginStatus(function(response) { if (response.status === 'connected') { // the user is logged in and has authenticated your // app, and response.authResponse supplies // the user's ID, a valid access token, a signed // request, and the time the access token // and signed request each expire var uid = response.authResponse.userID; var accessToken = response.authResponse.accessToken; getUserPicture(accessToken); //function to retrieving data of your user, will discussed later } else if (response.status === 'not_authorized') { // the user is logged in to Facebook, // but has not authenticated your app } else { // the user isn't logged in to Facebook. } }); }; // 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/all.js#xfbml=1&appId= Your-App-Id "; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }); </script> <div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="user_checkins,email,publish_actions"></div> </body> |
Basically, FB.getLoginStatus has a function to check if someone has been login into facebook before someone come to your blog. The problem, if you do not implement jquery in your program, sometimes after logging in, users do not see the output of your program (such as user photos, photos of the user's friends). To be able to display the program output, your blog should make the process re-loading after login, in this case we suggest you apply FB.EventSubscribe function. How to use EventSubscribe will be explained in the next topic.
Sweet blog! I found it while browsing on Yahoo News. Do you have any suggestions on how to get
ReplyDeletelisted in Yahoo News? I've been trying for a while but I never seem to get there!
Thanks
Feel free to visit my blog post :: Click here