I was searching a Facebook application example with CodeIgniter today. There weren’t many tutorials on it so decided to give a try for FB application with CI. So let’s see what and how I did it.

I’m assuming you know how to setup a FB application. If you don’t then please visit here, this is a great step-by-step process to start a FB application.

Well, if you are done setting up the process according to the instruction, you supposed to have few things in your hand: an API key, Secret key, Callback URL and base URL.

Now you need to Download the latest version of CodeIgniter and unzip the folder in your Base URL location. Set base URL from application/config/config.php

Example : $config['base_url'] = “http://apps.facebook.com/your-app-name/”;

Ok, now set your default controller from here: application/config/routes.php

Default controller is “welcome” – for sample application I didn’t change it. I just worked on default controller. You can change it according to your needs. If you want to use different controller keeping default controller as it is then add that controller name to your Callback URL.

Now let’s download the Facebook client library from here:

Once you have this package in your hand place them in your application/plugins (if there is not folder named plugins then create it) folder. Note that, you can also add the library in the library folder.There are only three files of FB client library- place them in your plugins folder. But don’t forget to rename your facebook.php to facebook_pi.php

Yay ! We are done all initial setting stuffs. Now need to see some actions!

Open you default controller (in my case “Welcome” controller).

First of all we need to create a __Contrust class so that it gets initiated for the first time application user.

So our construct class will be look like this:

  var $facebook;
  //API and secret key that you got from your application setup.
  var $__fbApiKey = ‘YOUR-API-KEY';
  var $__fbSecret = ‘YOUR-SECRET-KEY';

function __construct()
{
parent::__construct();
  //load the client library that we added as plugin in plugins folder.
  $this->plugin('facebook');
  // Prevent the 'Undefined index: facebook_config' notice from being thrown.
  $GLOBALS['facebook_config']['debug'] = NULL;
  // Create a Facebook client API object.
  $this->facebook = new Facebook($this->__fbApiKey, $this->__fbSecret);
  $user = $this->facebook->require_login();
}

So we have called Facebook API key and secret key and then we loaded the client library that we added as plugin in plugins folder. At the end we checked if the user is logged in or not. Well, you can avoid it by defining a Session key. But I found it was easier to avoid Session key problem with the application by allowing users logged in first.

We supposed to get connected with FB API by this time. So let’s play with FB API now. Create a function called index () and lets retrieve logged in user’s all friends from it.

So it should look like this

function index()
{
   // Retrieve the user's friends and pass them to the view.
   $friends = $this->facebook->api_client->friends_get();
   $this->load->view('welcome_message' , array("friends" , $friends));
}

So we got our friends list in “friends” array. Let’s go to “welcome_message” view in view folder to retrieve and show all friends that the array is containing. My view looks like this bellow.

<h3>Welcome to Sample Facebook application with CodeIgniter!</h3>
<div class="container">
< ?php
foreach ($friends as $id)
{
?>
<div class='img'>
	<fb :profile-pic uid='<?=$id?>' firstnameonly = 'true' linked='true' size='square'/>
<div class='name'>
		<fb :name uid='<?=$id?>' firstnameonly = 'true' capitalize='true'  useyou = 'false'/>
	</fb></div>
</fb></div>
< ?php
}
?></div>

Two facebook tags are added here. One is for Profile picture of my friends and second tag is to show my friends name. I have also added three more CSS class to show it a little bit better.

They are:

 .img {
  float: left;
  padding : 10px 0px 0px 10px;
  width:50px;
  overflow: visible;
}

.name {
  padding-top: 0px;
  text-align: center;
}

.container
{
  padding-left:18px;
}

You can add this at the top of your view page in the <style> tag.

Now let’s go to the FB canvas and see what is my page is showing. From the above example my canvas page shows the output like this:

Okay, if you want to add database, you just need to configure your application/config/databse.php file. Rest of the things are same.

Ahh ! It’s cool. I guess if I use any FW for FB application first I will check the volume of the application. I think there is no meaning to use FW for a small FB application.