Question

Is it possible to setup a fan page to work as follows?

1. User lands on my clients fan page
2. Sees a “Like me” graphic
3. User likes the page
4. User is then taken to a 760px wide app

The two parts i am struggling with are:

1. Creating a separate fan and none fan landing page
2. When liked, load up a 760px wide app

Do I control the like/nonlike graphic from my app using either PHP or Javascript by seeing if the user has already liked my app?
How do I force the liked page to load a 760px wide app?

Answer 1

You can capture like button events.

Facebook elements events

Example:

<script>
    window.fbAsyncInit = function() {
        FB.init({appId: '127654160646013', status: true, cookie: true, xfbml: true});
        FB.Canvas.setSize({ width: 520, height: 742 });
        FB.Event.subscribe('edge.create', function(response) {
            window.parent.location = ADDRESS;
        });
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/lt_LT/all.js';
        document.getElementById('fb-root').appendChild(e);
    })();
</script>

Also you need get user fan status. Here is a solution:

<?
define('FACEBOOK_APP_ID', 'xxx');
define('FACEBOOK_APP_SECRET', 'xxx');

$is_fan = false;
if (!empty($_REQUEST['signed_request'])) {

    list($encoded_sig, $payload) = explode('.', $_REQUEST['signed_request'], 2);

    $sig = base64_decode(strtr($encoded_sig, '-_', '+/'));
    $data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);

    $expected_sig = hash_hmac('sha256', $payload, FACEBOOK_APP_SECRET, true);

    if ($sig == $expected_sig) {

        if (!empty($data['page']['liked'])) {
            $is_fan = true;
        }
    }
}
?>

There is everything you need. And just remember, you can redirect only via javascript:

window.parent.location = ADDRESS;