Mark Zuckerberg and a handful of senior Facebook Executives attended a special edition of the London Facebook Developer Garage on Monday.

Their arrival signifies the start of a European expansion in conjunction with the continued push for developers and sites to adopt the Open Graph Protocol. At the event a number of interesting statistics were announced by Zuckerberg and the other executives.

The major announcement was that Facebook has now reached 26 million unique users in the UK. Also announced was 50% of all “Likes” originate from within Europe, which is about 50 million out of the reported 100 million likes so far, an early indicatator of the popularity of the Social Plugin platform released at f8 a few months ago.

Mark Zuckerberg talking about the new Facebook Open Graph API in London

During his introduction Mark Zuckerberg talked about the interesting applications that he’d seen at the Facebook Hackathon the previous day, and reiterated what was said at the f8 conference, how important the Open Graph and Social Plug-ins are to enable social experiences across the web and how easy it is to implement. He also talked a bit more about the Instant Personalisation feature that has recieved so much critisism in recent weeks, explaining that the reason for it is to allow users to have a seamless and frictionless social expericence while browsing other sites than Facebook, removing the need for them to “Connect” or “Login” to Facebook in order to see a the site in a social context.

Mark Zuckerberg talking about the new Facebook Open Graph API in London

After Zuckerberg’s keynote several high profile partners were brought on stage to discuss their success stories on the Facebook Platform, amongst them was Gustav Söderström, VP of Products from Spotify about how they used the platform to create a new generation of social music application.

Mike Vernal, Platform Engineering Manager

Mike Vernal spoke about all the new technology innovations in the Graph API and the Social Plugins, he talked about the evolution of the platform and a number of other things to help developers understand the latest offerings from Facebook.

Joanna Shields, VP of Sales and Business Development, EMEA

Joanna Sheilds has recently taken on the role of Sales and Business Development in Europe, she spoke about how important it was for Facebook to continue it’s expansion in the EU and talked about the ways they will be engaging with the developer community to help the platform grow.

Mark Zuckerberg, Ethan Beard and Mike Vernal chatting in the Q&A

At the end Mark Zuckerberg, Ethan Beard, Mike Vernal and Joanna Shields sat and answered questions from the room full of press and developers, amongst the topics talked about was the new “Credits” system that Facebook has been testing with a select number of partners such as Zynga and PlayFish, all they revealed was that they are working on fine tuning the payment methods to make it as frictionless as possable to end users and that they would be talking more about it in the coming months, they did say however that eventually the Credits platform will be open to all developers to use in their applications.

In response to a question about a Location API and a set of services built around a users Location Zuckerberg simply answered that they were working on their Location services but offered no timeframe for when we will begin to hear more about them.

Zuckerberg was also asked about the 5,000 friend limit on all Facebook accounts, to which he explained that it was not high on the development list since not very many people had over 5,000 friends in real life, and explained that the reason for the limit in the first place was due to people with high volumes of friends having a poor experience due of the sheer amount of friend data that needed to be processed on each page request.

The event marked a good turning point for all European based Facebook Developers and it will be good to see more of a Facebook presence outside of their Palo Alto offices in California.

This post has been tagged: Facebook, Hackathon, Social Media, Technology, Web Development

On Sunday a few friends at Miniclip and I attended the Facebook Hackathon 2010, during which it was our task to develop a Facebook Application using the new Graph API in a little under 6 hours and have it judged by Mark Zuckerberg Ethan Beard and Mike Vernal from Facebook.

Our application, codenamed “MiniPlay”, allows users to place themselves at the centre of the gameplay by giving them a number of short and engaging games using their friends as characters, the more games they play, the more games they unlock, and the more awards they get. Unfortunately by the end of the evening we only got about 75% of the way through the first game, but managed to create a framework to allow us to easily add games to the application. Whilst we were hacking away Zuckerberg came around to have a chat about what we were doing and wanted to know what we thought of the platform in general, and where they could improve.

