Facebook Application Development with CakePHP

Tagged:  

Facebook is one of the largest social networks and has become a great platform to develop for. I have found a good tutorial on developing an application from Facebook Developer (click here to read the original tutorial)

Below are the steps for the tutorial.

Step 1. The first step is to create a . In setting up, only a few of the settings are vital for getting started.

* Include an application name of your preference.
* Within the “Optional Fields” section, provide the callback URL where you intend to host the application. The callback URL should point to the root path of your CakePHP installation.
* Enter a Canvas Page URL that has not already been taken, and make sure FBML is selected.
* If you do not want friends or other random users installing your application yet, make sure to check off the Developer Mode box.
* Lastly, set the Side Nav URL to the same value as the Canvas Page URL.

Step 2. Now that your application is set up, you’ll need to download and unzip the latest stable version of CakePHP.

Step 3. Create a new folder within your CakePHP application under “/app/vendor/facebook”. Download the latest version of the Facebook Platform API, and unzip the contents of the “client” folder into the new “facebook” folder created a moment ago. (PHP4 users should unzip the contents of the “php4client” folder instead.) You should now have the directory contents as follows.

* /app/vendors/facebook/facebook.php
* /app/vendors/facebook/facebook_desktop.php
* /app/vendors/facebook/facebookapi_php5_restlib.php

Step 4. You’ll now need to modify the AppController base class such that all your inherited controllers utilize the Facebook API. To start, copy app_controller.php from “/cake” to “/app”. Next, open the file up in your preferred text editor, and change its contents to match the following. (Make sure you change the values for the Facebook API key and secret in the process.)
view plaincopy to clipboardprint?

<?php
vendor('facebook/facebook');

class AppController extends Controller {
var $facebook;

var $__fbApiKey = 'YOUR_API_KEY';
var $__fbSecret = 'YOUR_SECRET_KEY';

function __construct() {
parent::__construct();

// 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);
}
}
?>

Step 5. Create a basic controller class that inherits the AppController defined above. Here we’ll perform basic Facebook calls such as logging in. Additionally, an example view named “index” is included, representing the index page of the things controller.
view plaincopy to clipboardprint?

<?php
class ThingsController extends AppController {
var $user;

/**
* Name: beforeFilter
* Desc: Performs necessary steps and function calls prior to executing
* any view function calls.
*/
function beforeFilter() {
$this->user = $this->facebook->require_login();
}

/**
* Name: index
* Desc: Display the friends index page.
*/
function index() {
// Retrieve the user's friends and pass them to the view.
$friends = $this->facebook->api_client->friends_get();
$this->set('friends', $friends);
}
}
?>

Step 6. Create a placeholder model object under “/app/model” named thing.php. Again, place the following contents into the new file.
view plaincopy to clipboardprint?

<?php
class Thing extends AppModel {
var $name = 'Thing';
var $useTable = false;
}
?>

Step 7. In order to ensure consistency between pages, you’ll want to create a default layout. This is a place to include header and footer FBML. Create a new document in your text editor named “/app/views/layouts/default.thtml”, and insert some code such as the following. The vital part that must be included is the echo call to print the $content_for_layout variable.
view plaincopy to clipboardprint?

<fb:google-analytics uacct="YOUR-GOOGLE-ID"/>

<style type="text/css">
.container { padding:10px; }
</style>

<fb:dashboard>
<fb:action href="things">My Things
<fb:action href="things/browse">Browse Things
<fb:action href="things/search">Search Things
<fb:create-button href="things/add">Add Things
</fb:dashboard>

<div class="container"><?php echo $content_for_layout;?></div>

Step 8. Finally, you need to create a file that represents the layout of the index view defined as a function of ThingsController from step 5. Create a new file named “/app/views/things/index.thtml”, and insert the below contents. Note the use of the $friends variable, which was passed from the index function via a call to the controller’s set function.
view plaincopy to clipboardprint?

<p><b>My Things</b></p>
<p>My Friends:</p>
<ul>
<?php foreach ($friends as $friend):?>
<li><?php echo $friend;?></li>
<?php endforeach;?>
</ul>

Step 9. The last step is to upload your cake application to your server (making sure to match the callback URL path set for your application). You can now access the page via: http://apps.facebook.com/YOUR-APP-PATH/things.

Now that you have an easy tutorial I would love to hear about any good projects that you have created for Facebook (perhaps we should make an Ajaxonomy Facebook application and of course blog about the development). You can put them in the comments or if they are blogged about put them in social for a chance to have an article written in the main Ajaxonomy blog.

Facebookster - We can provide a full range of facebook application strategy, design, development and marketing for your business. Facebookster
http://www.facebookster.com

thanks i was desperately looking for something like this. it is pretty hard to find a good tutorial, especially a detail one for newbies as of now.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.