Facebook application development – Quick note
06 May 2010
This is a quick note for myself to remember some tricks while we develop a Facebook application.
If you are a beginner in Facebook application development, go here first.
If you an expert in Facebook development, go here. 
The steps in creating a facebook app.
1) Register an application in facebook
2) Add Canvas URL
3) Add Canvas Callback url
4) Test the canvas is working or not
To execute FBML inside your code (for iframe), you must add FBConnect URL
You need to set xd_receiver.htm in your webroot folder
Download facebook php api
If you are using iframe, remember to use facebook-canvas url for links and forms , not your local url.
If you are using canvas mode, you cannot use body tag in your html. You dont need to keep the basic html layout
like head, title, body etc
An example page in the canvas_callback looks like this:
<?php
require_once(‘facebook.php’);
//ini_set (‘display_errors’, 1);
$appapikey = ’0d7c64e9a387eXXXXXXXXXXXXXXXXXXX’;
$appsecret = ’9fc9eef6dXXXXXXXXXXXXXXXXXXXXXXX’;
$facebook = new Facebook($appapikey, $appsecret);
?>
Sometimes , in IE and Safari, infinite redirect loop will happen. It is due to session problem
add the below code to solve this!
<?php
$prefix = ($_REQUEST['fb_sig_user']) ? ‘fb_sig’ : $appapikey;
if( isset($_REQUEST[$prefix.'_session_key']) ){
session_name( $_REQUEST[$prefix.'_session_key'] );
session_start();
$_SESSION['fb_user'] = $_REQUEST[$prefix.'_user'];
$_SESSION['fb_session_key'] = $_REQUEST[$prefix.'_session_key'];
$_SESSION['fb_expires'] = $_REQUEST[$prefix.'_expires'];
$_SESSION['fb_in_canvas'] = $_REQUEST[$prefix.'_in_canvas'];
$_SESSION['fb_time'] = $_REQUEST[$prefix.'_time'];
$_SESSION['fb_profile_update_time'] = $_REQUEST[$prefix.'_profile_update_time'];
$_SESSION['fb_api_key'] = $_REQUEST[$prefix.'_api_key'];
} else {
// Just so there *is* a session for times when there is no fb session
session_start();
}
?>
If you use iframe, remember to use this funcion as well
<?php
$facebook->require_frame();
?>
Also use the following function if you need authentication
$user_id = $facebook->require_login();
Don’t forget to add this in html tag (for iframe users)
<html xmlns=“http://www.w3.org/1999/xhtml” xmlns:fb=“http://www.facebook.com/2008/fbml”>
For facebook client side api (Javascript), include this line
<script type=“text/javascript” src=“http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php“></script>
For example, if you need to open a add to bookmark dialog on button click, use:
onclick=”FB.Connect.showBookmarkDialog();”
Add this line very bottom of the page, to avoid javascript error in some browsers (IE6 or 7 not sure)
<div id=“FB_HiddenIFrameContainer” style=“display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;”></div>
Sometimes, your application inside iframe shows scroll bar. It is due to dynamically increasing height or width of the content
use the below script at the bottom of the page.
<script type=“text/javascript”>
window.onload = function() {
FB_RequireFeatures(["XFBML", "Connect"], function() {
FB.init(“0d7c64e9a387XXXXXXXXXXXX”, ‘xd_receiver.htm’);
FB.CanvasClient.startTimerToSizeToContent();
FB.CanvasClient.syncUrl();
});
};
</script>
Look inside the facebook api php file to know more about the functions. For example to get friends info
<?php
$friends = $facebook->api_client->friends_get(”,$user_id);
$friends_info = $facebook->api_client->users_getInfo(implode(‘,’, $friends), ‘first_name,last_name,pic_square ‘ );
?>
For ajax call inside your iframe, to avoid redirect loop, pass the full server query url along with your file.
<?=$_SERVER['QUERY_STRING']?>
eg:
$(‘#browse_ajax’).load(‘<?=$root_path?>browse_ajax.php?<?=$_SERVER['QUERY_STRING']?>’);
When you pass Query string, remember to replace your parameters passing via get method. Otherwise
you cannot pass yourown custom values
<?php
function get_query_string()
{
$serverQuery = $_SERVER['QUERY_STRING'];
$serverQuery= str_replace(‘page=’, ‘page_=’, $serverQuery);
$serverQuery = str_replace(‘fan=’, ‘fan_=’, $serverQuery);
$serverQuery = str_replace(‘uid=’, ‘uid_=’, $serverQuery);
return $serverQuery;
}
?>
<?php
Use the below function for publish to wall option:
function publishWall()
{
var message = ‘type your message here’;
var attachment = { ‘name’: ‘your text here’, ‘href’: ‘http://urlhere.com/’, ‘description’: ‘Your message here’, ‘media’: [{ 'type': 'image', 'src': 'urlhere.com', 'href': 'urlhere.com'}] };
var action_links = [{'text':'More like this', 'href':'urlhere.com'}];
FB.Connect.streamPublish(message, attachment, action_links);
}
?>
Tags: api, application, development, facebook, php, public key, publish, source code, wall
V/S 
