Category Archives: Facebook

Facebook Page Tabs and Access Tokens

This is a tricky little issue that has tripped me up a few times and for which I’ve finally found an answer.

If you design a Facebook application, and a Facebook user grants permission to your application to access your data, you can do all sorts of nice things with their friend lists, events, interests, birthday etc.

Your application is allowed obtain that user data on the basis of an access token, which is obtained as follows:

  • You direct the Facebook user to a Facebook URL that describes what data you want access to
  • The Facebook user clicks a link on that Facebook URL to indicate their approval
  • The Facebook user is then redirected back to you application, using a URL that contains a “code” parameter in the GET Request
  • Your application collects that code, sends it back to Facebook, and Facebook responds with a string which is the access token for that user

In this way, Facebook knows that the user in question has allowed your application to access particular data about them.

Now, here’s where it gets a bit more complex.

Facebook allows you to host applications in one of two ways: on a Canvas, or in a Page Tab. Regardless of which you choose, Facebook provides you with a dedicated link for your application as it is presented in either a Canvas or a Page Tab. It is to this URL that the user is generally redirected when Facebook needs to send your application the “code” parameter that your application needs to  request an access token.

However, in the case of both the Canvas and the Page Tab, your application is presented in an IFRAME within the general Facebook skin.

Here, an important difference occurs.

In the case of an application hosted on a Canvas, Facebook will pass on the “code” parameter to the source URL for your application, which is what Facebook uses as the src for the IFRAME. Your application can then pick this up and request the access token.

In the case of an application hosted on a Page Tab, Facebook will not pass on the “code” parameter to the source URL for your application, which means your application cannot request an access token, which means it can’t make requests for user data.

To have your Page Tab hosted application interact with the Facebook API, you need to obtain your access token in a different way.

When Facebook loads your application in the IFRAME, it sends you application a Signed Request, or in other words and encrypted string contain data about the user who is viewing your Page Tab. This tells you thinks like their Facebook ID, if they are an admin of the Page hosting the Page Tab and if they have Liked the Page.

This also contains value named “oauth_token”. Is it this value that you use as your access token when making requests for data for the user who is viewing your application.

Note: to use this, the user still has to have authorised your application to access your data, so you still need to use the Facebook application authorisation process.

You can read more about authentication and Page Tabs at this link, which also links you to a page that tells you how to decode the Signed Request:

https://developers.facebook.com/docs/authentication/pagetab/

How to host a Facebook app on Heroku

Heroku is a Cloud Computing service that has recently teamed up with Facebook to provide free hosting for Facebook apps as described here.

The default instructions that issue in relation to hosting apps are somewhat brief, and don’t really describe how you migrate an existing application to Heroku, so I’ve provided a bit more detail here.

If you want to host an app on Heroku, I’d advise following these instructions, rather than choosing the Heroku hosting option when setting up your app on Facebook. It will give you a better understanding of how Facebook and Heroku work together.

Create an Heroku account:

https://api.heroku.com/signup

As part of this you will have to authenticate yourself, which requires entering Credit Card details. Nothing is charged to your Credit Card, but you do need to enter them.

Install the Heroku Toolbelt on your local system:

https://toolbelt.heroku.com/

This will install the Heroku client, the software revision tool Git, and Foreman which is a tool for running apps locally (you only need the Heroku client and Git, however).

Make sure you have an OpenSSH public/private key pair which you can use

You can create one on any Linux system using ssh-keygen, or you can download PuttyGen for Windows which will also create a key pair for you.

Login to Heroku:

Change to the directory in which you application is stored and login to Heroku

prompt> heroku login

Enter you email address and password.

You should now be prompted to upload the public part of your public/private key pair. You can also do this manually, by issuing the command:

heroku keys:add

You can then check that it is uploaded by typing

heroku keys

Once this is done, you are ready to create your application

Initialise a git repo for your application

Before creating your application in Heroku, you need to create a local git repo for it. To do this, run the following commands from the directory in which your application is stored:

git init
git add .
git commit -m "initial checkins"

This will initialise the repo, add the contents of your current directory for tracking and commit the files to the repo

Create the Heroku application

Next, you need to create a Heroku application. Type the following command:

heroku create

Heroku will respond with the name of your application

You can also view the name of your application by typing

git remote -v

Add a MySQL addon to your application

(You can not do this unless your Heroku account has been authenticated)

You need to provide a MySQL addon if your application uses MySQL. ClearDB provides a basic, free addon called Ignite

You can add this by typing

heroku addons:add cleardb:ignite

Once this is added, you can find out the login credentials and DB details by typing

heroku config | grep CLEARDB_DATABASE_URL

(This is a Linux commmand. In Windows, just type heroku config and look for the values you require.)

You can then add these to your application configuration

Import your database

Using a MySQL command line client, import your DB schema into the DB provided by ClearDB

mysql -h cleardb_hostname -u cleardb_username --password=cleardb_password -D cleardb_database_name < path _to_dump_of_your_MySQL_database

Push your application to Heroku:

You are now ready to push your application to Heroku. Just type

