For this you have to integrate Facebook to your website.
Follow these steps-
Step 1 - Create / Open Web Site for Intended Integration
The sample included here is written using the ASP.NET platform, but any web framework will do. Create a new, blank project or open your existing project now.
Step 2 - Create a Cross-Domain Communication Channel File
The Facebook developer wiki has the following to say about the role of this file.
The Facebook JavaScript Client Library uses a cross-domain communications library to establish communication between third-party Web pages and Facebook pages and services inside a browser. To reference the library, you need to create a cross-domain communications channel file. For more details, please visit the link below.
Facebook Wiki - Cross Domain Communications
Technical details aside, we need to create one of these! It's quit simple really. Just create a new HTML file entitled 'xd_receiver.htm' and add the following code to the file.
view plaincopy to clipboardprint?
<!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>
Place this file in the root directory of your web application, and we're done this step.
Step 3 - Add Facebook XML Namespace to HTML Tag
NOTE - All code below this point belongs in the HTML document in which we wish to integrate Facebook Connect. In the case of the sample project, this is Default.aspx.
In order for our HTML document to validate, we need to inform it that it's ok to use some FBML (Facebook Markup Langague) mixed in with our HTML. This is a one liner.
view plaincopy to clipboardprint?
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
Step 4 - Add a Reference to the Facebook JavaScript Feature Loader
This step enables access to the Facebook features such as XFBML, the JavaScript API, etc. Another one liner.
view plaincopy to clipboardprint?
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript"></script>
Step 5 - Create the Facebook Connect Login Button
Now for the fun part. By adding a single line of FBML markup, we generate a Facebook Connect login button.
view plaincopy to clipboardprint?
<fb:login-button onlogin="alert('Authenticated!');"></fb:login-button>
There are two items worth noting here. The first is the event handler 'onlogin' you see in the markup. This event fires when a user successfully authenticates with Facebook. By capturing this event, we can notify the user an perform any necessary actions.
The second is just a small note. By setting length='long' on the fb:login-button, we will render a longer, more detailed button to the user. Both are seen below.
Take your pick, they both look great and suit a certain environment.
Final Step - Initialize Facebook Connect
Just before the closing body tag in your HTML markup, add the following line.
view plaincopy to clipboardprint?
<script type="text/javascript">
FB.init("YOUR_API_KEY_HERE", "xd_receiver.htm");
</script>
IMPORTANT NOTE -- You MUST replace "YOUR_API_KEY_HERE" with the API key you find in your application details in the Developer application on Facebook!
Testing Your Work
In order to test your work, upload xd_receiver.htm and any other project files you have created to the Callback URL you specified when creating the application. Launch a browser, and you should see the following.
Follow this also-
http://devtacular.com/articles/bkonrad/how-to-integrate-with-facebook-connect/