Wether you are a developer that was hired to implement Facebook connect, or have a website of your own, you are gonna need to know how to quickly get this magic up and running. That’s why I decided to write a quick and dirty FB connect tutorial.
The following is just a quick and easy way to get you started with FB Connect. For more information visit http://developers.facebook.com/connect.php
1. Link up to the Facebook Javascript libraries by creating a cross domain communication channel from your server to facebook. All you have to do is create a file called xd_receiver.htm, stick it in your webroot and add the following code to it:
<!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>
2. Now that you gave facebook full access to your webs-server (just kidding), go ahead and intitialize the Facebook connect libraries by sticking this code snippet on any page you want to use FB Connect. Make sure to insert your API key and path to xd_receiver.htm. You now have access to all the Facebook Connect Javascript goodness you want. Here is the full FB Javascript reference: http://wiki.developers.facebook.com/index.php/JS_API_Index
Before </body> tag:
<script type=”text/javascript” src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php”</script>
<script type=”text/javascript”>
FB.Bootstrap.requireFeatures([“Connect”], function() {
FB.init(“<your API Key>”, “<path_to_xd_receiver>/xd_receiver.htm”);});
</script>
3. Now that you’re all connected try out this simple app that uses FBML (Facebook markup language) and Javascript FB Connect libraries to prompt a user to log in and displays info once this hapens.
<!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” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<body>
<div id=”user”>
Name: <input name=”name” ><br />
<fb:login-button length=’long’ onlogin=”update_div();”></fb:login-button>
</div>
<script type=”text/javascript”>
function update_div() {
var div = document.getElementById(“user”);
div.innerHTML =
“<p>”
+ “<fb:profile-pic uid=’loggedinuser’ facebook-logo=’true’></fb:profile-pic>”
+ “Hey, <fb:name uid=’loggedinuser’ useyou=’false’></fb:name>”
+ “</p>”;
FB.XFBML.Host.parseDomTree();
}
</script>
<script type=”text/javascript” src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” mce_src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php”> </script>
<script type=”text/javascript”>
var api_key = “Your API_key here”;
var channel_path = “xd_receiver.htm”;
FB.init(api_key, channel_path, {“ifUserConnected”: update_div});
</script>
</body>
</html>
Feedback is welcome! Thanks and hope this helps :-)
