Passing parameters to Facebook Tab


  • tutorials
  • (Updated at )

fb-appdata.png

Passing parameters to Facebook Tab

In most case, we simply need to pass some parameters through URL, it works on Facebook App but not Facebook Tab, somehow Facebook blocks certain behavior on Facebook Tab.

To achive the purpose, we need to follow the rules by Facebook

https://www.facebook.com/[pagename]?v=app_[appid]&app_data=[parameters]

app_data is the only parameter will pass to your landing page, depending on what you assigned in facebook apps dashboard, and it's construct by json and encode by base64. On your landing page, you will receivce $_POST['signed_request'] contains informations we need.

$_POST['signed_request']

Fore example, we have a link //www.facebook.com/myappname?v=app_123456789&app_data=foo%3Dbar, then you get something looks like this.

{  
    "algorithm": "HMAC-SHA256",  
    "app_data": "foo=bar",  
    "issued_at": 1389437476,  
    "page": {  
        "id": "123456789",  
        "liked": true,  
        "admin": true  
    },  
    "user": {  
        "country": "tw",  
        "locale": "en_US",  
        "age": {  
            "min": 21  
        }  
    }  
}  

The parser

Here is the parser, it decode and returns the object specified by name. Since I know the app_data will always be query string, so let's parse it too.

function getSignedRequestData($name) {  
    $signed_request = explode('.', $_POST['signed_request']);  
    $json = json_decode(base64_decode($signed_request['1']), true);  
    if (!$name) {  
        return $json;  
    }  
    else if ($name === 'app_data') {  
        parse_str($json[$name], $data);  
        return $data;  
    }  
    return $json[$name];  
}  

A complete example

Say we have google anatyics tracking parameters and custom parameters. This is how you generate the valid URL

// Googla Analytics Tracking  
$ga = "utm_campaign=sample&utm_medium=cpc&utm_source=facebook";  
// custom parameters, notice the route, we need to encode it first  
$query = "foobar=lorem&route=" . urlencode("page2.php?fruit=apple&color=green");  
  
// your facebook app data  
$app_name = 'myapp';  
$app_id = '123456789';  
  
// facebook tab URL  
$link = "https://www.facebook.com/{$app_name}?v=app_{$app_id}&app_data=";  
$link .= urlencode($query . '&' . $ga);  
  
// add GA parameters as normal query string  
$link .= '&' . $ga;  

And this is what you get for the URL.

https://www.facebook.com/myapp?v=app_123456789&app_data=foobar%3Dlorem%26route%3Dpage2.php%253Ffruit%253Dapple%2526color%253Dgreen%26utm_campaign%3Dsample%26utm_medium%3Dcpc%26utm_source%3Dfacebook&utm_campaign=sample&utm_medium=cpc&utm_source=facebook  

Noticed I add $ga twice? one in app_data and one as normal query string with current URL. Well, facebook Tab accepts Google Trackers so it's pretty safe add them to query string, but it will not pass it to your page if you need those variables you have to add it to app_data as well.
To get the app_data we call the parser function by getSignedRequestData('app_data') and it returns an array and ready to use.

Array  
(  
    [foobar] => lorem  
    [route] => page2.php?fruit=apple&color=green  
    [utm_campaign] => sample  
    [utm_medium] => cpc  
    [utm_source] => facebook  
)  

Reference

Page Tab Tutorial - Facebook developers
Tracking Facebook Ads in Google Analytics

Ethan Liu avatar
Ethan Liu
A web developer, iOS developer, designer and a cat slave.

comments powered by Disqus