Facebook Connect is the next evolution of Facebook Platform — enabling you to integrate the power of Facebook Platform into your own site. (http://www.facebook.com)
That’s pretty much what it does. Facebook Connect enables your own website to retrieve Facebook user identity, authenticate trusted users against your own application realm and use Facebook APIs to interact with other Facebook users or applications.
Let’s have a look at the comment box sample which can be found on the Facebook Connect developer site. Login to your Facebook account and create a new application. Set your application name and click save. You then need to remember the API Key on the next page as this will identify your application on your own site. Click on the Connect tab and enter the Connect URL. I put http://arauser.org here. That’s it.
Next you need to enable cross domain scripting or a Cross Domain Communication Channel. Therefore you need to setup a communication channel between your website and the Facebook API. The way this is accomplished is pretty straightforward using Facebook Connect. You simply create an HTML file named xd_receiver.htm with the following content and save it on your webserver.
<!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" > <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script> </body> </html>
In this sample the file will be located at http://arauser.org/media/connect/xd_receiver.htm together with the other required files.
What happens is that the Facebook JavaScript client library will create an IFrame which points to the Facebook API. Using this technique we can communicate with the Facebook API across different domains.
Now we are ready to setup our page. We need a reference to the JavaScript API inside the body of the page and add 2 XFBML tags. The tags will be replaced by the client library with the login button and user profile picture once logged in. Facebook Connect does all this work for us.
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <div id="login"> <fb:login-button onlogin="facebook_onlogin();"></fb:login-button></div> <div id="user"> <fb:profile-pic uid=loggedinuser facebook-logo=true size=square></fb:profile-pic></div>
We initialize the client using the FB.init method which takes our API Key, the location of our xd_reveiver.htm file (relative to the root of our app) and the reference to the function we want to call once the user has logged in. We use some JQuery to show the profile picture and hide the login button.
<script type="text/javascript">
FB.init("aa5abd036462dc65df4b52dfd7ec2d59", "xd_receiver.htm", {"ifUserConnected" : facebook_onlogin});
function facebook_onlogin()
{
$('#login').hide();
$('#user').show();
}
</script>
Almost done. We only need to add the comments tag to render the comments box which is one of the widgets you can use with Facebook Connect.
<fb:comments xid="arauser.org%2Fmedia%2Fconnect" numposts="10" title="Facebook Connect Sample" simple="1"></fb:comments>
Take a look at the xid which is set to the applications URL. The xid is used to create a unique id for the comment box instance. If you don’t set the xid the application will use the URL of your application including parameters. This means if you use URL paramenters it will create a new instance for each set. In other words: index.html?foo=1 & index.html?foo=2 will create 2 different comment collections.
That’s it. You can test the application here or download the files.
