Home Facebook Facebook SDK Grails How To IntelliJ Idea Facebook SDK in Grails - Part 1

Facebook SDK in Grails - Part 1

 

 

Step 1 : First you have to create Facebook App from Facebook Developer

Step 2 : Select Facebook Login as Product

Step 3 : Set Valid OAuth redirect URIs

Step 4 : Choose Platform -> Web 


Step 5 :  Make your app Live from dashboard.


[ To know more about creating Facebook app please leave comment below. ]

Step 6 : Use the Facebook.js script as below : 


function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') {
        testAPI();
    } else {
        document.getElementById('status').innerHTML = 'Please log ' +
            'into this app.';
    }
}

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

window.fbAsyncInit = function() {
    FB.init({
        appId      : '{Your-Facebook-App-ID}',
        cookie     : true,  // enable cookies to allow the server to access session        xfbml      : true,
        version    : 'v2.8' // use graph api version 2.8    });
    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 testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api(
        '/me', function(response) {
        profile_pic =  "http://graph.facebook.com/"+response.id+ 
"/picture";
        console.log('Successful login for: ' + response.name);
        document.getElementById('status').innerHTML =
            "You are already logged in with Facebook -" +
            "<a href=https://www.facebook.com/"+response.id+">" + 
            response.name +"</a>" +
            "! But not login with our website. 
            Now you can either sign up or login with us.";
        document.getElementById('fbi').innerHTML="<img src='"+ 
        profile_pic+"'/>";
        document.getElementById('fbi').className="";
        document.getElementById('fbimage').style.padding="4px";

        }

    );
}
 

Step 7 : Now Edit Index.gsp as :

<!doctype html>
<html>
<head>
    <meta name="layout" content="main"/>
    <title>Social Plugin</title>
    <asset:link rel="icon" href="favicon.ico" type="image/x-ico" />
</head>
<body>
<div id="fb-root"></div>
        <section class="row colset-2-its">
            <asset:javascript src="socialJS/facebook.js" />
            <center>
                <div id="status" style="font-size: 15px"  
                class="label label-warning">
                </div>
            </center>
            <div class="container">
                <div class="kpx_login">
                    <h3 class="kpx_authTitle">Login</h3>
                    <div class="row kpx_row-sm-offset-3 kpx_socialButtons">
                        <div class="col-xs-2 col-sm-2">
                            <a href="#" id="fbimage" 
                            class="btn btn-lg btn-block kpx_btn-facebook"  
                            data-toggle="tooltip" data-placement="top"  
                            title="Facebook">
                                <i id="fbi" class="fa fa-facebook fa-2x">
                                </i>
                                <span class="hidden-xs"></span>
                            </a>
                        </div>
                    </div>
                    <div class="row kpx_row-sm-offset-3 kpx_loginOr">
                        <div class="col-xs-12 col-sm-6">
                            <hr class="kpx_hrOr">
                            <span class="kpx_spanOr">or</span>
                        </div>
                    </div>

<div class="row kpx_row-sm-offset-3">
  <div class="col-xs-12 col-sm-6">
  <form class="kpx_loginForm" action="" autocomplete="off" method="POST">
  <div class="input-group">
  <span class="input-group-addon"><span class="fa fa-user"></span></span>
  <input type="text" class="form-control" name="username"  
  placeholder="Username">
  </div>
  <hr />
  <div class="input-group">
  <span class="input-group-addon"><span class="fa fa-key"></span></span>
  <input  type="password" class="form-control" name="password"  
  placeholder="Password">
  </div>
  <br>
  <span class="label label-danger">Password Error!</span>
  <span class="label label-success">Login success!</span>
  <span class="label label-warning">Some of password must not be empty! 
  </span>
  <hr />
  <button class="btn btn-lg btn-outline-primary btn-block" type="submit">
  <i class="fa fa-sign-in"></i> Login</button>
  </form>
  </div>
  </div>
 </div>
 </div>
 <script>
   $(function () {
   $('[data-toggle="tooltip"]').tooltip()
   })
 </script>
 </section>
 </div>
</body>
</html>

 

To be Continue . . .

Tags :
Powered by Blogger.