At the end of the Hackathon we all had to present the application to Mark Zuckerberg, I drew the short straw to demo the application in front of the Facebook Executives and a room of about 60 other developers, it was quite a surreal experience having the attention of one of the industries most influential thinkers for a few minutes.

The best 3 applications would get a chance to demo their apps on stage at the Developer Garage the next day, but unfortunately, as much as Mark seemed to be really into social gaming, we didn’t make it into the top 3.

Even though our application didn’t get into the top 3 it was a great experience and gave us all some ideas about how to leverage the Graph to build better, and more social applications.

MiniPlay game selection screen

Buddy Lineup Game

The Team Miniclip Room

Ben being interviewed by the resident Developer Garage film crew

Mark Zuckerberg hanging around for a chat before the presentations

Simon and Ben relaxing before the final demo

This post has been tagged: Facebook, Hackathon, Social Media, Web Development

Since Facebook’s announcement of the Open Graph Protocol and Graph API at the f8 conference a few weeks ago it has been time to re-read the Facebook Documentation and try to work out how the new API’s fit into a few personal and work projects.

As part of that research I decided to fill a void in my development time – I’m forever trying to find the Facebook User ID of the user I am currently logged in as – and it doesn’t help when you have 10+ testing accounts, plus my own personal account.

So I threw together this:

Myfbid.com allows you to login (Using the Facebook OpenGraph API) and it will immediately show you your current Facebook User ID, you can logout and login again with a different account and it will do the same for that one.

No personal data is collected or stored during the process – it simply looks up your User ID and shows it on the page.

Over time I will add some more features, the ability to see your Friends User ID’s perhaps and some other cool things that will help developers.

Hope some people find it useful!

This post has been tagged: Facebook, Social Media, Web Development

I’ve been doing Facebook development for a while. In the beginning I found myself searching around for answers, this post is aimed at people like me who are searching for some helpful tips on Facebook Application Development. This post deals with some technical and non-technical aspects of Facebook Development that I came across and is by no means exhaustive.

If you’re looking for speed, then you’re going to be very disappointed, the Facebook API certainly isn’t the fastest thing on the planet – it doesn’t take many API calls to get the page to load in 4+ seconds, added to that any additional overhead and you can quite easily hit the 8 – 9 second timeout limit. To try and overcome this I have a few tips that have helped me speed up the process a little:

1. Less is more!

The old saying is true, sometimes the less you do something, the better it is. The same goes for the Facebook API – the more you make API calls the slower the page will be.

Some of the common causes that I have found is calling the API inside a loop, not only does this have the potential to create hundreds of requests, but it also will cause a noticeable performance hit, so looping through a user’s 350 friends to get their names isn’t the best way to get things done.

If at all possible try and limit the number of API calls per page, there are usually FBML tags that do things a lot faster than calling methods on the API.

2. Batch API Calls

For situations where many API calls are unavoidable, try using the Batch API. By doing this you will save quite a lot of overhead by requesting all the data in one large chunk, and not in multiple little pieces that take longer because of the time taken to transfer the data. Depending on the usage you will see a relatively big performance increase by using this method.

$facebook->api_client->begin_batch();
$friends = & $api_client->friends_get();
$notifications = & $api_client->notifications_get();
$facebook->api_client->end_batch();

3. Cache

While you aren’t allowed to store a user’s data forever you are allowed to store it for up to 24 hours. In addition to this there is some data that you are allowed to store, for a full list take a look at the Storable Data documentation. One of the biggest things is to decide if any of the allowed storable entities would save you an API call or two, and then see if replicating some of the data in your own databases would lead to better performance.

4. Quick Transitions

For me this was perhaps the most noticeable performance boost of them all, and it was only be chance that I discovered it. To see for yourself:

1. Go into the Developer App
2. Go to your application settings
3. Click on the canvas tab
4. At the bottom there is an option called “Quick Transitions” – turn it on.

