Loading Gif

How to pass variables into your facebook custom page tab


How to pass variables into your facebook custom page tab

Have you ever written a facebook app or custom page and needed to pass a variable into the app via a query string?

To be honest its a nightmare, and a lot harder than it should be (as will all things facebook related) but the good news is… it is possible.

I first needed to do this on an app I wrote which was essentially a glorified gallery for an event where people could find pictures of themselves taken by professional photographers. Once the user had found their photo the had the option to share the photo.

Sounds pretty simple? but its harder than you first think.

At first I thought… easy, Ill just share a link with a query string containing the id of the photo. Then when people arrive at the app from the shared link I could automatically show the shared image and not the home page of the app.

But as you are cleverer than me you probably just thought.

DURR! What is this guy on about? Everyone knows the app is embedded in an iframe by facebook so clearly the query string will be inaccessible

And you would be right.

So I started researching and found the key was in the signed request sent to the app by facebook. If you add a query with a key of ‘app_data’ to the end of the app url then this data, and only this data will get passed into the app.

Below is the class you will need (the same one that works out if the page is liked) and an example of how to pass data to your app.

The facebook class

Usage for single variable

Below is an example of how to pass a single variable into an app. In this example the result would be ‘The data passed to the app = foo’

Passing multiple variables is a bit trickier and I will explain how to do it further down the page.

The url with the app_data query


Usage for multiple variables

As I said, multiple variables are a bit trickier. As we are only allowed to pass the one parameter ‘app_data’ to the app we will need to be crafty.

If we pass a json object as the value of ‘app_data’ we can send as many variables as we want to the app as long as we remember to properly encode and decode the data. (luckily the class above does most of the work for you so make sure to take a look if you want to know how it works)

The url with the app_data query as a json object



Remember to always url encode your json object before sharing the url (see example below). Otherwise the whole thing will fall apart.