Tuesday, May 21, 2013

Authenticate your website using Facebook Connect API


facebook API 

Facebook connect API allows users to dynamically connect their identity information from Facebook, such as basic profile, friends, photos information and more, to third party websites, as well as desktop and mobile applications.  The article here describes how to provide Facebook Connect authentication for your web application.

Steps to connect your site to Facebook :

1. If you don’t already have a Facebook API key for your site, create an application with the Facebook Developer application.

  Go to http://www.facebook.com/developers/createapp.php to create a new application.
    Enter a name for your application in the Application Name field.
    Accept the Developer Terms of Service, then click Save Changes.

    If you have a Facebook API key,follow from next step
    On the Basic tab, keep all of the defaults.
    Take note of the API Key, you’ll need this shortly.
    Click the Connect tab. Set Connect URL to the top-level directory of the site which will be implementing Facebook Connect. 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.
    If your site is going to implement Facebook Connect across a number of subdomains of your site , you need to enter a Base Domain
    Click Save Changes.

2. Create a cross-domain communication channel file called xd_receiver.htm and place it in a directory relative to the Connect URL that you entered in the previous step. Include following script into this 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" type="text/javascript">
</script>
</body>
</html>

3. Next, in your Home Page ,ie page of facebook connect page,Place Html tag as following

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

4. include following javascript file with in your body tag NOTE IN HEAD TAG

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

5. Place facebook login Button in your page

<fb:login-button></fb:login-button>

6. Finally, Include following script after the login button

<script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "<path from web root>/xd_receiver.htm"); </script>

You should now be able to click on the facebook connect logo and use your facebook credentials to login to your web site.


For more SEO TRICKS / SMO TRICKS : http://social-media-tricks-tips.blogspot.com