5. General Optimisations

I maybe stating the obvious but it’s worth saying just in case.

All the optimisations above will help speed up your application, but the most important thing to do is to make sure ALL your code is as optimised as it can be, not only PHP, but also the markup and CSS, theres no point in making the API calls as efficient as possible if the app is just going to sit there for a few seconds while it decides what to do with it.

There’s not much I can really say about how and what to optimise, but I did find the following code useful to check the page execution times:

$start = microtime(true);

// Do stuff in here

$end = microtime(true);
$time = $end - $start;
echo "Done in $time seconds";

Use this code to test the execution time of the page or a certain function or method call.

Conclusion

Happy Performance Tuning!

This post has been tagged: Facebook, Web Development

I’ve been doing Facebook development for a while now. In the beginning I found myself searching around for answers, this post is aimed at people like me who are searching for some helpful tips on Facebook Application Development. This post deals with some technical and non-technical aspects of Facebook Development that I came across and is by no means exhaustive.

1. Plan Ahead

Like all web applications, the first place to start is the drawing board. This will not only allow you to work out what is needed, but it also helps you make the choice between using FBML Canvas or an Iframe not to mention getting everything into perspective before you start. There’s nothing more annoying than getting half way through an implementation and realising some of what you’ve done needs changing.

Part of the planning should include (despite how boring it sounds) reading the Platform Guidelines which now also include an Example and Explanations section detailing some of the policies for the most important Facebook Platform features – not only will this help you deliver a good experience to your users but it could save you a lot of problems further down the line.

In addition to the Platform Guidelines I would also advise reading the Storable Data documentation to see what kind of user data you are allowed to store, as this will have a significant effect on what your app might be able to do.

2. Canvas or Iframe?

The answer to this question depends on what you want your app to do.

If your app will rely heavily on the Facebook API & FBML features then a Canvas page is almost certainly your best option, on the other hand if you simply want to take some content from an existing site and display it in Facebook with minimal API interaction then an Iframe would probably be an easier option, of course these are vast generalisations so give it some thought before you code against one or the other.

A good document to read to help you decide is the Choosing between an FBML or IFrame Application page in the developer documentation.

3. Dealing with external files

Ok, so you’ve chosen to use the canvas for your application. Now you want to start by including an external stylesheet, but wait, you can’t get it to work… now what?

Because Facebook canvas pages are parsed by Facebook before they are displayed they don’t need head tags (since there’s already a valid HTML structure), this means that including stylesheets can be tricky. The best way is to use PHP to read the stylesheet and output it into the page upon each request, a poor man’s include if you will. To do this you have to use the file_get_contents() function in PHP like this:

file_get_contents('http://www.somewhere.com/style.css')

Of course you could just do everything on the page, which is fine for a single page app, but not if you’re going to have more!

4. Create a Landing Page

Originally part of the Application Verification process was the requirement that users are not met with the “Application Add” dialogue as soon as they go to the canvas URL, now since the Verification process has now been scrapped and all applications are held to this it’s a good idea to do it anyway, even if it’s just to improve the user experience.

The best way that I have found to accomplish this is to check to see if the Facebook user ID is set on every page and then send the user to a permissions page if it is not. Because of this you can no longer use the Facebook::require_login(); method as this will automatically display the “Application Allow” dialogue, instead I use:

$this->_user_id = $facebook->api_client->get_loggedin_user();

if(!isset($this->_user_id)){
$facebook->api_client->redirect("http://apps.facebook.com/appname/permission/");
}

This allows your application to send the user to a landing page with a nice graphic and an explanation of the application before they have to add it.

5. Publish to the News Stream

One of the most powerful tools at a Facebook developer’s disposal is the News Feed – the constant stream of updates that the user gets about their social graph. Not only does it give you the chance to drive traffic to your application but it also provides a useful communication tool.

