Facebook: Check if user clicked Like page button(just liked the Facebook page)

Very often Facebook applications have "Fangate" page, meaning that if user hasn't liked the page and if he opened application - he can see application page with text something like "Please like our Facebook page before using the app" and can't use the application until he is not page fan.

Our clients as usual ask us to track how many users liked the page from the application.

Signed request contains an information about if user like a page:

$facebook = new Facebook(array(
    'appId' => $app_id,
    'secret' => $app_secret,
    'cookie' => true
));

$signed_request = $facebook->getSignedRequest();
$like_status = $signed_request["page"]["liked"];

So, the challenge is to catch the moment when user clicks like button.

The simples way is to store like status to the session. But it doesn't work in Safari, for iframe Facebook applications Safari doesn't accept cookies and user session is lost.

Nowadays most of polar browsers support local storage. So we can use it to store like status information. Example of source code is pretty simple.

This code example should be in template that is rendered if user is a fan of Facebook page:

<script type="text/javascript">
    if ('localStorage' in window && window['localStorage'] !== null) {
        if (localStorage.getItem('liked_state') == 0) {
            // we've go it: user just clicked like button
        }

        localStorage.setItem('liked_state', 1);
    }
</script>

Pretty simple, isn't it?

Change iframe src attribute in Facebook applications

Sometimes it is necessary to change source of the iframe on facebook applications dynamically. In Facebook applications iframe can be created only using tag "fb:iframe" and Facebook doesn't allow access to iframe attributes. Of course we can create a set of fb:js string variables for all cases that we need. But it is not very good solution.

One of the solutions that can be used looks as follows.

At first create iframe using fbml:

<fb:js-string var="iframe_element">
  <fb:iframe id="fb-iframe" src="http://your.iframe.location" />
</fb:js-string>

Than we should have an html element that will be a container for iframe:

<div id="iframe-block"> </div>

Next step is to display iframe. This can be done using fbml method setInnerFBML:

document.getElementById('iframe-block').setInnerFBML(iframe_element);

After this we can get access to iframe attributes.

document.getElementById('view-iframe-element').setSrc('http://your-new-url');

So, the only way to change the src of iframe that I could find is to display the iframe and the change it attribute src.