Building Your First Facebook Application with CakePHP
October 18, 2007
Continuously reinventing the wheel in applications development can be time-consuming and ineffective. For this reason, many development frameworks have sprung up with the intention of assisting programmers by providing a jump-start, while at the same time helping to keep code organized and easily manageable. Now, with the help of the instructions below, you can learn how to create a Facebook Application with the relatively simple CakePHP framework.
Step 1. The first step is to create a Facebook application. 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.)
<?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. This class will be stored in a file named things_controller.php within the “/app/controllers” folder. 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.
<?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/models” named thing.php. Again, place the following contents into the new file.
<?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.
<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>
<fb:action href="things/browse">Browse Things</fb:action>
<fb:action href="things/search">Search Things</fb:action>
<fb:create-button href="things/add">Add Things</fb:create-button>
</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.
<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.
Follow-up Suggestions
You may be wondering what happens when visitors arrive at your application via http://apps.facebook.com/YOUR-APP-PATH/ instead of http://apps.facebook.com/YOUR-APP-PATH/things. With the way things are currently set up, visitors will see a default CakePHP output explaining how to overwrite that page.
To fix this, you’ll need to have YOUR-APP-PATH redirect to YOUR-APP-PATH/things. Normally this could be done with a simple change to /app/config/routes.php. However, since routes in CakePHP are used for redirects, and because we can’t perform standard redirects within Facebook apps, a simple workaround is necessary.
Create the file “/app/views/pages/home.thtml”, and add an fb:redirect tag, as per the following example.
<fb:redirect url="http://apps.facebook.com/YOUR-APP-PATH/things"/>
Now, when your application’s root remote path is called, it will retrieve the contents of the home.thtml file (within the default layout you created). The redirect will be interpreted by Facebook, and the end user will be sent to the things index page as we expected.
If using a database, you’ll of course want to set up the connection for CakePHP to utilize it. Under “/app/config”, rename “database.php.default” to “database.php”. Edit the file, and update the host, login, password, and database values for the $default array variable.
Lastly, if you are interested in learning more general information about using the CakePHP framework, I suggest taking a look at the manual.
Comments
47 Responses to “Building Your First Facebook Application with CakePHP”
Got something to say?
[…] the Facebook Developer blog Matt Huggins published a tutorial which explains the steps you have to perform to build your first Facebook application with CakePHP. […]
[…] Building Your First Facebook Application with CakePHP : Facebook Developer (tags: cakephp facebook development web) […]
[…] step-by-step article on how to build an application for Facebook using […]
Also have a look at Symfony, the facebook plugins are quite nice.
[…] Building Your First Facebook Application with CakePHP : Facebook Developer Continuously reinventing the wheel in applications development can be time-consuming and ineffective. For this reason, many development frameworks have sprung up with the intention of assisting programmers by providing a jump-start, while at the same time (tags: facebook-developer.net 2007 mes9 dia23 at_tecp CakePHP php facebook webservices) […]
[…] Building Your First Facebook Application with CakePHP : Facebook Developer (tags: facebook cakephp php development tutorial programming web application api article build webdev web2.0) […]
I am not able to add my apps in profile page
I want to show my apps content in profile page when user add my apps in your account.
my apps is http://apps.facebook.com/body-philosophy
I am enter “” in default FBML but it’s not showing in profile page.
Please help me that which method will be use for showing my apps in profile page.
Thank you. I like cakephp and started looking into the facebook platform and how to integrate my site with it.
Hopefully all your new articles will be based on cakephp. Will be checking now and then.
Keep up the good work.
I have tried to implement this application but i am facing following error.
Missing controller
You are seeing this error because controller ViewsController could not be found.
Notice: If you want to customize this error message, create app/views/errors/missing_controller.thtml.
Fatal: Create the class below in file : app/controllers/views_controller.php
Please help me
thanks
kishor
Kishor — Your view filename should match whatever you named your controller name, replacing the camel-case with underscores/lowercase.
From your error message, it sounds like you’re trying to access the URL at something like “http://apps.facebook.com/appname/views”. If that’s the case, then you need to create “views_controller.php” with class ViewsController defined within. Addtionally, you’ll need to create view “index.thtml” within the /app/views/views directory.
If you followed the example above, then you might just be typing in the URL incorrectly. You should be trying to access “http://apps.facebook.com/appname/things”. Hope this helps!
Matt,
Great article. I have actually started a CakeForge project called mpFacebook that makes it possible to build Facebook Apps using CakePHP without requiring vendors() and fits better within the MVC.
The project is still rather young, but is growing rapidly. There is an App on Facebook runnig it now: My3 http://apps.facebook.com/mythree
For more info feel free to find me in the #cakephp channel at Freenode, or check out the project.
- TommyO
i am getting an error with the above code in the things/index.thtml
My Friends:
Warning: Invalid argument supplied for foreach() in C:\webs\cake\app\views\things\index.thtml on line 6
i know i must be doing something basic, wrong. seems that this code does not access the variable $friends … but the things_controller index function seems to be working just fine (friend call is working).
So it seems my view is being called but doesn’t have access to the variables it should? any hlpe very appreciated.
Hi dnew. I realized after your message that I had an error in the code translated from my application to this tutorial. I ended up changing a line in the things_controller.php file. Here is the original line:
$this->set('friends', implode(', ', $friends));And here is what I changed it to:
$this->set('friends', $friends);Technically, the way you want to send data from your controller to your view is up to you. I simply had an inconsistency here in how I was sending data to the view (as a comma-delimited values string) and how the view expected to receive it (as an array) that was the cause of the problem you encountered.
Please let me know if you still have problems with getting the code to work after this. Thanks!
Hello Matt,
Thanks for your help.But still i am facing same problem as below
Missing controller
You are seeing this error because controller ViewsController could not be found.
Notice: If you want to customize this error message, create app/views/errors/missing_controller.thtml.
Fatal: Create the class below in file : app/controllers/views_controller.php
My application details as below i have created one folder “cakeapplication” on server “http://kishor.moregoodfoundation.org/” where i uploaded all cakephp folders(app,cake,docs,venders etc)
My callback url:
http://kishor.moregoodfoundation.org/cakeapplication/app/views/things
Canvas url:http://apps.facebook.com/thingsapplication
In app folder below setting created with above code
models/thing.php
views/things/index.thtml
views/layout/default.thtml
controllers/app_controller.php
controllers/things_controller.php
I known something going wrong from my side but i can’t find it.
Please help me.
thanks
kishor
kishor — Your callback URL should simply be “http://kishor.moregoodfoundation.org/cakeapplication/things”. CakePHP knows that this is the same as “http://kishor.moregoodfoundation.org/cakeapplication/things/index”, at which point it automatically looks up the index() function in things_controller.php.
The other thing that you need to change is the location of your app_controller.php file. You currently have it under /app/controllers, but you need to move to be under /app. Since it’s a special case (the parent controller of all your other controllers), that’s the only controller that will appear under /app. Every other controller you create (such as things_controller.php) should be placed under /app/controller.
I hope this helps.
Hi Matt,
I was hoping you could help me. i think I have almost everything running good but when I click on the link for (add things) no new screen comes up and the url changes to http://apps.facebook.com/timmyscoupons/things. if i click on (add things) again the url chages to http://apps.facebook.com/timmyscoupons/things/things and so on. Do you know what i need to do to fix this?
Thanks for all your help so far,
Tim
I messed up on my last comment the url changes like this:
http://apps.facebook.com/timmyscoupons/app/views/things/add
http://apps.facebook.com/timmyscoupons/app/views/things/things/add
http://apps.facebook.com/timmyscoupons/app/views/things/things/things/add
Tim — The link examples I provided in the view for this article is a relative URL, so it’s going to end up opening it relative to the currently location. Here is what I used that I suggestion on ensuring it always works.
Add the following lines to /app/config/bootstrap.php:
Edit /app/app_controller.php to include the following function:
function beforeRender() { $config =& Configure::getInstance(); $this->set('appCallbackUrl', $config->appCallbackUrl); $this->set('appCanvasUrl', $config->appCanvasUrl); }Edit any controllers you have in /app/controllers to add the following function:
function beforeRender() { parent::beforeRender(); // TODO: Perform any other pre-render steps specific to this controller. }Now, within any of your views used by these controllers, you can set up your links in the following manner:
You can also link to server-side images using the $appCallbackUrl variable within the view.
Hope this helps!
[…] Building Your First Facebook Application with CakePHP : Facebook Developer (tags: cakephp facebook) […]
Hi Matt,
Thanks for your help it’s work fine.I have started my facebook application with cakephp.But i am facing following problems.
I want on profile page my application display some random contents (means after refreshing profile page) it will display different content. So my question is that where i write this code.Now currently i wrote this code in index function of application controller.But content of profile page only change after view application(index).So please tell me where i write that random content script so it’s effect profile page dynamically.
And second issue is that I used FBJS ajax (do_ajax) in application.In do_ajax function i send url .This url parse thr my application controller (it’s correspounding template in view folder) but it shows this warning “Cannot modify header information - headers already sent by” in main facebook.php file line no (197 & 200) where cookie set. When i commented this line it’s work .
I don’t known it’s right or wrong.
I hope you understand my problems.If possible please send your email d.
Thanks for all your help so far,
kishor
Great and unique article. Thanks for this.
It helped me a lot in writing an article Writing Facebook Applications in .NET
Writing Facebook Applications in .NET With Facebook.NET
Great article, thanks very much! It has been extremely useful to me. If you need any ideas on what to do for your next article, cakephp and facebook with session would be great! ;)
[…] previous CakePHP tutorial on Facebook Developer explained how to create a basic Facebook application with the CakePHP […]
[…] to develop for. I have found a good tutorial on developing an application from Facebook Developer (click here to read the original […]
To use sessions with facebook, you need to set a custom session id. I do this based on the logged in user id, but you can change this to whatever suits you.
eg.
$this->Session->id($this->facebook->user);
This needs to be set in your beforeFilter() method. Also, the above code assumes that a facebook user is logged in, so you might need to do something different if you need sessions without requiring the user to be logged in.
Hi Adam,
I understand that your logic is correct in needing to set the session ID to a parameter that Facebook recognizes as the front-end handler. Using the user ID is one approach, but if the user ID is unavailable — or in case is logged in on 2 or more systems — it might be better to use the guaranteed unique “fb_sig_session_key” parameter provided by Facebook.
With regards to setting the session ID in CakePHP, I don’t believe there is a built-in function to do so. You demonstrate in your code the use of an id() function, but there is no mention of this in the documentation, nor did I locate the function in searching the Session.php class file. Additionally, there does not appear to be an easy way to set the session ID easily shy of modifying the core Session.php file or simply calling PHP session_* functions directly, as per the following example. (Note: this has not been tested!)
As you mention, you’ll want to do all this in your controller’s beforeFilter() method.
One last thing to note is that the fb_sig_session_key parameter may be longer than the default CakePHP ID column size when storing in a database. In checking my current session key of my own application, it is 33 bytes long. However, it may vary from session to session, and thus may be longer or shorter.
[…] to develop for. I have found a good tutorial on developing an application from Facebook Developer (click here to read the original […]
Thanks Matt for your feedback - you are right about the fb_sig_session_key parameter - I have since changed this in my code.
In regards to the $this->Session->id() method not being available, I should have mentioned I am running the latest 1.2 branch from SVN.
Thanks for the heads up on the facebook session key length. I’ll be sure to keep this in mind.
Thanks for clarifying, Adam. I haven’t yet inspected the Session code within CakePHP 1.2. :)
Hi Matt,
Thanks in advance for any help you can offer.
I have been trying to get this to work a couple of times now, with no luck. I repeatedly get the same error:
http://theripleygroup.com/tmp/pastebin.html
You can replicate as follows:
1) Install a fresh Cake. I’ve tried the latest 1.1x and the two most recent 1.2x’s. I’ve also tried on PHP 4 and 5.
2) Follow your instructions. Briefly:
- install the facebook files in vendors/facebook/
- update database config file
- create app_controller as specified (modifying API keys)
- make the things model, view (index), and controller.
3) Create a new facebook user.
4) Add a friend
5) Go to apps.facebook.com/MYAPP
6) add app. check “keep me logged in”
7) go to apps.facebook.com/MYAPP/things/
8) see the user_id of the friend you added in (4)
9) reload — go back to apps.facebook.com/MYAPP/things/ — now see this error (also linked above): http://theripleygroup.com/tmp/pastebin.html.
Now you’ll always get this error. The only way to see a list of friends is to start from step (1): set a “fresh” user (one who has not added the app), add a friend, and then look once. now this “fresh” user is “corrupted” and gets the error.
Any help is greatly appreciated!
Best,
-Zed
Follow up:
It’s got something to do with the cookies that are set during set_user.
If I comment out this block:
{{{
foreach ($cookies as $name => $val) {
// print $name . “=” . $val . “”;
setcookie($this->api_key . ‘_’ . $name, $val, (int)$expires);
$_COOKIE[$this->api_key . ‘_’ . $name] = $val;
}
setcookie($this->api_key, $sig, (int)$expires);
$_COOKIE[$this->api_key] = $sig;
}}}
then I can still see my friend list. But I can’t log in or do anything that require_login()s.
Either there is some kind of bug with Cake+Facebook or I’m an idiot because I’ve spent way too much time trying to debug this thing! Probably the latter.
Thanks in advance for any help.
-Z
[…] I found a very useful post here. It goes on to explain how to set up your app_controller.php and a sample Controller and View using […]
[…] Building Your First Facebook Application with CakePHP : Facebook Developer Might be useful down the line if I ever want to make a facebook app. (tags: cakephp facebook) Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages. […]
[…] this tutorial on facebook-developer website, you will learn to create your first Facebook application with […]
Great tutorial. One thing, though; step 5 could use some more detail. it says “Create a basic controller class that inherits the AppController defined above.” What should we call this file?
drew - Check out the CakePHP file naming conventions, and you’ll see that controllers are always lowercase with underscores separating the capitalized letters within the class name. So, since this example creates a controller named “ThingsController”, your file must then be saved as “things_controller.php” within the controllers path. Hope this helps!
Now that’s a tutorial I was looking for! I only got one small problem that keeps me from making a full fledged facebook app;
My Canvas URL is; http://apps.facebook.com/myappname/
When I browse to this destination Firefox tells me that the page isn’t redirecting properly.
My Callback URL is; http://host url]/[subfolder]/[abbreviated appname]/
When I browse to this destination everything works as it should.
What could be the most probable cause for this? I haven’t got access to the logs of my server and am having a bit of a problem getting through to him so I thought I’d ask for a suggestion right here.
Thanks in advance!
Plz can u tell me what to do in step number 5
i didn`t understand it well
Chifa — simply create a file named “things_controller.php”, paste the code from step 5 into the file, and save it in your “controllers” path of your cake application.
[…] Building Your First Facebook Application with CakePHP […]
[…] Facebook Developer ha publicado un pequeño tutorial donde nos explican cómo hacer nuestra aplicación para Facebook […]
[…] Facebook Developer publicaron un pequeno titorial onde che explican como facer a nosa aplicación co Framework CakePHP […]
Great tutorial Matt - worked like a charm! You might want to specify in Step 5 that the controller does need to be in the controllers folder and let people know how they should name it. I knew what you meant but I am sure some novices coming by might get tripped up.
The problem I’m having is I have foreign ids in my models that belong to facebook models and I’m not sure how to access them. Since $facebook belongs to the controller, I seem constrained to load them there, but what I really want to do is load them from methods in the model from the view, but neither the model nor view have access to the facebook client. Any ideas?
Daniel - Thanks for the suggestion, I’ve made a change to this tutorial to make it more clear.
David - There are several ways you could do this. One means of accessing the Facebook Client API itself would be to pass $facebook as a parameter to your model from within your controller. For example, if you have a method named “getFriends” in your model, you could define it like this:
function getFriends($facebook) { /* code here */ }Another option would be to store information that you need from Facebook within a database. For example, I have a class in one of my applications named FacebookUser. This saves the user’s profile ID to the database (along with their facebook key and other assorted info). Then, the data can be retrieved via standard model methods such as the following:
Thanks, Matt.
I originally tried that first method, but my problem was my model’s references to the facebook objects are deep so I’d have to recurse then call it.
The second method would require me caching data unnecessarily so I’m going to avoid that.
Someone in the cakePHP IRC suggested I make a new datasource like http://debuggable.com/posts/new-google-analytics-api:480f4dd6-c59c-445f-8ce0-4202cbdd56cb but it was beyond my understanding of cake to do that. It seems like http://cakeforge.org/projects/mpfacebook/ (which someone plugged above) is doing that, but I don’t know if their project is still active. Doing so should make the associations automatic.
I ended up putting the retrieval method in the controller (though it would work just as well putting it in the model and passing in $facebook), and I loop through and when I find a a [facebook_object]_id I find the associated object and add to the array [facebook_object]. It’s kind of hacked, but I guess it works.
Sorry if this steps out of conversation, but its easier for many people to make an application using php….but is there any software that can help me code in c++ because thats the language i m best in ???