Detect Like with Facebook JavaScript API + iFrame

Building an app with the Facebook JavaScript API that will embedded into a page using the new iframe method.

I want to detect if they have liked the current page. Usually I would use print_r($_REQUEST) in PHP but that doesn't seem to work when using an iframe.

There is also this option: http://developers.facebook.com/docs/reference/fbml/visible-to-connection/ but it says its deprecated and I have never liked this method as its fairly hacky.

What is the way t do it now? Prefer to use XFBML + JavaScript API but can use PHP if required.

Solution

We've done this several times, and it seems to work pretty well. It uses XFBML to generate a Like Button widget and the JS SDK to render XFBML and subscribe to Facebook events. Code sample below:

edit: Since you're looking to detect if the user is a fan when the page loads, and FB deprecated the feature to let you get it directly from them when the canvas is loaded by passing fb_page_id to the address query string, you'll need an application install for the user to test their fan-dom of your page. It certainly adds a lot of friction to your application, but it is what it is for now - I guess.

    <?php
require 'facebook.php';

// Create our Application instance (replace this with your appId and secret).
$facebook = new Facebook(array(
    'appId'  => 'YOUR APP ID',
    'secret' => 'YOUR APP SECRET',
    'cookie' => false,
));

try
{
    $session = $facebook->getSession();

    if (empty($session['uid']))
    {
        throw new Exception("User not connected to application.");
    }

    $is_fan = $facebook->api(array(
        'method'    => 'fql.query',
        'query'     => "SELECT uid, page_id FROM page_fan WHERE uid = {$session['uid']}"
    ));

    if (false == $is_fan || count($is_fan) == 0) // 0 results will be returned if the user is not a fan
    {
        $is_fan = false;
    }
    else
    {
        $is_fan = true;
    }   
}
catch (FacebookApiException $e)
{
    /**
     * you don't have an active user session or required permissions 
     * for this user, so rdr to facebook to login.
    **/

    $loginUrl = $facebook->getLoginUrl(array(
        'req_perms' => 'user_likes'
    ));

    header('Location: ' . $loginUrl);
    exit;
}
?>
<html>
<head>
</head>
<body>

<? if (empty($is_fan)): //user is not a fan. ?>
    <fb:like href="http://www.facebook.com/your-facebook-page"
        show_faces="true"
        width="400">
    </fb:like>
<? else: ?>
    Yay! You're a fan!
<? endif; >?

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript">
    </script>
<script type="text/javascript">
FB.init({
    appId: '<?= FB_APP_ID; ?>',
    cookie: true,
    status: true,
    xfbml: true
});

// Subscribe to the edge creation event, from Facebook
FB.Event.subscribe('edge.create', function(response)
{
    alert("Congratulations! We are so excited that you are a fan now! woot!")
});

</script>

</body>
</html>

okay, finally got got everything formatted with straight markdown. that wasn't painful at all.. (sike) :|