- \n
- a web site. The code for your app will be hosted on your own web site.a facebook account just for mucking about with. \u00a0Some say that you can muck up your ‘real’ account by developing on it, where ‘muck up’ means losing all your contacts. \u00a0I suspect that this might not apply with today’s Facebook developer tools, but I’m not about to take the risk.<\/li>\n
- the Facebook developer app. \u00a0You can install the Facebook developer app by visiting https:\/\/www.facebook.com\/developers\/<\/a> and clicking ‘Set Up New App’. Tutorials are available at http:\/\/developers.facebook.com\/docs\/<\/a> but they didn’t seem to help me much or, indeed, work.<\/li>\n
- a sense of humour. \u00a0I’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. \u00a0You’ll get there in the end.<\/li>\n<\/ol>\n
What I’ve assumed<\/span><\/strong><\/p>\n
- \n
- you’re familiar with HTML and PHP.<\/span>you know your way around Facebook.<\/li>\n
- you’ve got a good text editor (I like TextWrangler<\/a>)\u2026<\/li>\n
- \u2026and a good FTP package (I’m using Transmit<\/a> at the moment).<\/li>\n<\/ol>\n
Getting Started<\/strong><\/p>\n
If you haven’t already done so, set up your first app by visiting Facebook Developer<\/a> and clicking ‘Set Up New App’. \u00a0If 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.<\/p>\n
![\"\"](\"http:\/\/62.253.218.153\/~rpmsoft\/45rpmdump\/wp-content\/uploads\/2011\/06\/Screen-shot-2011-06-22-at-20.38.47.png\" "\\"Screen")
<\/a><\/p>\nAccessing 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.<\/p>\n
\n<\/a>
![\"\"](\"http:\/\/62.253.218.153\/~rpmsoft\/45rpmdump\/wp-content\/uploads\/2011\/06\/Screen-shot-2011-06-22-at-20.36.03.png\" "\\"Screen")
<\/a><\/p>\nYou now have the opportunity to name your App. \u00a0Your App name doesn’t have to be all one word – you can have spaces, numbers and (I think) some punctuation. \u00a0You’ll also need to agree to the Facebook terms and conditions. \u00a0It’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.\u00a0I passed – although I’m still not entirely certain how.<\/p>\n
\n![\"\"](\"http:\/\/62.253.218.153\/~rpmsoft\/45rpmdump\/wp-content\/uploads\/2011\/06\/Screen-shot-2011-06-22-at-20.50.42.png\" "\\"Screen")
<\/a><\/p>\nOnce you’ve passed the humanity check, you’ll be presented with a form covering various aspects of your App. \u00a0I’m going to ignore it. \u00a0It’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. \u00a0For now, click ‘Back to My Apps’<\/p>\n
\n![\"\"](\"http:\/\/62.253.218.153\/~rpmsoft\/45rpmdump\/wp-content\/uploads\/2011\/06\/Screen-shot-2011-06-22-at-20.53.50.png\" "\\"Screen")
<\/a><\/p>\nYou’ll now see a screen listing all the Apps that you’ve created in Facebook. \u00a0If you’ve created more than one, click on the one that you’re using for this tutorial in the left hand bar.<\/p>\n
Take a note of the Application ID and the App secret. \u00a0You’ll need this for your code.<\/p>\n
\nHaving done this, you will now need to download some pre-prepared files from Facebook. \u00a0These 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. \u00a0It all seems very *nix heavy. \u00a0I approve!<\/p>\n
![\"\"](\"http:\/\/62.253.218.153\/~rpmsoft\/45rpmdump\/wp-content\/uploads\/2011\/06\/Screen-shot-2011-06-22-at-21.09.27.png\" "\\"Screen")
<\/a><\/p>\nMost of this we can ignore quite safely. \u00a0In fact, the only bit that I care about is in the \/src directory.<\/p>\n
\nIn the interests of neatness, you will also need to create an include.php file containing your secret and your API key. \u00a0Mine looks like this:<\/p>\n
<?php\r\nrequire_once '.\/src\/facebook.php';\r\n\r\n\/\/ Create our Application instance.\r\n$facebook = new Facebook(array(\r\n 'appId' => '239896462690066',\r\n 'secret' => '88bea00374e6bb16b788752f1172d395',\r\n 'cookie' => true,\r\n));\r\n?><\/pre>\n
Going through it line by line:<\/p>\n
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. \u00a0I’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.<\/p>\n
The ‘new Facebook’ is an instruction to instantiate a new Facebook app, using the credentials supplied. \u00a0The cookie parameter allows it to create a cookie on the users hard drive.<\/p>\n
\nFinally, you will need to create the code for your app. \u00a0The root for this will always be called index.php. \u00a0In the interests of keeping this tutorial simple, I’ve just created a “Hello World” app. \u00a0Imaginative, no?<\/p>\n
<?php\r\nrequire_once 'include.php';\r\n?>\r\n<h1>Hello World<\/h1><\/pre>\n
\nHaving created these files, upload them to the directory of choice on your website using your favourite FTP program. \u00a0I used to be a fan of Cyberduck<\/a> (free), but now I’m a heavy Transmit<\/a> user. \u00a0After uploading, my directory structure looks like this:<\/p>\n
![\"\"](\"http:\/\/62.253.218.153\/~rpmsoft\/45rpmdump\/wp-content\/uploads\/2011\/06\/Screen-shot-2011-06-22-at-21.38.37.png\" "\\"Screen")
<\/a><\/p>\nI have no idea what fb_ca_chain_bundle.crt is for. \u00a0I suppose I might find out later. \u00a0It’s a certificate – but more than that I cannot say.<\/p>\n
\nNow return to the Facebook developer app. \u00a0Click on the Edit Settings link, and then the ‘Facebook Integration’ link.<\/p>\n
![\"\"](\"http:\/\/62.253.218.153\/~rpmsoft\/45rpmdump\/wp-content\/uploads\/2011\/06\/Screen-shot-2011-06-22-at-21.51.58.png\" "\\"Screen")
<\/a><\/p>\nYou’ll need to fill in Canvas URL (because that’s the link to the code that you’ve just written). \u00a0You’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. \u00a0With the unique Facebook URL you aren’t allowed anything other than lowercase letters. \u00a0If you provide an invalid name then the Facebook developer app with respond with a bunch of error messages. \u00a0Work through them and eventually your App will be created successfully.<\/p>\n
\n - you’ve got a good text editor (I like TextWrangler<\/a>)\u2026<\/li>\n
- a sense of humour. \u00a0I’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. \u00a0You’ll get there in the end.<\/li>\n<\/ol>\n
![\"\"](\"http:\/\/62.253.218.153\/~rpmsoft\/45rpmdump\/wp-content\/uploads\/2011\/06\/Screen-shot-2011-06-22-at-21.56.14.png\" "\\"Screen")
<\/a><\/p>\n