Facebook API – Part 3

In the third part of my article series about Facebook API I show you how to use server side API functions. For this there are many SDKs available. For this article I use the PHP SDK. The other SDKs don’t really differ in the functions.

Signed request

A signed request is a POST variable that comes from Facebook, if a user has logged in to the app. So you can use the signed request variable to determine that the user is logged in and we can get data from Facebook. To detect a signed request, store it into session and get some user data you can use the following code:

if(isset($_POST['signed_request']))
{
    $signed_request = $_POST['signed_request'];
    // now get userdata
    $data = parse_signed_request($signed_request, $fb_secret);
    // is facebook user fan of our site?
    $fan = $data['page']['liked'];
    // get the user id of facebook user
    $user_id = $data['user_id'];
}

From the time on we get a signed request, we can get data from Facebook. As an example we check if the user is a fan of the page. Additionally we request the Facebook id from the user. The code uses a function called parse_signed_request. This function returns an array with all information from the user. As param you need the signed request and the Facebook security code which can be found at the app site on Facebook (you can also find the app id there). This function is from an external source, so I post it with this in mind:

function parse_signed_request($signed_request, $secret) {
    list($encoded_sig, $payload) = explode('.', $signed_request, 2);

    // decode the data
    $sig = base64_url_decode($encoded_sig);
    $data = json_decode(base64_url_decode($payload), true);

    if (strtoupper($data['algorithm']) !== 'HMAC-SHA256')
    {
        error_log('Unknown algorithm. Expected HMAC-SHA256');
        return null;
    }

    // Adding the verification of the signed_request below
    $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
    if ($sig !== $expected_sig) {
        error_log('Bad Signed JSON signature!');
        return null;
    }

    return $data;
}

Facebook or not Facebook?

In my first article I showed you that you communicate with your web application through the Facebook proxy. But you can also communicate with your application directly. What happens? The web application will be displayed without the Facebook frame. If you want to stop that you can check if a user communicates through the proxy. If not, you can make a redirection to the Facebook app. Here is the code:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'facebook') === false) {
    // we're outside of facebook
    // redirect user to fanpage
    header('Location: '.$fb_appurl);
    die();
}

First you check if the user agent has the string ‚facebook‘. If a user communicates over the proxy the there is that sting. If we do not find it, we make a redirection to the Facebook app url.

Mobile or desktop?

Facebook is also used by mobile gadgets, so we also have to deal with mobile devices. The problem: a Facebook app with a Facebook frame is not a good idea for mobile devices. It  is much better to use the whole 810 pixel width for the display on your phone or tablet. For this we need two things:

1. we have to detect mobile devices from code
2. mobile devices should display the app without the Facebook frame

For the mobile device detection we need the user agent we already used:

$agent = $_SERVER['HTTP_USER_AGENT'];
$mobile = isMobileBrowser($agent);

With the isMobileBrowser function we check if the user agent contains strings that are used by mobile devices. The function looks as follows:

function isMobileBrowser($agent)
{
    if (!$agent)
        return false;

    $mobiles = array('android','iphone','ipod','windows ce','pocket',
                     'mobile','portable','smartphone','sda','pda',
                     'handheld','symbian','wap','palm','avantgo',
                     'chtml','blackberry','opera mini','nokia'
               );
    $i = 0;
    $max = count($mobiles);
    $flag = false;

    while ($i < $max && $flag === false) {
        $flag = !(strpos(strtolower($agent), $mobiles[$i]) === false);
        $i++;
    }
    return $flag;
}

Now we know if we have to display the data for desktop or mobile devices. The only thing is now to redirect to the correct target. This can be Facebook for desktop devices or the web application for mobile devices:

if($mobile)
{
    // redirect to web app on server
    header('Location: '.$fb_serverurl);
}
else
{
    // redirect to facebook app
    header('Location: '.$fb_appurl);
}
die();

Part 1 | Part 2 | Part 4