A little while ago my sister approached me with an idea which requires a Facebook app. I’ve never written a Facebook app before, so I stocked up on books, read a little, and got stuck in.
What a complete waste of time. It seems that the Facebook development system is a little fluid. Nothing I learned worked, and the books would have been more useful if I had used them as substitute loo roll. I was not happy. So I decided to approach this as a bodging challenge, and just muddle through. What follows are my rough notes so that I can create a new Facebook app easily in future (prettied up a little so that they’re readable). If you find them useful too then that’s wonderful. If you don’t then please let me know how I can improve them. I make no promises that Facebook won’t change its procedures again, nor do I promise to notice if they do. If you spot any anachronisms in these instructions, please let me know so that I can update them.
What you need to get started
- a web site. The code for your app will be hosted on your own web site.a facebook account just for mucking about with. Some say that you can muck up your ‘real’ account by developing on it, where ‘muck up’ means losing all your contacts. I suspect that this might not apply with today’s Facebook developer tools, but I’m not about to take the risk.
- the Facebook developer app. You can install the Facebook developer app by visiting https://www.facebook.com/developers/ and clicking ‘Set Up New App’. Tutorials are available at http://developers.facebook.com/docs/ but they didn’t seem to help me much or, indeed, work.
- a sense of humour. I’ve found so many dead links on the Facebook developer site that I almost wonder if they’re considering phasing out the technology. Plough on. You’ll get there in the end.
What I’ve assumed
- you’re familiar with HTML and PHP.you know your way around Facebook.
- you’ve got a good text editor (I like TextWrangler)…
- …and a good FTP package (I’m using Transmit at the moment).
Getting Started
If you haven’t already done so, set up your first app by visiting Facebook Developer and clicking ‘Set Up New App’. If you’ve done this already, perhaps when attempting to create another app, you can get back to the Facebook develop app by clicking ‘Apps’ in the left hand bar, and then clicking on the Developer app.
Accessing the Developer app in this manner will display a list of Apps that you’re working on, and information that the Facebook guys think will be of interest to you.
You now have the opportunity to name your App. Your App name doesn’t have to be all one word – you can have spaces, numbers and (I think) some punctuation. You’ll also need to agree to the Facebook terms and conditions. It’s just the standard stuff really, sell your soul to Mark Zuckerberg etc etc. Once you’ve agreed, you’ll need to pass a CAPTCHA security check – just to prove that you’re human. I passed – although I’m still not entirely certain how.
Once you’ve passed the humanity check, you’ll be presented with a form covering various aspects of your App. I’m going to ignore it. It’s not code, so I’m not very interested. Doubtless, when I get more experienced, I might play with this form at this stage – but for now I’m going to save it for later. For now, click ‘Back to My Apps’
You’ll now see a screen listing all the Apps that you’ve created in Facebook. If you’ve created more than one, click on the one that you’re using for this tutorial in the left hand bar.
Take a note of the Application ID and the App secret. You’ll need this for your code.
Having done this, you will now need to download some pre-prepared files from Facebook. These are all conveniently zipped up and the instructions for downloading them can be found by clicking the ‘Get started quickly with some example code!’ link. It all seems very *nix heavy. I approve!
Most of this we can ignore quite safely. In fact, the only bit that I care about is in the /src directory.
In the interests of neatness, you will also need to create an include.php file containing your secret and your API key. Mine looks like this:
<?php require_once './src/facebook.php'; // Create our Application instance. $facebook = new Facebook(array( 'appId' => '239896462690066', 'secret' => '88bea00374e6bb16b788752f1172d395', 'cookie' => true, )); ?>
Going through it line by line:
The require_once tells our program to include the facebook.php code. If you try to re-include facebook.php later then it won’t be – because you only require it to load once. Natch. The path that you use depends on how you’ve laid out your website. I’m not going to explain how paths work here – if you don’t know then O’Reilly do some very good books on learning Unix.
The ‘new Facebook’ is an instruction to instantiate a new Facebook app, using the credentials supplied. The cookie parameter allows it to create a cookie on the users hard drive.
Finally, you will need to create the code for your app. The root for this will always be called index.php. In the interests of keeping this tutorial simple, I’ve just created a “Hello World” app. Imaginative, no?
<?php require_once 'include.php'; ?> <h1>Hello World</h1>
Having created these files, upload them to the directory of choice on your website using your favourite FTP program. I used to be a fan of Cyberduck (free), but now I’m a heavy Transmit user. After uploading, my directory structure looks like this:
I have no idea what fb_ca_chain_bundle.crt is for. I suppose I might find out later. It’s a certificate – but more than that I cannot say.
Now return to the Facebook developer app. Click on the Edit Settings link, and then the ‘Facebook Integration’ link.
You’ll need to fill in Canvas URL (because that’s the link to the code that you’ve just written). You’ll also need to give your App a unique Facebook URL – this name doesn’t refer to any page or code that you’ve created already. With the unique Facebook URL you aren’t allowed anything other than lowercase letters. If you provide an invalid name then the Facebook developer app with respond with a bunch of error messages. Work through them and eventually your App will be created successfully.
Once your App has been created, return to the Facebook Developer app. Click on the Edit Settings link, and then the ‘Facebook Integration’ link. You may need to fill in, or correct, the Tab URL – and you’ll definitely need to give your Tab a name. Save your changes.
Now. The moment of truth. Try to run your application. You do this by returning to the Facebook developer app, but this time you’ll need to click on the Application Profile Page link. At the top of the screen you will see a link encouraging you to ‘Go to app’. Do it. This will run your App. Hopefully it will work first time – but it may not. In my case it didn’t because I needed to install the the CURL PHP extension. If you’re in the same boat, install any missing extensions and then try again.
Useful Resources
Ignore the Facebook books. They’re hopeless. Facebook is evolving too fast for paper based media to keep up. Instead, get yourself some good books on PHP, HTML and, if you want to muck around with data (you probably will), MySQL.
In Future
I am going to flesh out my app to be a little more useful. As I do so I’ll add more to my Facebook notes. So check back occasionally.