Some time ago I had the good fortune to work with some developers on a Facebook application that was underperforming. Through a very robust investigation of the application, it was discovered that a large number of invalid requests were being passed to the server. It was the victim of a Distributed Denial of Service attack utilizing Facebook platform and a popular application to bring down the application.
Read the rest of this entry »

If you’ve spoken to me about development at any point in the past few months, you’d know I’ve become a big fan of CodeIgniter for quick application development in PHP. Any regular programmer will always look for ways to save time during the development process. If you happen to be developing a Facebook Connect enabled site, then a Facebook Connect library can help save some time. Thankfully Elliot Haughin has done just that for CodeIgniter developers.
Read the rest of this entry »

Are you still trying to figure out how to publish news feed stories from your Facebook Connect enabled website? Last night Dave Morin published a tutorial for developers to learn how to enable this functionality in a 10 minute tutorial. I’ve been receiving daily requests from individuals having trouble with their Facebook Connect development so hopefully this tutorial will be of assistance.
Read the rest of this entry »

When I started to implement Facebook Connect last week I thought it was going to be quick and easy, boy was I wrong. While Facebook Connect was working as it should, the problem that I ran into was a problem that many people have run into when developing plugins for Wordpress. If you have installed WP Cache, or in my case WP Super Cache, it’s pretty much guaranteed that you’ll have issues with displaying a user’s information after they login.
Read the rest of this entry »

Just recently at F8, Facebook announced the launch of the ability to integrate your website’s users with users inside Facebook through a technology they call Facebook Connect. Such technology enables your website’s users to login using their Facebook username and password, right on your site, and link their profile and friend information directly to your own site for display and access outside of Facebook. Once authenticated, your site can also make calls for those users (with their permission) back to Facebook, enabling an interesting viral opportunity for your website or brand. Facebook Connect is not live yet, predicted to launch in September of 2008, it is in Sandbox mode currently. (It’s very important to note that only developers of your Facebook Connect apps can currently login through Facebook Connect! When Facebook Connect goes live to the public anyone will be able to start using it.)

This post is intended to be a guide for developers looking to get started with Facebook Connect, or CIOs and CTOs with an interest to learn what Facebook Connect can bring to your company, and what resources will be needed to do so. This will be a basic howto on getting started in Facebook Connect.

Facebook Connect – How it Works

Facebook Connect is basically a series of libraries on top of the existing Facebook Javascript Client Library which enable any site on the web to allow a user to log into Facebook, right on the site itself (via a simple dialogue box that Facebook pops up), authenticate that user, and retrieve a session for that user right on the 3^rd party website. The session is set by enabling a series of cookies for the facebook.com domain that can be accessed via the Facebook API. Then, either using server-side APIs or the Javascript Client API, the developer can retrieve info about the user and their friends, just like they would through a Facebook App itself.

Each 3^rd Party website set up on the service requires an App to be set up on Facebook for the site, just as you would set up any other App on Facebook. The Callback URL is the base URL of the site you are trying to integrate Facebook Connect for, and your site must call Facebook Connect from that URL in order for it to work.

With simple Facebook Javascript Client code (which is just a snippet of Javascript you can place on any page), Facebook has also introduced “xFBML”, a standard of FBML designed to be placed on websites outside of Facebook. So, for instance, assuming you have his Facebook ID and you have the permissions to see it, you could just put <fb:name uid=”4”/> on your website and your website would automatically display Mark Zuckerberg’s name – the same works with <fb:profile-pic/> and almost any other FBML tag you can think of.

This code enables you to place a <fb:login-button/> tag on your website, which renders a simple Facebook Connect login button for your users to authenticate to Facebook with.

Facebook then sends successful requests to a FB.Facebook.get_sessionState().waitUntilReady() Javascript method call, in which you can place other Javascript code to handle the request after that. Such code could be an AJAX request to update your database with the authenticated user’s Facebook ID, or anything else you might need to do with that user after they log in. (Keep in mind that Facebook limits you to what you can and can’t store in the database)

Figure 1 - Graphic courtesy Facebook

Facebook’s Sample Apps

There are 2 snippets of sample code that Facebook provides for you to download and look over. One is a full-featured app, called “The Runaround”, written in PHP that shows most of the features Facebook Connect provides. You can see it in action at http://www.somethingtoputhere.com/therunaround/. Then, download the code and see how it works at http://www.somethingtoputhere.com/therunaround/demo.tgz.

