March 25, 2010

Adding support for Facebook Connect on subdomians.

If you want subdoamins to share the same facebook session for Facebook connect There are some addings need to be done (I had wasted around 3-4 hrs to find this out) so wanted to share if its useful to others.

First thing you need to do is configure Base domain in faceook application settings page under "Connect"  tab.
  1)   This will make Facebook javascript library to stores the session cookie on base domain there by , allowing all subdomains to share the same cookie.
2)   And also Facebook Server will allow the Connect URL to be available to all subdomains
Secondly set  document.domain  to your base domain in all javascript page on your domain and subdomains.Also set document.domain = base.domain in xd_receiver.htm before the Facebook javascript import.

 Thanks Hope this helps you all to save time and add support for subdomains.

March 22, 2010

Installing java on UBUNTU

Recently wanted to install YUI compresssor which need java runtime for execution.


To install java we need to run following command on terminal -

sudo apt-get install sun-java6-jre sun-java6-plugin sun-java6-fonts

 If during installation you get error like "Err http://us.archive.ubuntu.com hardy-updates/multiverse sun-java6-bin 6-14-0ubuntu1.8.04   404 Not Found [IP: 91.189.88.46 80]"

You are required to Enable universe and multiverse repositories which can be done from command line as below -
Open a terminal and go to /etc/apt/ . backup sources.list file .Then edit it using the following command
vi /etc/apt/sources.list
Add following lines
## MAIN REPOSITORIES
deb http://gb.archive.ubuntu.com/ubuntu/ hardy main restricted universe multiverse
## MAJOR BUG FIX UPDATES produced after the final release
deb http://gb.archive.ubuntu.com/ubuntu/ hardy-updates main restricted universe multiverse
## UBUNTU SECURITY UPDATES
deb http://security.ubuntu.com/ubuntu hardy-security main restricted universe multiverse
If you wish to enable the backports and proposed repositories as well (recommended), then add these lines as well
## BACKPORTS REPOSITORY
deb http://gb.archive.ubuntu.com/ubuntu/ hardy-backports main restricted universe multiverse
## PROPOSED REPOSITORY
deb http://archive.ubuntu.com/ubuntu hardy-proposed main restricted universe multiverse

Once saved execute

sudo apt-get update

If it runs without error you shall be able to install JRE using this command with no problem -

 sudo apt-get install sun-java6-jre sun-java6-plugin sun-java6-fonts

March 3, 2010

Enable your site with Facebook Connect.

Recently i worked on integrating facebook connect on site so visitors can login with their facebook id to give comment on article .Incorporating facebook connect is advatageous to both the commenter and site owner .As commenter gets to publicize his facebook profile and get credit for good comments and site owner gets authenticate commenter and their site becomes more resourcefull and active .

Create an Facebook Application:-
First of all one needs to create an application on facebook so that people can authenticate with it in order to login on third site.
To create an go here http://www.facebook.com/developers/createapp.php. Give an appropriate App name and create the application.You will be presented with application settings page with multiple tabs.

1) In basic tab note down the app key and app secret (you will need it when you download php library for application from here **) fill out the other info as required .
2) In Authentication tab select user / pages as per your need .so who can install the application .
3) In Publihsre tab fill out the info if needed as per requirement.
4) Canvas tab is the imporatant setting for your application to work properly

In Canvas Page URL add appropriate name which will appear in application URL .
In Canvas Callback URL - Add the URL , on your web server where you will be hosting the facebook application. Do not forget to add '/' at the end of URL.
In Post-Authorize Redirect URL - Add the URl for the page where you want facebook users to get redirected to after they authorize you application access to their profile.
In Canvas Settings - choose Render Method as FBML or framesdepending on the type of application you want to host. If you don't have much functionality but informational application use frames else FBML .To learn more on FBML check here http://wiki.developers.facebook.com/index.php/XFBML. Add othetr info as per you likeness.

5) In Connect tab - Add Connect URL. it will be the root of your domain where you must copy xd_receiver.html. This is cross domain channel file used by facebook JavaScript Client Library to establish communication between your Web pages and Facebook pages.T file can be downloaded from here http://www.somethingtoputhere.com/xd_receiver.htm

Other tabs can be filled as per your needs and doesnt affect facebook connect functionality so not discussed here.

Now you application is ready and you have application key and secret noted from Basic tab in application settings page.

Install PHP library at canvas page URL:-

Download the php library from http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz and copy the folders php and footprints to Canvas Callback URL you set in application settings page under canvas tab.

You may add following code in index.php in your canvas callback URL to check if faceboook application is working properly


require_once 'php/facebook.php';

$appapikey = 'Your App Key';
$appsecret = 'Your App Secret';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();

// Greet the currently logged-in user!
echo '<p>Hello,<fb:name uid=\"$user_id\" useyou=\"false\" />!</p>';

// Print out at most 25 of the logged-in user's friends,
// using the friends.get API method
echo "<p>Friends:";
$friends = $facebook->api_client->friends_get();
$friends = array_slice($friends, 0, 25);
foreach ($friends as $friend) {
echo  '<fb:profile-pic size="square" uid="'.$friend.'" facebook-logo="true"></fb:profile-pic>';
}
echo "</p>";

Adding javascript to web pages :-

Now on the web page from your web site where you want to add facebook connect you shall include this JS-

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
Adding this JS file tells browser how to parse the facebook html tags used in page.

Now intialize the facebook javascript library.
<script type="text/javascript">
FB.init("Your App Key","http://domain.name/xd_receiver.htm");
</script>

Please add the application key and domain name in above places in javascript code.

Use this FBML code to add facebook connect icon on your web page -

<fb:login-button onlogin="facebook_onlogin_ready();"></fb:login-button>

"facebook_onlogin_ready" is the function which gets called when visitor is logged in using his facebook login.In this function you may reload the page or use ajax to fetch the visitors facebook profile details.

Following sample code fetches user profile with ajax -

var uid = FB.Facebook.apiClient.get_session().uid;
FB.Facebook.apiClient.users_getInfo(uid, ['name','first_name','last_name','email'],function(ret,ex) {


        var nameobj = document.getElementById('txtVName');
        nameobj.value = ret[0].name;
        FB.XFBML.Host.parseDomElement(nameobj);

        var webobj = document.getElementById('txtVWebsite');
        webobj.value = ret[0].profile_url;
        FB.XFBML.Host.parseDomElement(webobj);
});

In above code we use JS function from facebook javascript library "FB.Facebook.apiClient.users_getInfo" to get user details - first argument to it is user Id which we can retrieve from session using the js function "FB.Facebook.apiClient.get_session()" second argument is the profile fields we want to fetch. and third argument is the callback function which gets executed on succesfull profile fetching in which we update DOM with details .

Alternatively we can reload the page and use PHP library to fetch the profile details from facebook and prepopulate the web page with visitors details .

Use following code to fetach profile fields from facebook using php library.

$facebook = new Facebook('Your app Key', 'Your app secret');
$user_id = $facebook->get_loggedin_user();
$userObj = $facebook->api_client->users_getInfo($user_id, array('name','first_name','profile_url','pic_square'));

In order to access email like confidential profile fields you need to take extra permission from visitors which can be done by adding '{permsToRequestOnConnect : "email", }' as third argument to FB.init call .