permalink

18

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

Read Later submit to reddit

 

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://addyosmani.com/blog/wp-content/uploads/2009/10/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.

 

 

 

 

 

 

18 Comments

  3. Pingback: Tweets that mention How to Add Facebook Connect To Your Website in just 3 Steps | AddyOsmani.com | Where Web Businesses Grow -- Topsy.com

  4. Pingback: Tweets that mention How to Add Facebook Connect To Your Website in just 3 Steps | AddyOsmani.com | Where Web Businesses Grow -- Topsy.com

  9. tweet adder coupon March 8, 2010 at 6:51 am Reply

    Twitter is a great way to quickly connect with others, produce tremendous online visibility, drive traffic,. and even market and make sales. The problem with twiter is that so many people mess up their marketing strategy from the beginning. The good news here is that makes it easy for you to stand out when you do it adequately.

  10. Mya March 21, 2010 at 1:37 pm Reply

    HiHello all I just wanted to find out on if you could write another post to go a bit further into detail on the topic? This one was great but I would love to hear more!

  13. posadzki żywiczne April 3, 2010 at 4:49 pm Reply

    i know this is not exactly on topic, but i have a blog using the blogengine platform as well and i’m having issues with my comments displaying. is there a setting i am forgetting? maybe you could help me out? thank you.

  15. hcg June 21, 2011 at 12:14 pm Reply

    Hi! This is my 1st comment here so I just wanted to give a quick shout out and say I really enjoy reading through your articles. Can you recommend any other blogs/websites/forums that cover the same subjects? Thank you so much!

  16. sam August 11, 2011 at 4:33 am Reply

    Hello, I liked your post. Still anyone finds any difficulty in installing FACEBOOK CONNECT to their website, we can help them in doing so.

Leave a Reply

Required fields are marked *.

*