The other sample Facebook provides is a much more simple series of static HTML files that each perform a different function. The first is a very basic implementation of Facebook Connect, showing what the login flow would look like with a simple <fb:login-button/> login button implementation and simple API call back to the server via the Facebook Javascript Client Library to get a list of the user’s friends and popup with that list of friends in a javascript alert() box.

The second shows the power of the Facebook Javascript Client Library running on your own website by allowing you to use xFBML right in the source of your page to render different things. Such tags featured are <fb:name/>, <fb:profile-pic/>, <fb:eventlink/>, <fb:grouplink/> and <fb:pronoun/>. It’s a great example showing that just about any FBML tag can be used on an external website that incorporates Facebook Connect.

The third example delves a little further by showing how you can display simple friend selectors and invite forms by utilizing <fb:serverfbml/> to render them. (The <fb:request-form/> tag must be rendered from Facebook’s servers and this takes care of that)

Set up of the static HTML demos is as simple as going to Facebook, setting up an App under the callback URL of the domain you will be hosting them under, and entering your API key in the place specified in the source HTML. Beyond that you just need to place the provided xd_receiver.htm file in the place specified in the HTML and you’re all set to try it out! You can download the static HTML demos at this link.

Simple “Hello Friends” for Facebook Connect

Let’s give this a try on your own site. To start, you need to create an App within Facebook. You’ll need to add the Developer app to your account at first (I suggest you purchase my book, FBML Essentials, if you would like to learn how to do this). Then, (we’re going to go by the new Facebook design for all of this since it will launch to all in just a matter of days), click on the “Applications” link at the top of your profile, and click “Set up New Application” in the top right.

After this, just name your App (I’m calling mine the “Stay N’ Alive” App), check the box saying you agree to the Facebook Platform Terms of Service, and then click the “Optional Fields” link. After this all you need to specify is a callback URL for your site. I’m specifying http://staynalive.com, which is where my files will be hosted. This should be the base URL of your site you will be calling Facebook from. After that, add any developers you would like to also be able to log in through Facebook Connect (this won’t be necessary when Facebook Connect goes live), and click “Submit”.

On the following page you’ll now have an API Key and Secret Key. For the purposes of our Hello Friends app we only need the API key – copy and paste this somewhere so you can access it later. Or you can always come back to this page through the Developer app on Facebook.

Now, let’s get to our sample website. To make your website work, you’ll need to start with some basic HTML – put this in a file like index.html. I used the following:

<html>
<head>

<title>Facebook Connect “Hello Friends” Example</title>
</head>

<body>

<p id=”hello”>Hello
World!</p>

<div>
<fb:login-button></fb:login-button>
</div>

</body>
</html>

In the example above we create a simple HTML page that when printed, says, “Hello World”. You might notice we added an FBML tag in there called <fb:login-button/> which right now doesn’t display anything in the browser. There’s nothing telling your web page what to do with that FBML, so it treats it like a normal XML tag. So, let’s add in some Javascript from the Facebook Javascript Client Library to tell it what to do with that:

<html>

<head>

<title>Facebook Connect “Hello Friends” Example</title>
</head>

<body>

<p id=”hello”>Hello World!</p>
<div><fb:login-button></fb:login-button></div>

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<script type="text/javascript">
  FB_RequireFeatures(["XFBML"],

function()
  {
    FB.Facebook.init("YOUR_API_KEY_GOES_HERE",

"xd_receiver.htm");
  });
</script>
</body>
</html>

Please note that you must insert the API Key you saved above from your application set up where I put YOUR_API_KEY_GOES_HERE.

To make it render the xFBML appropriately we added 2 new snippets of code. The first, we loaded the Facebook Javascript Client library, via http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php. You may want to set this as a configuration variable somewhere if you use it in PHP, as it could always change in the future.

Secondly, we added a bit of Javascript code. We call the FB_RequireFeatures() method from the Facebook Javascript Client Library we just loaded, and pass to it an array with one element, “XFBML”, and an anonymous function that calls FB.Facebook.init() with your API key and xd_receiver.htm. FB_RequireFeatures is a function that just loads the features from the Facebook Javascript Client Library that you will need, and then runs the callback, which in this case is the anonymous function you set. You have to call FB.Facebook.init() to specify what your API Key is (so Facebook knows which App it is referencing), along with the location of the cross domain scripting file, called xd_receiver.htm. You should also create the xd_receiver.htm file – it should simply contain the following code (which you can get from the demo files above):

