Learn More

Tuesday, July 31, 2012

How To Make Facebook Login Button

In the previous topic, I have explained how to use FB.getLoginStatus, FB.EventSubscribe. That way fits perfectly with the login plugin. However, sometimes you want to design your own facebook login button. If you want to create a login facebook with your own style, then you should apply at least three functions. And also, I suggest that you apply Jquery. Because the handling of javascript code becomes very easy. You must apply FB.login for user login to facebook from your blog, facebook FB.logout for user logout from your blog, FB.getLoginStatus to check whether the user has logged into facebook when opened your blog page. Consider the following code snippet

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type=”text/javascript”>
            window.fbAsyncInit = function() {
                        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.
             FB.login(function(response) {
   if (response.authResponse) {
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
   } else {
     console.log('User cancelled login or did not fully authorize.');
 },{scope: 'email,user_likes'});
window.location = 'http://www.threelas.com/';

// 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'));

<button id=”loginfb”>Login</button>
<button id=”logoutfb”>Logout</button>

When users come to your blog, and the user has not logged into facebook, then the login button is displayed and the logout button is hidden. And when user clicks the login button, then FB.login working. But if the user has previously logged in when it comes to your blog, then FB.getLoginStatus works and hide the login button. While the logout button is displayed. In addition, if the user has previously logged into facebook but never give authority to your application, then the login button will be active. In the above example, when users logout of facebook in your blog, then the program will perform reload the main page http://www.threelas.com.

  1. I apologize if disorder always, I followed the tutorial and I think the problem is when I go to convert the code from html to xml. the html code does not take the template gives me error but if I convert it to xml takes just as for open graph login and logout button does not work. may be a compatibility problem with the model of the template? however, the simple model and I have totally changed me