Publishing to the Stream couldn’t be easier:

$message = "Hello World! This is a test of the Publish.Stream Method";
$facebook->api_client->publish_stream($message);

Be aware that the Publish.Stream method requires that the user accept the publish_stream permission as described in the Extended Permissions documentation.

6. Use the Multiple Friend Selector

Get your users to invite their friends by using the <fb:multi-friend-selector> FBML tag, the message you send to the users friends is completely customisable and you can even add an email invite box underneath. You can get the full list if parameters and options by reading the Fb:multi-friend-selector documentation.

Using this feature will allow you to tap into the users friends and increase your user base, if a user likes your application they will invite their friends. To encourage more users to do this try and build in more ‘social’ aspects, make their friends a part of the main focus of the application.

7. Use the API Redirect Method

It is sometimes useful to redirect a user to another page depending on certain criteria or after a certain action, one would normally just use the header();PHP function, but this isn’t possible when making an app for Facebook.

To make this happen take a look at the Facebook::redirect() method if your using the PHP library or the <fb:redirect> FBML tag if you’re not.

8. Testing Testing Testing

Before you release your app make sure you test everything over and over again. It’s not good enough to just test it with one user though, create multiple Facebook user accounts, test the app from end to end, from adding the app to removal, everything needs to be tested!

Make sure you read the Facebook Test Accounts documentation to make sure that Facebook doesn’t delete your accounts, this involves adding the users to the “Facebook Testing Account Network” to identify test accounts from real ones.

Also remember to test in multiple browsers, if you’ve used CSS or any FBJS then it’s important that your users get a consistent experience no matter what browser they use – and since Facebook also supports IE6, it’s probably going to be beneficial for you to as well, no matter how painful the process is!

If you’re using Windows you can use the Microsoft IE Virtual PC images to test your application in IE6 and 7, or you can use the free Microsoft Expression Web SuperPreview for Internet Explorer tool to do the same thing.

9. It seems a little slow, any ideas?

One thing you will need to learn is that Facebook is almost always never fast, at least not loading pages.

There are a few things that I have done to help speed things up. The first is to reduce the amount of API calls made by the application, that way you won’t need to wait as long for the API to send you data before you can load the page. Another way is to add some kind of caching, this could either be done in session or in a database.

One of the first things I do however is enable the “Quick Transitions” option in the Application Canvas settings of the Developer App, this speeds up the page loading time significantly as it doesn’t reload the Facebook frame on every page load – this could cause issues somewhere along the line however I have yet to see any side effects of using this option.

10. It’s launched, now how do I add new features?

Oh the memories, needless to say I’ve been burned by this before, first things first – NEVER develop on the live app, you will break things and your users will get annoyed and go away (I’m sure you know this already).

My advice is to create a separate Facebook Application with separate API Keys that points to a completely separate copy of the code so you can break as much as you want without annoying anyone.

Conclusion

This post should give you a bit more information about Facebook Application Development, but it is by no means an a-z guide, as with almost everything, the best thing to do is to go and give it a go yourself!

This post has been tagged: Facebook, Web Development

Last month I attended the Facebook Developer Garage in London with two of my colleagues from Miniclip, of course what we didn’t realise is that it was being recorded - not until we arrived at least. Below is a one of the videos taken of the Pizza / Beer session of the conference – we were caught on camera from around 48 seconds in – but luckily didn’t get interviewed!

The moral of the story is this: No matter how hard you try to hide from the people with the camera, they always get you in the end…

Overall the evening was quite enjoyable, and we came out with some ideas for future / current projects, and of course it was interesting to see what the big guys like ITV and VCCP are doing with social media and Facebook specifically.

 The full post can be seen on the Facebook Developer Garage London Blog including videos of the talks by Ben Ayers from ITV, Buster Dover from VCCP and Iskandar Najmuddin from Nudge.

This post has been tagged: Facebook, Web Development