Query Strings for Facebook Page Tabs

By

There is a very useful but rarely used feature of the Facebook platform which allows you to pass query string parameters into Page Tabs. This is a powerful feature because you can use it to build full applications inside a Page Tab. No canvas app is required. For example, if you had a picture-drawing application, you could let your users share a link to the Page Tab which opened their picture directly.

Facebook Page Tabs are loaded in an frame, which means they don’t have access to the query string. But Facebook have provided a way around this by passing on one particular parameter. Any value in the app_data GET parameter is made available to your application as a string in the signed_request object. You can use JSON encoding to make that parameter store any number of objects.

Enough talk — time for some code. I’m going to walk through a really basic demo of how to make this work. First, let’s initialise the Facebook SDK.

$facebook = new Facebook(array(
  'appId'  => 'YOUR_APP_ID',
  'secret' => 'YOUR_APP_SECRET',
));

Now we’ll ask for the signed_request object.

$signedRequest = $facebook->getSignedRequest();

Now let’s take the app_data string parameter and decode it into an array.

$appData = array();
if (!empty($signedRequest) && !empty($signedRequest['app_data'])) {
  $appData = json_decode($signedRequest['app_data'], true);
}

For testing purposes, we’ll print out the results.

echo 'appData contains: ' .
  '<pre>' . print_r($appData, 1) . '</pre>';

Now that we’ve set up a way to retrieve and display the app_data parameters, let’s create a link which actually passes some parameters in. The first step is to define our parameters in an array.

$params = array(
  'page' =&gt; 'home',
  'id'   =&gt; '99'
);

Next we’ll encode that array into a JSON string, and then URL encode it so it can be used in a query string.

$encodedParams = urlencode(json_encode($params));

Finally, we’ll concatenate the string onto our Page Tab’s base URL and print it as a link.

$tabUrl = 'http://www.facebook.com/mypage?sk=app_142464959162218';
$linkUrl = $tabUrl . '&amp;app_data=' . $encodedParams;
echo '<a href="' . $linkUrl . '">My link</a>';

The value of $linkUrl would be:

http://www.facebook.com/mypage?sk=app_142464959162218&amp;app_data={%22page%22%3A%22home%22%2C%22id%22%3A%2299%22}

As you can see, having multiple query string parameters in a Page Tab is a really simple process. If you want to you can use this functionality to build multi-page Tabs with deep-linking. I have made a working example of a multi-page Tab for you to check out. You can follow the links below to see the demo, and the source code is up on GitHub of course.

Deep link red
Deep link green
Deep link blue
Source on GitHub

This entry was tagged with Facebook. Bookmark the permalink.

Comments

  1. By Anthony

    Really good article - only read elsewhere how to pass one value to the Facebook app, but this article shows more options - well done and please keep up the good work.

  2. Hello, Keegan.
    First of all I wuold like to thank you for the tip ;)

    And secondly I want to know if you can help me with something on an app that I'm developing on Facebook.

    Well, I would like to redirect the user to another page in my page tab application when they click on specific link, but I need that this link have an unique URL, inside Facebook.

    Basically I want the users post some phrases on my app on Facebook, each user will have a phrase, that phrase has a specific link inside Facebook, the user must have the possibility of sharing this link with others but I don't know how to do this, since applications on facebook are builded on Iframes, that is, the URL of the page does not change so the user cannot share anything but the link to my application tab on my facebook page.

    Do you know how could I do this on my facebook page tab app?

    I think your tutorial explains exactly that, but I didn't get it clearly.
    Could you help me on this?

    I appreciate your attention.

    Thanks again for the tutorial ;)

  3. Excellent post, covering something that is so critical to building the foundations of a Facebook Tab App. Thank you. This information is SOOOOO useful to the many developers struggling with Facebook's Official Documentation.

  4. Does this still work with the new Facebook Pages Tab modifications (timeline)? And also, the new url format:

    http://www.facebook.com/presenternet/applicationId

    Thanks!

  5. Hiya,

    I've been trying to implement this, passing variables into our landing page form. However, it doesn't work. Is there something I'm missing? I'm using this url:

    http://www.facebook.com/RetireEasy/?sk=app_227252030618640&app_data={%22mktsid%22:RoMdmaol123TEST,%22st%22:%22ID%22}

    Passing "mktsid" and "st" (marketing id and state respectively). However, when I echo the $app_data variables it comes out blank. Please advise.

    J

  6. By Zany

    A closing php tag is missing from index.php which you have put up on GitHub. Thanks for your work.

  7. This doesn't seem to be working anymore.

Leave a Reply