git push heroku master

This will push your code to the remote git repository in Heroku and launch it on the hosting service.

You should then be able to access it at the URL you obtain from the command:

heroku info --app your_app_name

Configure your Facebook application:

The final step is to configure your Facebook application so that is uses the URL provided in the previous step. The URL serves both HTTP and HTTPS.

Making changes to your code:

If you need to make a change to a code file, do the following after you have edited the file:

git commit -am "Reason for change"
git push heroku master

If you have to add a file/directory, do the following:

git add
git commit -am "Reason for change"
git push heroku master

If you have to delete a file/directory, do the following:

git rm
git commit -am "Reason for change"
git push heroku master

Heroku guide

https://devcenter.heroku.com/articles/git

Facebook and Heroku hosting

Update: Full HOWTO instructions here

Creating customised content for Fan Pages has become a big deal for companies, large and small alike. Whether its a competition, a promotion or some sort of gimmick, the use of content to get a user to Like your Fan Page is now standard practice on the Facebook platform.

One of the challenges that many companies, particularly small ones, come up against in this regard, is the issue of hosting, in that content, typically presented on Fan Page tabs, has to be hosted somewhere.

Up until the middle of last year, this wasn’t too big a problem, in that most companies had access to basic hosting by using the same same service that their website was hosted on.

Then, Facebook decided to make it a requirement that all Tab content by hosted on secure links, which meant that if you wanted to host content for a Tab, your hosting service had to be capable of serving content using the https protocol, which meant that you needed a digital certificate installed with your website.

This is something that isn’t needed for the vast majority of websites, so all those companies who had previously hosted their tab content on the same system as their website suddenly found that their hosting service was no longer suitably equipped to meet Facebook’s requirements.

There only option was to go off and pay some tech type to set up a digital certificate for them, which they would then have to renew at regular intervals, paying the tech type each time.

This obviously generated a bit of consternation in the Facebook user community, which finally provoked a response.

Facebook have teamed up with the Cloud Computing provider, Heroku, who offer basic Facebook-ready hosting services, for free, to anyone who wants to host content on a Tab on their Fan Page.

Sounds great, doesn’t it?

Well, all in all, it is, but the only problem is that it isn’t that user friendly.

Yes, when you set up your app on Facebook you have the option to set up Heroku hosting at the same time, but the process of actually publishing your content using that hosting is another matter altogether.

Also, the basic package is very basic. For instance, the database service that the provide will accommodate only 5MB of data. That’s probably fine for most short term promotions or competitions, but not for any sort of permanent app that is going to collect data over a period of time.

If you want more thrust, you’ve got to get your credit card out.

Anyway, its still a welcome development, so lets not be too cynical.

The basic mechanics of using Heroku are thus:

After you select Heroku as your hosting option when setting up your app, you will be guided through the process of setting up a Heroku account on foot of which you will receive an instructional email.

This will show you how to verify your account and give you basic usage instructions.

On Ubuntu, this involves downloading what is called the Heroku Toolbelt, which is a suite of shell tools that allow you to work with your Heroku hosting package.

The Toolbelt for Ubuntu and Linux in general is based on the version control system git, which allows you to update your code and push that code to the hosting server provided by Heroku.

When you create a Facebook application that use Heroku, Heroku automatically creates a sample application in your git repository. You can trial the tools by “cloning” that app to your local environment, updating it and then pushing it out to the hosting platform. This can seem a bit daunting at first, but it becomes pretty straightforward once you follow the tutorials and do it a few times.

Use of the Toolbelt is also based on OpenSSL public/private key encryption, which means one of the first things you have to do is upload a public key to the Heroku system. Heroku presumes that you’ve only ever created one public/private key pair, so if like me you have multiple pairs, you will need to create a .ssh/config file that ensures that Heroku is presented with the correct private key.

Using databases is also a bit of a challenge.

Heroku provides access to a Postgres database instance for each application you create, which is a bit odd, given that 99.9% of Facebook apps are created with MySQL.

Heroku tells you that most of your MySQL code will work with Postgres, but the word most is never very comforting, so if you want access to a genuine MySQL system, you will need to use what Heroku refers to as an “add-on”, such as the add-on for the Cloud MySQL Db service, CloudDB.

To use this, you have to give Heroku your Credit Card number, but the basic Ignite service provided by CloudDB is free to use. Like Heroku, this gives you 5MB data storage.

Cloud DB is based in the Amazon EC2 Cloud Computing Environment in the US, which means that your MySQL instance is going to be at a remove from your hosting environment. This shouldn’t be an issue provided you aren’t transferring large amounts of data in/out of your database.

Once you set up the add-on, you’ll be given the username/password combo for the MySQL server you will be using, plus the hostname and the database name, which means you can login with the MySQL client or phpMyAdmin and manipulate in the normal fashion.

There’s a lot more detail to the use of Heroku that described above, and it isn’t for novices.

However, if you are a Facebook app developer, and you consistently get development requests from clients who don’t have access to digitally-certified hosting services, learning how to use Heroku will be well worth your while.