Upgrading FaceBook Connect to New GRAPH API
This Post is continuation to my previous post http://pandurangzambare.blogspot.com/2010/03/enable-you-site-with-facebook-connect.html. As facebook has recently released New GRAPH API’s ,there’s need to upgrade to Graph Api’s.
Graph API’s make it very easy to integrate FaceBook Connect for login, registration or using FB plugin to your website, as compared to previous Connect Api’s.
1) First of all new API’ need us to define the name-space like below:-
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>
2) Once the name-space is defined Include the JS file – http://connect.facebook.net/en_US/all.js – on page where you need to use FaceBook API.
3) Now we need to initialize the FaceBook JS library as below:-
<div id=”fb-root”></div>
FB.init({appId: “APP_ID”, status: true, cookie: true, xfbml: true});
This completes the basic requirements for FaceBook Graph API’s
Set xfbml to true to use FBML on page of interest.
Using FBML tag as below will enable FaceBook login on your website.
<fb:login-button perms=”publish_stream,create_event,rsvp_event,offline_access, publish_checkins,user_birthday,user_events,user_interests,user_likes,user_location, user_relationships,user_relationship_details,user_checkins,friends_checkins,friends_birthday, friends_events,friends_location” v=”2″ size=”xlarge” onlogin=”window.reload();”>Sign in With Facebook<fb:login-button>
OR
If don’t want use FBML initialize FaceBook library as below:-
<div id=”fb-root”></div>
FB.init({appId: “APP_ID”, status: true, cookie: true, xfbml: false});
And use the following tag to show login button:-
<a onclick=”FB.login(function(response) { if (response.session) { window.realod(); } else { show_error(); }});”>Signin with faceBook</a>
Simple three steps to include FaceBook login with New GRAPH API on your website.