<!DOCTYPE

html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>

<title>cross domain receiver page</title>
</head>
<body>
  <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.debug.js" type="text/javascript"></script>
</body>
</html>

Place the xd_recevier.htm file in the same location as the index.html file you created above (note that index.html can be called anything – you just need to know how to call it from your browser), and then load the page. Now you will see something that looks like this:

You’ll notice there’s now a pretty button rendered by Facebook for logging into Facebook Connect. If you click on it, a dialogue box will pop up, asking you to log in. If you log in, it will simply close the dialogue box and go back to the same page. (Please note that if it redirects to Facebook.com you are probably not listed as a developer of the App. As long as Facebook Connect is in Sandbox mode, you must be a developer of the App to log in via Facebook Connect!)

So, how do we get it to know that the user has logged in, and do something with that user? We just need to add one snippet of javascript in the FB_RequireFeatures callback function above. Make your FB_RequireFeatures Javascript look like this:

<script type="text/javascript">
FB_RequireFeatures(["XFBML"],

function()
  {
  FB.Facebook.init("YOUR_API_KEY_GOES_HERE", "xd_receiver.htm");
  FB.Facebook.get_sessionState().waitUntilReady(function()

{
  document.getElementById(“hello”).innerHTML =

“Hello Friends”
  FB.Facebook.apiClient.friends_get(null,

function(result, ex) {
  window.alert("Friends list: "

+ result);
  });
  });
});
</script>

In our revised example, we add a new function call, called FB.Facebook.get_sessionState().waitUntilReady(), which gets passed a callback function. In our case we just pass it an anonymous function. In this function, you can make it do whatever you want it to do after it recognizes the user is logged in. In our example we start by resetting the innerHTML of our “hello” element (which used to say “hello world”), and replace it with “Hello Friends”.

Following that we make a call to the Facebook client via Javascript to retrieve the logged in user’s friends list. We then do a javascript alert to list out the user’s friends list. Other things you could do in this callback could be a call via ajax to load some PHP code that does server side calls to the Facebook API. If you look at the RunAround App code it does this, as will our next example in this series which we will debut later. You could also send a mini feed story out to Facebook just as you would in the regular Facebook API – you can see once the user is logged in you can treat them just as you would any other Facebook user in a regular Facebook Application. If you want to get rid of the Facebook Connect button (pictured above) after the user has logged in, you can do that either via javascript and removing the button from your page’s DOM, or you could always include CSS that renders the .fb_login_ready class hidden. After the user is logged in, the class of the login button changes from fb_login_not_logged_in to fb_login_ready.

Now that you have all the above code in place, you should be able to have a user log in to Facebook right on your site, you should be able to render FBML right on your site, and you should be able to take a user’s credentials and retrieve information from Facebook about that user. You can now begin to understand the power of Facebook Connect – keep in mind that all this was performed in a static HTML file!

You can now access almost any API call that does not require a user’s secret key. Per the Facebook documentation, the only inaccessible API calls via the Facebook Javascript Client library are calls that set admin data or profile data. If you want to do this you will need to set your secret API key through your server.

You can start studying more on Facebook Connect at the Facebook Developers Wiki at http://wiki.developers.facebook.com/index.php/Facebook_Connect.

If you are a web developer you are probably extremely familiar with the javascript lightbox, a pop-up box which displays images and html within the confines of an overlay box. Facebook took lightbox usage to a whole new level but they’ve done so with an extremely clean design. If you are obsessed with clean design and want to do so easily, you might want to take a look at Facebox.

The library requires jQuery to use it but that isn’t really a big hurdle to installing it. I’ve included a screenshot of this lightbox below. It’s a simple way to make a facebook-like lightbox so check out Facebox if you are interested!

Facebook recently began sharing a lot of the details about their engineering practices on the Facebook engineering blog. Today they made a really big announcement from the development perspective: their Thirft software framework has been accepted into the Apache incubator. The Thrift framework solves one core problem: enable efficient and reliable communication across programming languages. There are also some really slick features built into Thrift.

