Archive for February 3rd, 2009

Feb200903

Mahmud Ahsan

5

fbml rendering in iframe application

before proceeding the main topic, at first i want to describe how to develop iframe based facebook application. i assume that, the reader have minimum knowledge of how to develop canvas based facebook application. if you never develop any facebook application please visit: http://wiki.developers.facebook.com/index.php/creating_your_first_application

steps of developing iframe based facebook application:

1. when you setup a new application in facebook, choose “use iframe” for canvas page url.
2. now set the authentication code, at your bootstrap file:


<?php
include “facebook.php”;
$facebook = new facebook(’api_key’, ’secret_key’);
$user = $facebook->require_login();

//catch the exception that gets thrown if the cookie has an invalid session_key in it
try {
if (!$facebook->api_client->users_isappadded()) {
$facebook->redirect($facebook->get_add_url());
}
}
catch (exception $ex) { //this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect(callback_url);
}
?>

3. and don’t forget to place the necessary facebook php library. http://wiki.developers.facebook.com/index.php/php

now i’m describing the main topic, that is how to render xfbml or fbml in your iframe based application.

1. first create a file called xd_receiver.htm
2. place xd_receiver.htm in the root directory. suppose your application base directory is: http://myapp.com/iframeapp . then place xd_receiver.htm in iframeapp folder. now add the following html code to xd_receiver.htm .


<!doctype html public “-//w3c//dtd xhtml 1.0 strict//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>cross-domain receiver page</title>
</head>
<body>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/xdcommreceiver.debug.js” type=”text/javascript”></script>
</body>
</html>

now in your view file, or may be layout file, place this code. here i’m showing the layout files format for iframe application.


<!doctype html public “-//w3c//dtd xhtml 1.0 strict//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>

<head>
<script src=”http://static.ak.facebook.com/js/api_lib/v0.4/featureloader.js.php” type=”text/javascript”></script>

</head>

<body>

<!– here is the fbml code in iframe application –>

<fb:serverfbml>
<script type=”text/fbml”>
<fb:fbml>

<fb:request-form action=”<url for post invite action, see wiki page for fb:request-form for   details>” method=”post” invite=”true” type=”xfbml” content=”this is a test invitation from xfbml test app <fb:req-choice url=’see wiki page for fb:req-choice for details’ label=’ignore the connect test app!’ />  ” >  <fb:multi-friend-selector showborder=”false” actiontext=”invite your friends to use connect.”>  </fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>

<!– here is the xfbml code –>


this is <fb:name uid=”<?=$this->userid?>” useyou=’false’> </fb:name>
my photo <fb:profile-pic uid=”<?=$this->userid?>” > </fb:profice-pic>

<!– remember all xfbml tags should be placed before below javascript code –>

<script type=”text/javascript”>
fb_requirefeatures(["xfbml"], function(){
fb.facebook.init(”place here the api key of your application“, “xd_receiver.htm”);
});
</script>

</body>

</html>

** remember xfbml is nothing but a subset of fbml that are supported for iframe application.

<fb:serverfbml> : this tag is used to renders the fbml on a facebook server inside an iframe. details of this tag is here: http://wiki.developers.facebook.com/index.php/fb:serverfbml

references:

1. http://wiki.developers.facebook.com/index.php/xfbml
2. http://wiki.developers.facebook.com/index.php/cross-domain_communication_channel
3. http://wiki.developers.facebook.com/index.php/php
4. http://wiki.developers.facebook.com/index.php/creating_your_first_application

Feb200903

Hasin Hayder

9

how to successfully update all of your user’s profile offline, at once! – part 1

sounds crazy right? but actually you can make a great use of this feature in your facebook application. lets think that your application is kind of a todo-list or birthday reminder. now your users will create tasks or added friend to be notified when their birthdays arrive, or when the eta of a task is in 24 hours. in these cases you may have to update those user’s profile in background so that when they visit their profile page – they will see the latest information, and that will be very useful for them.

there are two ways to accomplish this task

1. by calling setFBML offline, using any of user’s session key.
2. by using <fb:ref /> with an url handler, which is a smart way indeed.

in this article i am going to focus on first technique. next article will focus on 2nd one.

updating using profile_setFBML()
to use this api offline, you first need a session key. the following code will print the session key for you. 


<?php
echo $facebook->api_client->session_key;
?>

this code will output something like “6de106fa7e2de0820b091f12-503274632” which is my session key for this application.

now you can update all of your user’s profile using the following code. please note that i have used batch api for the sake of performance. 


<?php
require_once 'client/facebook.php';

$appapikey = 'ff0b3d87fc42915533e15dc238f2d447';
$appsecret = 'app_secret_key';
$sessionkey = "6de106fa7e2de0820b091f12-503274632";
$facebook = new Facebook($appapikey, $appsecret);

$uid1 = 657561905;
$uid2 = 503274632;

$facebook->api_client->user = $uid2;
$facebook->api_client->session_key = $sessionkey;

$facebook->api_client->begin_batch();

$facebook->api_client->profile_setFBML(NULL, $uid1, "Offline profile <fb:name uid='{$uid1}' useyou='false' />", NULL, 'mobile_profile', 'profile_main');
$facebook->api_client->profile_setFBML(NULL, $uid2, "Offline profile <fb:name uid='{$uid2}' useyou='false' />", NULL, 'mobile_profile', 'profile_main');

$facebook->api_client->end_batch();
?>

if you need to update thousands of your user’s profile at a time, using the batch api is a must or you will suffer from timeout. now you can execute this script by either command line “php <script_file>.php” or by accessing it via browser :)

pretty neat, eh?

stay tuned for next part of this article where we will tell you how to update profile data offline using <fb:ref /> with an url handler :)