content top
Google Buzz

How to Add Facebook Connect To Your Website in just 3 Steps

Posted by legacye in Web Development on 10 3rd, 2009 | 3 responses

 

fbcon

 

Many Social Networking sites allow users to authenticate through their APIs – this means that rather than needing to have a complete registration system on your site, you can simply allow users to authenticate with a third-party service and then grab their profile picture and name for use in your commenting systems or other scripts.  In today’s tutorial, I’m going to show you how to add the most popular of these services (Facebook Connect) to your website in 3 steps.

 

Step 1 – Setup a brand new Facebook Application

 

To get started you’re going to need a Facebook Platform API key for your site. Follow these steps to create an application with the Facebook Developer application.

 

  1. Go to http://www.facebook.com/developers/createapp.php to create a brand new application. You must be logged into Facebook to create apps.
  2. Enter a name for your application in the Application Name field.
  3. Accept the Developer Terms of Service, then click Save Changes.
  4. On the Basic tab (the first tab you’re taken to), keep all of the defaults in place. In the Connect tab enter a Callback URL. This URL should point to the top-level directory of the site which will be implementing Facebook Connect (this is usually your domain, e.g. http://www.site.com, but could also be a subdirectory).
  5. Make a note of your API Key and Secret Key, you’ll need them to access Facebook Connect.
  6. Optional: Whilst in the Connect tab you can include a logo that appears on the Facebook Connect dialog. Next to Facebook Connect Logo, click Change your Facebook Connect logo and browse to an image file. The logo can be up to 99 pixels wide by 22 pixels tall, and must be in JPG, GIF, or PNG format.
  7. If your site is going to implement Facebook Connect across a number of subdomains you need to enter a Base Domain (which would be example.com in this case). You an specify a base domain which allows you to make calls using the PHP and JavaScript client libraries as well as get and store session information for any subdomain of the base domain. For more information about subdomains, see Supporting Subdomains In Facebook Connect.
  8. Click on Save Changes.

 

Step 2 – Create a Cross-Domain Communication Channel File

You’ll need to create a cross-domain communication channel file called “xd_receiver.htm” and save it in a directory relative to the callback URL.
For example, if you’re using http://www.site.com/ as your callback URL, but you want to store your Facebook Connect files in their own subdirectory, say http://www.site.com/connect. You should create the “xd_receiver.htm” file in the directory from where you’ll be serving your Connect Web pages (http://www.site.com/connect in our example).

Below is an example of a cross-domain channel file:

 

<!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" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/

XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>

 

Important note: If you don’t have a cross-domain channel file present, Facebook won’t be able to communicate with your server correctly so make sure you don’t skip this step. You’ve also got the option of calling the file anything you’d like as long as you remember to change the filename mentioned in the FB.init method :)

 

Step 3 – The FB Connect JavaScript API Library

fbx

 

One of the easiest ways to begin using Facebook Connect on your site is through Facebook’s terrific JavaScript API. Include references to it. One of the essentials to connecting to the library and these are setting the correct document type as follows:

 

<!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">

and loading the Javascript library at the END of your webpage, near the </body> tag.

<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>

 

Always check the Facebook Developer page for the latest version of the Javascript Library.

 

Step 4 – A demo application using the JavaScript API Library

 

Here is a simple but effective example of how you can login a user to your Facebook Connect application and show their name and profile picture from Facebook.

 

fbe src="http://blarnee.com/wp/wp-content/uploads/fbe_thumb.jpg" width="292" border="0" />

 

 

<!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" size="27"><br />
<fb:login-button length=’long’ onlogin="update_user_box();"></fb:login-button>
</div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>"
+ "<fb:profile-pic uid=’loggedinuser’ facebook-logo=’true’></fb:profile-pic>"
+ "Welcome, <fb:name uid=’loggedinuser’ useyou=’false’></fb:name>"
+ "</span>";
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 = "API KEY GOES HERE";
var channel_path = "xd_receiver.htm";
FB.init(api_key, channel_path, {"ifUserConnected": update_user_box});
</script>
</body>
</html>

 

 

The FB tags you see here are XFBML (Extensible Facebook mark-up language) that you can learn more about here. You can easily extend this example to the comments or profile section of your website. To test this on your server, you’ll need to replace your API key in the code example.

 

You can download the Sources for this tutorial or view a demo.

 

and thats it!. I hope this tutorial has been helpful.

 

 

 

 

 

 

Bookmark and Share
Share

Related posts:

  1. How To Add Form Validation using jQuery in 2 Easy Steps     Hi everybody. Sometimes you may find yourself...
  2. How to develop a Web Application in 5 easy steps – A guide for web developers and businesses Having developed web applications for a few years now,...
  3. Creating a Facebook Application – a simple guide for PHP, JavaScript, Flex and Grails developers.  If you’re a web developer and you haven’t explored the...
  4. Creating a Facebook Application – a guide for PHP, JavaScript, Flex and Grails developers If you’re a web developer and you haven’t explored...
  5. jQuery UI Animation Effects The jQuery UI Effects Core brings a few more...

Related posts brought to you by Yet Another Related Posts Plugin.

3 Comments »

  1. avatar comment-top

    [...] This post was mentioned on Twitter by Web Development News. Web Development News said: How to Add Facebook Connect To Your Website in just 3 Steps:     Many Social Networking sites allow .. http://bit.ly/tOGKV [...]

    comment-bottom
  2. avatar comment-top

    Here's a tutorial that focuses on integrating Facebook Connect to an already existing dynamic site and covers topics like linking a user's Facebook Identity to their site identity.

    Facebook Connect Tutorial: http://www.goldsteintech.com/facebook_connect/tut...

    comment-bottom
  3. avatar comment-top

    i want to thank you for posting these helpful videos and story about how to connect blog with facebook.

    comment-bottom

RSS feed for comments on this post. TrackBack URL

Leave a comment