One of those features is the interface. Rather than selecting to use TCP/IP or a standard I/O protocol or any other protocol, they determined that “Thrift code only needs to know how to read and write data. The origin and destination of the data are irrelevant; it may be a socket, a segment of shared memory, or a file on the local disk.” There is apparently an abstracted layer that takes care of the transport interface.

The Thrift framework enables applications and components to speak with each other no matter what language they are in. Currently Thrift supports C++, Java, Python, Ruby and PHP but may potentially expand to other languages as well. At Facebook, Thrift has been implemented for search and logging purposes and implementations so far have proven the framework to be extremely scalable.

If you’d like more information check out the Thrift whitepaper and also regularly check out the Facebook engineering blog.

Lately my friends in marketing and advertising have been asking me more and more about Facebook. Everybody knows they’re supposed to be using it, and a lot of people don’t know where to look to find consultants and developers. Their bosses ask them, and they ask me, and I recommend myself.. of course.

Facebook has solved this problem while sharing a piece of the pie with its devoted developers. They have set up a special marketplace for Facebook Platform developers to advertise their services, and they have pledged to send all potential development clients in that direction.

To be clear, this is no small opportunity for developers. It’s a massive market.

According to Dave Morin, Senior Platform Manager at Facebook, “Everyday the team here at Facebook talks with thousands of people, businesses, and some of the biggest brands worldwide who are looking to find contract development services, or developers to join their team. We’re planning on sending every single one of them to the Facebook Platform Marketplace, so the opportunity is huge!”

Those who realize just how important it is for brands to have a presence on Facebook will understand just how incredible it is that Facebook has setup an area for anybody to post ads for free, and that it plans to send customers there.

It will be very exciting for developers and potential clients alike, as it was pretty difficult to find a reputable coder if you were new to the game before. I would really like to see some sort of rating system and some requirements of legitimacy. I would absolutely hate to see it turn into a free, unregulated, unorganized freelance site with no individual accountability.

The only problem so far is that people looking for work seem to be posting in both categories (”developers wanted”, and “developers available”). Come on people.. play fair.

Kudos to Morin and the Facebook team. I’m sure I speak for the whole development community when I say “thanks!”

- Jonathan Kleiman

This morning Facebook announced that they are adding a Javascript animation suite for all Facebook developers. Given that Facebook uses FBJS instead of standard Javascript, they decided to develop their own library from scratch. After a few months of testing, the library is ready for public use.

As described in the animation wiki page, the new animation features are relatively robust. For those familiar with the scriptaculous library (as well as prototype), this new FBJS suite will appear familiar. The new library enables developers to modify page CSS, change the duration of animations and more. I think this new feature will be welcomed by developers.

As usual though when new features arrive, they tend to get overused. Just as the classic Javascript lightbox became overused within web design, I would imagine that these new animation features will become overused by application developers. If you see signs of this beginning to occur feel free to update us via the comments on this post or shoot us an email. If you’d like to learn more about adding animation to your applications, check out the wiki page.

Are you sick and tired of there being too many useless Facebook applications? Wish there were way too many? Well the EZ App Builder is here to grant that wish. The app exists to allow users to create their own applications in minutes with very little trouble, but ultimately it fails in its limitations.

Out of a lack of creativity I created an app that let’s you tell your friends you miss them to let you see what an app you can create looks like. While the instructions given to create your app are surprisingly clear, the EZ App Builder only lets you make one sort of app: the useless kind.

You’re limited to creating an application where users can do a thing to one another, such as tell someone they miss them, or some sort of poke, or the like. It does, however, allow you to easily take advantage of many of the viral tools Facebook offers.

The application that you create is adorned by 4 ads, one of which is your own: the rest belong to the parent application. One of the ads is incredibly poorly placed, right in the center, and reminds the user that the application was made by the EZ App Builder.

It’s definitely neat for a relative layperson to be able to make a custom application with ease. Given the limitations on substance, however, I will be very surprised if any of these simple applications gain any popularity in the long run. It’s relatively new, and they claim that new features will be rolled out shortly, so I think that the EZ App Builder is worth keeping an eye on.

-Jonathan Kleiman is the founder of Probook, Canada’s self-professed quintessential professional network, and CEO of CSSAGLOBAL, an offshore web and software development company based primarily in India and Canada.