Facebook Login

by Znuff

HTML

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : '179378788777832',
    status : true, 
    cookie : true, 
    xfbml  : true  
  });
</script>
<div id="fb-root"></div>
<script>(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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div id="login">
    You are not logged in to FB, Please click<a href="#"> here </a> to login.
</div>

<div id="container_notlike">
<div class="fb-like" data-href="http://www.facebook.com/Popasul.Pescarilor" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</div>

<div id="container_like">
<div class="fb-like" data-href="http://www.facebook.com/Popasul.Pescarilor" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</div>

CSS

body {
width:520px;
margin:0; padding:0; border:0;
font-family: verdana;
background:url(repeat.png) repeat;
margin-bottom:10px;
}
p, h1 {width:450px; margin-left:50px; color:#FFF;}
p {font-size:11px;}

#container_notlike, #container_like, #login {
    display:none
}

JavaScript

var hideLogin = function(){
   $("#login").hide();
}
    
var showLogin = function(){
   $("#login").show();
}


var doLogin = function(){
    FB.login(function(response) {
      if (response.session) {
           hideLogin();
           checkLike(response.session.uid)
      } else {
        // user is not logged in
      }
    });
}
    
var checkLike = function(user_id){
    var page_id = "122860084467422"; //coca cola
    var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
    var the_query = FB.Data.query(fql_query);
          
          the_query.wait(function(rows) {

              if (rows.length == 1 && rows[0].uid == user_id) {
                  $("#container_like").show();

                  //here you could also do some ajax and get the content for a "liker" instead of simply showing a hidden div in the page.
                  
              } else {
                  $("#container_notlike").show();
                  //and here you could get the content for a non liker in ajax...
              }
          });        
}
    
$(document).ready(function(){
    FB.getLoginStatus(function(response) {
      if (response.status === 'connected') {
        hideLogin();
        checkLike(response.authResponse.userID)
      } else {
        showLogin();
      }
     });
    
    $("#login a").click(doLogin);

});