jeudi 26 novembre 2015

Display something for people who like or not like our facebook page

I search solution for my problem like this: Facebook how to check if user has liked page and show content?

But, the sulution from 21/11/2012 doesnt work anymore. Demo HERE. Did someone know why?

Body

<div id="fb-root"></div>
<script src="http://ift.tt/pDm2SS"></script>
<script>
  FB.init({
    appId  : '179378788777832',
    status : true, 
    cookie : true, 
    xfbml  : true  
  });
</script>

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

<div id="container_notlike">
YOU DONT LIKE
</div>

<div id="container_like">
YOU LIKE
</div>

JS

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 = "40796308305"; //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);
});

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
}

I search solution for hours. But i didnt find anything what works. Thank you for help.




Aucun commentaire:

Enregistrer un commentaire