Thursday, May 20, 2010

Facebook integration in your web application...

This is not regarding only java, you can do this on any web application in different languages also.

Facebook is getting popular now a days. Almost every site has facebook login enabled, so that if the user has facebook account he can login using that and can use the site as a registered user. For this the user must allow the site to use his facebook user data (Friends list, profile details etc...). Facebook provides different set of APIs to do such integration with your site.
 
It basically provides different client APIs which are based on different technologies lke PHP, Java, Javascript etc.. Here i will show you how to integrate facebook only using javascript API, which is the best way to do this.
 
    1. First step is, you have to include the javascript from FB as follows.  

        <script type="text/javascript"
        src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
 
    2. You have to init the Facebook JS library with you facebook API key and provide the XDReceiver url. XDReceiver.htm is provided by facebook which is to be uploaded on you server to handle the callback to Facebook's javascript functions. It will store facebook cookies on your server so that you can access the facebook session in your site to fetch facebook data for the logged in user.    

        FB.init("myApiKey","/html/xd_receiver.htm", {
        "doNotUseCachedConnectState" : false
        ,"reloadIfSessionStateChanged" : true    //Reloads the page if user logs in OR out
        ,"ifUserConnected" : showFacebookInviteLink()    //Is user connects to FB, executes the provided JS function          
        });
 
    3. Now you need to call function which will provide the facebook login popup for user. User can login into facebook and then allows the application to use his/her data.
   

        FB.Connect.requireSession(); // This will give the popup to login
      
        // This will check if FB is initiated with application key and user logged in or not. On user session, it will executes the function.
        FB.ensureInit(function() {
            FB.Facebook.get_sessionState().waitUntilReady(
                    function() {
                        
            });
          
        });
 
    4. To logout from Facebook, you just need to call JS function FB.Connect.logout();

    Now you can access different functions of the FB JS library to acces any data it supports to use on your site/application having session initiated.I will show how to show invite friends popup dialog on your site/application. Call the below function on invite button/link click event.
   

       function inviteFacebookFriends() {      
        FB.ensureInit(function() {
            FB.Facebook.get_sessionState().waitUntilReady(
                function() { //on Connect succes
                        var fbml = "";
                        fbml = '<fb:fbml>\n'
                                + '<fb:request-form\n'
                                //Redirect back to this page                           
                                + ' action="'+document.location+'"\n'                           
                                + ' method="POST"\n'
                                + ' invite="true"\n'
                                + ' type="app test invite"\n'
                                + ' content="app test inviting...\n'                           
                                + '
                                + ' label=\'Join me!\' />"\n'
                                + '>\n'           
                                + ' <fb:multi-friend-selector\n'
                                + ' rows="2"\n'
                                + ' cols="4"\n'
                                + ' bypass="Cancel"\n'
                                + ' showborder="false"\n'   
                                + ' exclude_ids="excludeIds"\n'           
                                + ' actiontext="Use this form to invite your friends to connect to my site."/>\n'
                                + ' </fb:request-form>' + ' </fb:fbml>';
                      
                        var dialog = new FB.UI.FBMLPopupDialog("Invite Friends To This Site",fbml);                                      
                        dialog.setContentWidth(650);
                        //dialog.setContentHeight(450);
                        dialog.show();
            });
        });  
    }
     
Thats it! This will show the standard popup dialog for friends invitation. Basically this FBMl will be rendered by facebook js API.Now user can select any of his friends and send them invitation to join your site. Let me know if you have any queries OR problems, will try to help around.

0 Comments: