How to detect Facebook Like button pressed and trigger event?

Question

Here is the example:

• http://www.facebook.com/UEvents?v=app_4949752878&ref=ts

These guys get people to click on Like button (in Step 1) first before letting the user download the video in Step 2.

Interestingly, the Like button was detected and the page refreshed to show the blurred out image in Step 2 so user can click through to download.

And it seems to remember that I click on Like (when I reload the page) so the Like button does not show any more and it just only shows Step 2.

What is their trick of the trade?

Answer 1

When a Facebook tab is loaded, the fb_sig_is_fan parameter is passed in specifying if the current user viewing the tab is a fan. Clicking on the Like button will trigger a reload of the tab content, resulting in an updated fb_sig_is_fan being passed in so the app can decide to show a different image.

Answer 2

Actually information if user is page fan or not exists in signed request. Since you need firstly to decode signed request like it is here:

 $signed_request = $_REQUEST["signed_request"];
 list($encoded_sig, $payload) = explode('.', $signed_request, 2); 
 $data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);

And after that access page liked variable:

$pageLiked = $data['page']['liked'];

Now FB is on the way of deprecating FBML so don't consider <fb:visible-to-connection> as something that will work for a long base.

Answer 3

http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

FB.Event.subscribe('edge.create', function(response) {
// do something with response.session
});

Answer 4

One can detect when a user clicks on like button using edge.create. Also if the user has already liked the page, it can detected using FQL Like Table.

Answer 5

<fb:visible-to-connection>
put here code for users that like the page (no <fb:comments>) 
</fb:visible-to-connection>