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

Question

I search a solution for the problem highlighted in this question.

Unfortunately, the accepted solution (which dates back to 21/11/2012) doesn't work anymore, as you can this in this demo.

Does someone know why?

Body

<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="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 didn't find anything what works.

Thank you for help.

Answer 1

OLD SCHOOL API CALL

---

The method FB.Event.subscribe() allowed apps to subscribe to a range of events, and define callback functions for when they fire, is deprecated .

Also FQL Query is deprecated .

For checking if user likes a page, you need user.likes permission, so you can try :

FB.api get on '/me/likes', and with the response ...

if (response.data[likes].name == "Coca-Cola") 

or... better

if (response.data[likes].id == "40796308305") { }

There are other ways to check it, for exaple :

Get api call to userid/likes/pageid returns page info if user likes the page, and returns nothing if user does not like the page .

You can check if user likes a page using this call, but you cannot restrict content, based on this kind of resource .

---

2018 UPDATED SOLUTION

---

But nowadays, in 2018 the best method for is setting Webhooks .

Webhooks are a subscription based system between Facebook and your server. Your app subscribes to receive updates from Facebook via a specified HTTPS endpoint .

This allows your to app to receive notifications whenever there are updates to a chosen set of topics and their fields, so, you can track changes to most sections of the user's profile, such as About, Photos, Posts, Friends, and Likes.

Webhooks update notifications are sent as POST requests to a callback URL that you supply. Notifications can be lightweight, indicating only that a field has been updated, or can include the newly updated value .

webhooks user reference Full list of user profile fields that you can subscribe to, such as About, Photos, Posts, Friends, and Likes.

webhooks page reference The easiest way to set up your app to receive Webhooks updates is to use the App Dashboard's, check out Facebook Platform documentation for more info .

Webhooks documentation

Answer 2

Like Gating is not allowed anymore, that´s why it is not possible. The only reliable way to get that information is by authorizing a user with the user_likes permission and using /me/likes/[page-id]. But you will not get that permission approved for like gating in the Login Review.

People need to like something because they really want to, not because they get something for it:

Only incentivize a person to log into your app, enter a promotion on your app’s Page, or check-in at a place. Don’t incentivize other actions

Source: https://developers.facebook.com/policy/

Btw, you can also subscribe to the edge.create event to find out if a user just clicked your like button, but you can´t find out if the user liked it before: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

Answer 3

The problem on that code is that FQL is deprecated . You can't do what you want to, and thats why changes are necessary . Your code would work if your app is old, created before changes that turns like gating not allowed, but anyway, you cannot use that for show content. You can use that kind of implementation for creating an interactive experience, where you can for example changing the content, saying "Thanks for liking".. Or "Connect with us, liking our page.." ..

You can also think about interfaces, where you show up the page plugin, and just after user likes, you say Thank you ... and hide the page plugin ... But user must always be able to close without liking .

For checking if user likes a page, you need use :

FB.api get on '/me/likes', and with the response ...

if (response.data[likes].name == "Coca-Cola") 

or... better

if (response.data[likes].id == "40796308305") { 

}

I repeat, One thing has nothing to do with another .. You can check if user likes a page, but you cannot restrict content, based on this kind of resource .

There are other ways to check it, for exaple :

Get api call to userid/likes/pageid returns page info if user likes the page, and returns nothing if user does not like the page .

You will waste time trying do that for controlling content consumption . Your app must be aprooved for asking user_likes permission, and its better you think about creating another experience for users, instead of submitting something like that .

I also think that content with good open graph for sharing, commenting and optional liking is very much more efetive, because i noticed that many people used to like and dislike the page after getting the content .

If you just... Prompt a FB.UI for sharing after 1 minute, for example, you will have much more results .. Aways positioning the page plugin in strategic places, people will naturally like your page ..

Than you can say change the page plugin element : Thank you for liking, please share with your friends .... Who would also like ...

Or use a callback for triggering the share dialog ..