Facebook Cookbook

Facebook Iframe application issues

Here are the problems that I have faced  while developing my first  iframe application.The problems are very silly but i have to waste so much times to solve the issues. So i want to share some of issues that i faced.

1. POST Submission problem :

http://forum.developers.facebook.com/viewtopic.php?id=24430

While I submit the post data unfortunately I  do not get any post data. I have found that post field is empty. I am very surprised how my $_POST field is empty though it submit the action page.   I have given a sample form of my application.

Posting it via the server url:

<form action="http://myserver.com/appname" method="POST">
<input type="text" name="test1"></input>
<input type="submit" name="Submit"/>
</form>

But when I submit this , I cannot get the post data . So I tried by
Posting it via the app callback url:

<form action="http://app.facebook.com/appname" method="POST">
<input type="text" name="test1"></input>
<input type="submit" name="Submit"/>
</form>

After search in facebook developer wiki,forum and blog , I have known that
while submit the form , iframe lost the session key as there is no session key passed . As a result it lost user id and lost all the post data. That’s why i have to set user_id. So below is the forum post link :
http://forum.developers.facebook.com/viewtopic.php?id=22929
And here Is how I solve this issue . This my modified form where I added two hidden fields. One is fb_sig_session_key and another one is user_id.

After search in facebook developer wiki,forum and blog , I have known that
while submit the form , iframe lost the session key as there is no session key passed . As a result it lost user id and lost all the post data. That’s why i have to set user_id. So below is the forum post link :
http://forum.developers.facebook.com/viewtopic.php?id=22929
And here Is how I solve this issue . This my modified form where I added two hidden fields. One is fb_sig_session_key and another one is user_id.

Posting via fb_sig_session_key and user_id

<form action="http://myserver.com/appname" method="POST">
<input type="text" name="test1"></input>
<input type="hidden" name="fb_sig_session_key" value=”<?php $_GET[‘fb_sig_session_key’]”></input>
<input type="hidden" name="user_id" value=”<?php $_GET[‘user_id’]”></input>
<input type="submit" name="Submit"/>
</form>

So after submit the form here I show how can I set_user and now find the post values.

<?php
if (isset ( $_REQUEST ['kb_fb_sig_session_key'] )) {
$this->fb_sig_session_key = $_REQUEST ['fb_sig_session_key'];
}

if (isset ( $_REQUEST ['user_id'] )) {
$this->uid = $_REQUEST ['user_id'];
}

if ($this->uid != '') {
$this->facebook->set_user ($this->uid, $this->kb_fb_sig_session_key );
}
$this->facebook->set_user ($this->uid, $this->fb_sig_session_key );
?>

2. Application  Link  problem :

While I click on any link in my iframe application , I have found that it reloads the whole facebook page again in the iframe canvas. I just use this type of code and found the problem load  .

<a href=”http://apps.facebook.com/MyApp/invite.php”>Invite</a>

I found the solution in this thread : http://forum.developers.facebook.com/viewtopic.php?pid=208220

Only add the taget=”__top” into the anchor.

So I add target=”_top”. <a href=”http://apps.facebook.com/MyApp/invite.php”>Invite</a>.   And now it work.

3. iframe size problem  :

I have faced problem to resize my frame application. Initially when page load the frame size is correct. But when I show the facebook profile photo of users , then find that it does not resize. I do not see the footer and it cut down. We have solve this problem by adding  javascript setTimer to resize the height. You have seen similar type problem here : http://forum.developers.facebook.com/viewtopic.php?pid=17541#p17541

4. setting issues :

I think to set up my application as an iframe application, I do not need to set up the connect url. But when I do not set up connect url I see blank page. So when I set up the call back url , I have found that my application working.

how to trigger multiple onload functions when divs are loaded by FBJS

facing trouble to trigger multiple onload event to work FBJS does not allow acess to the window object. So how can onload event fire when <div> is loaded on canvas. also FBJS is executed after the entire page has been loaded. so really shouldn’t matter where you call the function within your canvas page file. however let’s see how can we trigger on load for multiple div.

In this example we create two div which load by onload. One <div=’msg’> is for content a message and another <div=’ ajax’> which load the value by ajax way.

For that reason in FBJS we create a varraible array and pushing two functions on that array variable.

var onload = [];

onload.push(function() {
//ONLOAD STUFFS HERE
msg_laod();
do_ajax();

});

</script>

now we define the two functions. The message load function just simply display a text message on <div id=’msg’>. and do_ajax() function display the value by ajax call.

<script>
function msg_laod()
{
document.getElementById('msg').setInnerHTML('test message content');

}

function do_ajax()
{
var ajax = new Ajax();
ajax.ondone = function(data) {
document.getElementById('req').setInnerFBML(data);
}
ajax.requireLogin = 1;
ajax.responseType = Ajax.FBML;
ajax.post('http://www.techsmashing.com/banglakeyboard/adduser.php');
}            ajax.post(.....display.php'); // ajax callback url
}</script>

now we trigger on the onload event . by pushing functions into an array and executing them at the bottom of the page it ensures that the elements are indeed in the dom tree.  here we add setTimeout function to to make sure the browser is fully loaded. It allows 100 miliseconds. because the rest of the page to load (facebook footer and such).   increasing the 100 milisecond limit can solve some of these problems.

</p></p>

<script>
//the very last thing on the page
setTimeout (function() {
for(var a = 0;a < onload.length;a++) {onload[a]();}
}, 100);
</script>

in this way we can easily load onload functions in the div. we combine the whole code and looks like that:

<?php
include_once 'config.php';
?>
<script>
var onload = [];
onload.push(function() {
//ONLOAD STUFFS HERE
msg_laod();
do_ajax();

});

function msg_laod()
{
document.getElementById('msg').setInnerHTML('test message content');

}

function do_ajax()
{
var ajax = new Ajax();
ajax.ondone = function(data) {
document.getElementById('req').setInnerFBML(data);
}
ajax.requireLogin = 1;
ajax.responseType = Ajax.FBML;
ajax.post('ajax callback url');
}

</script>
<div id="msg" style="width:398px;height:298px;">test message content</div>
<div id="ajax" style="width: 398px; height: 298px;"> </div>

<script>
//the very last thing on the page
setTimeout(function() {
for(var a = 0;a < onload.length;a++) {onload[a]();}
}, 100);
</script>

reference :

http://forum.developers.facebook.com/viewtopic.php?id=5117

embedding google map in canvas

ever tried to embed static google map in your facebook application canvas? wait a bit, i think you are firing a question at me “whats the difference, its all the same, a static image, eh?” – nope! it wont work the way you think . whenever you try to embed a static google map image, google parse it as a “Bad Or Malformed” request and returns nothing! and in canvas url you can’t directly import any javascript but fbjs. so all we have to do is embed google map using a <fb:iframe /> object

enough said, lets see it in action. first try to embed a google static map in regular way and see the result.

<php
include_once("config.php");
?>
Here is the map of Dhaka <br/>
<img src='http://maps.google.com/staticmap?center=23.70991,90.407&amp;amp;zoom=14&amp;amp;size=400x300&amp;amp;key=<api_key>=23.7099,90.407,green' /> <br/>
Pretty cool, ya?

output is

Here is the map of Dhaka
Pretty cool, ya?

you will be surprised that this code will render only the texts and no image in your application canvas, though the image url is fully valid.

now here is the revised version using <fb:iframe />

<?php
include("config.php");
?>
Here is the map of Dhaka <br/>
<fb:iframe width='400' height='300' style='border:0' frameborder='0' src='http://sandbox.ofhas.in/fbtest/map.php?lat=23.7099&amp;amp;lon=90.407' ></fb:iframe>
<br/>
Pretty cool, eh?

we are using a map generator (map.php) using the latitude and longitude of a specific location, as the source of our iframe. so here is the source code of map.php

<!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:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Map Markers</title>
    <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=<api_key>"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(<?=$_GET['lat'];?>, <?=$_GET['lon'];?>), 13);

          var point = new GLatLng(<?=$_GET['lat'];?>, <?=$_GET['lon'];?>);
          map.addOverlay(new GMarker(point));
      }
    }

    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()" style='margin:auto;padding:0px;>
    <div id="map_canvas" style="width: 398px; height: 298px;margin:10 0;border:1px solid #ccc;"></div>
  </body>
</html>

this time output is pretty cool have a look

so this is it! in our next article we are coming with the complete source code of a standalone twitter like application, developed using FBConnect to allow you to monitor your friend’s status and also to change yours. stay tuned

how to send notifications and emails

sending notifications and emails are very important features of a facebook app. now i’m going to show how you will send notifications and emails to users.

there are two types of notifications: user-to-user and application-to-user

• a user-to-user notification is sent on behalf of one user to one or more other users
• application-to-user notifications are sent on an application’s behalf and do not require an active session.

case 1: suppose you have an application question/answer type. let user  ‘x’ sent a question to user ‘y’. so how will you notify user ‘y’ that he received a question. you can send a notification to user ‘y’ from user ‘x’ and also you could send an email to user ‘y’ from user ‘x’.

solution: for sending notification you could write this code

/*------- sends a notification or request to a set of users. notifications are items sent by an application to a user's notifications page in response to some sort of user activity within an application ----------*/
// $facebook->api_client->notifications_send(ids, notificationmessage, notificationtype);

$facebook->api_client->notifications_send('654321890', "you've received a msg from <fb:name uid='7464635353' />", 'user_to_user');

this notification is sent from user to user, that’s why you’ve to mention notification type as ‘user_to_user’

another imortant thing is that, you could send same notifications to more than one users as a single api call. just specify the ids as a comman separated list like

$facebook->api_client->notifications_send('654321890,656565654, 49393939', "msg", 'user_to_user');

case 2: let you also want to send an email to user ‘y’ from user ‘x’ in the situation of case 1.

solution: you could only send emails to the users, who have both authorized your application and granted it the email extended permission. so how will you ask the user for accepting extended permission for email. here is the way. write the below code in your view page or layout:

<fb:prompt-permission perms="email">Would you like to receive email from our application?</fb:prompt-permission>

this will render this link in your view page:

when user will click this link, a dialog box will open and show user a message  to accept receive emails permission. if user accept this permission, then this link will not shown to that user in future.

here is the api call that you have to use to send email:

//$facebook->api_client->notifications_sendEmail('recipients', 'mail_subject', "tex", 'fbml');
$facebook->api_client->notifications_sendEmail('73737373', 'you received a question', "", "hi user <fb:name uid='47363633' /> has sent you a message");

remember the parameters:

• recipients: a comma-separated list of recipient IDs. you can email up to 100 people at a time.
• subject: the subject of the email message. as of 10/28/2008, the subject will accept a limited set of fbml tags, including names, and tags related to internationalization.
• text: the plain text version of the email content. you must include a non-empty value for at least one of either the fbml or text parameters. the fbml input takes precedence, but if the given fbml value is invalid or cannot be rendered, then the text will be used instead. there is currently no character limit on the length of either the text or fbml body.
• fbml: the fbml version of the email. you must include a non-empty value for at least one of either the fbml or text parameters. the fbml parameter is a stripped-down set of fbml  that allows only html/fbml tags that result in text, links, linebreaks, as well as tags related to internationalization.

references:

• http://wiki.developers.facebook.com/index.php/Notifications.sendEmail
• http://wiki.developers.facebook.com/index.php/Notifications.send
• http://wiki.developers.facebook.com/index.php/Fb:prompt-permission

how to show facebook friends status

facebook status api is still in beta, in one of previous posts hasin showed how to set status of users with their permission. now, let’s see how we can get our facebook friend’s status, in next step i will show a tricky way to get a random person’s status who is not your facebook friend.

first let’s see how we can show our friends status. these following lines of code will return us an array

include_once("config.php");
//i'm using my own id
$user_status= $facebook->api_client->fql_query("SELECT status FROM user WHERE uid =579152077");
echo "<pre>";
print_r($user_status);
echo "</pre>";
//this will return an array like following
Array
(
    [0] => Array
        (
            [status] => Array
                (
                    [message] => is testing facebook status api.
                    [time] => 1234464510
                    [status_id] => 53699066735
                )

        )

)

so we can get any of our facebook friends’ status like this. If no status messages are found, the method returns an empty status_get_response element. now, the thing is, we can check our friends status from “live feed” tab on our home page right? so this status api could be interesting if we can show random friend’s status eh? unfortunately, this current beta API doesn’t support to get any random friends status but for the time being there is a possible way to get status of a person who is not our facebook friends BUT if he/she has at least 1 mutual friend. so let’s find a least possible way to get a random friend’s status who is NOT our friend on facebook but has a mutual friend. don’t worry, you don’t have to know his or her id let’s have a look at following code.

include_once("config.php");
//get id by the random person's full name
$user_details = $facebook->api_client->fql_query("SELECT uid FROM user WHERE name = 'your_random_friend_full_name'");
//if this full name is unique and has a mutual friend with you, you can get his/her id like this...
$user_details[0]['uid'];
//now let's find out the status of that person
$status_array= $facebook->api_client->fql_query("SELECT status FROM user WHERE uid = {$user_details[0]['uid']}");
//now, simply it will return an array with status message like before.

I know this is not the right way to get status. i strongly believe facebook should open this status access to random friends with email id or full name – only then we can expect lot’s of cool application on facebook based on this status api.

how to successfully keep record of which friend is accepting your invitation

to keep record lets create a table named users .

CREATE TABLE `friends` (
`uid` INT NOT NULL ,
`rid` INT NOT NULL ,
) ;

then you have to add a small code snippet in the invitation code.we just need to add &next=’.urlencode(’?rid=’.$user).

have a look in side the content there is a php line which will show the choose with a url .
just after adding the new code the url will look like

echo htmlentities('<fb:req-choice url="http://www.facebook.com/add.php?api_key='.$appapikey.'next='.urlencode('?rid='.$user).'" label="app name" />');

now we have to change the setting of the application .and change the Post-Add Redirect URL like this

this is the install.php

include ‘config.php’;

//$url is ur desired location where u want to user to be redirected after installation (ie : invite page) ;
$url = "http://apps.facebook.com/appname/invite.php";

mysql_query(“insert into users value (‘$user’,$_GET[‘rid’]);”);

$facebook->redirect($url);
?>

how dose it works ? first we are sending the current user id in invitation page. and as we set the Post-Add Redirect URL to a page when any user install the application from the invitation he/she will be redirect to the install.php page and the first user who invited him/her will be passed to install.php page using HTTP GET method .they store those 2 user id as u want .

tips for successful XFBML rendering

if you are creating a FBConnect application and suffering from unexpected result of XFBML renedeing in your application, here is a cool tip for you. always close yoour tag in <tag></tag> style and not like <tag/>. check out the following example for the differnece  –

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body>
<div id="users"></div>
<fb:login-button></fb:login-button>
<script type="text/javascript">
 function renderXfbml(uid) {
 			document.getElementById("users").innerHTML = "<fb:name uid='loggedinuser' useyou='false' /> has sent a gift to <fb:name uid='1009983642' />";
 			FB.XFBML.Host.parseDomTree();
 	 	}
 FB.init("5b8d7fcc4d851e29908620757be663d1", "http://sandbox.ofhas.in/fbtest/xd_receiver.htm", {"ifUserConnected" : renderXfbml});
</script>
</body>
</html>

the output looks like the following one, which is no way an expected one – but the XFBML used in the example above is totally valid. it must show something like Hasin Hayder has sent a gift to Rajeeb Khan

Now check out the revised XFBML block in the following example.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body>
<div id="users"></div>
<fb:login-button></fb:login-button>
<script type="text/javascript">
 function renderXfbml(uid) {
 			document.getElementById("users").innerHTML = "<fb:name uid='loggedinuser' useyou='false'></fb:name> has sent a gift to <fb:name uid='1009983642'></fb:name>";
 			FB.XFBML.Host.parseDomTree();
 	 	}
 FB.init("5b8d7fcc4d851e29908620757be663d1", "http://sandbox.ofhas.in/fbtest/xd_receiver.htm", {"ifUserConnected" : renderXfbml});
</script>
</body>
</html>

and the output produced by the code above is perfect!

hope you will take care of this issue and prevent yourself from stumbling. happy FBConnecting

dealing with ajax on FBConnect

problem :
need to store users information by ajax call while on connect . but face problems using fbjs ajax calls using on connect .some times face the problem to send ajax request  in the forum also get related type of problems . like:

http://forum.developers.facebook.com/viewtopic.php?id=28153
http://forum.developers.facebook.com/search.php?search_id=92171720

let’s see a quick solution by a common example.

solution:

here we look at the after connect get user profile picture and name by connect.

we create a script connect.php and include the  config  file .connect.php

<?php
/*
* include config file
*/
?>

<div id="user"> </div>
<fb:login-button onlogin="update_user_box();"></fb:login-button>
<script type="text/javascript">FB.init("key", "xd_receiver.php"); </script><span style="display: block; padding-left: 6em;"><span>

now it’s look like that:

here in the connect button add onlogin function update_user_box().while click on connect then this function will call and update user by profile picture and name in the user id div.

in that update_user_box() function we will get the profile picture and name by calling ajax. So later on we can do anything by ajax.to call the ajax we will do it by jquery. Here I cannot do it by the fbjs  ajax method. For that reason I add jquery and other scripts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

now update update_user_box

<script type="text/javascript">
function update_user_box()

{

Var url = “http://www.t...com.display.php”; // ajax url which is here display.php

$.ajax({
type: "POST",
url:url,
data: "save=yes",
success: function(msg){
var user_box = document.getElementById("user");
user_box.innerHTML =msg;

}
});
}

now create the display.php Which call by ajax.

In the display php also include config file which include facebook client library

here is code

<?php
define(MAIN_PATH, realpath('.'));
include_once MAIN_PATH.'/init.php';
$fb_uid = facebook_client()->get_loggedin_user();
echo '<span> <fb:profile-pic uid='.$fb_uid.' facebook-logo=true></fb:profile-pic> Welcome, <fb:name uid='.$fb_uid.' useyou=false></fb:name>. You are signed in with your Facebook account.</span>';</span></span></span></span>

?>
<span style="display: block; padding-left: 6em;"><span>

this display.php returns the user profile picture and name. and it’s look like that.

that’s it

displaying a “friend selector” in FBConnect application – a custom component for you

ok, i have learned my lesson while integrating <fb:multi-friend-selector [condensed] /> and <fb:multi-friend-input /> in an iFrame app where i was rying to render it uwing <fb:serverfbml>. i was designing a page where users of your application can select an item, then some of their friends and finally submit the form to the handler script (might be javascript routine too!)

as <fb:serverfbml /> renders the <fb:request-form /> inside another iframe (thats right – iframe inside an iframe) so its quite tough job to pass external data to any of the DOM element inside those iframe. later, i tried to dynamically render the <fb:serverfbml /> with the help of AJAX and XFBML.parseDOMTree() but no luck. the surprising fact that everything out there was renedring properly but not the request form (when returned via ajax). so finally i did it with FQL and by building a custom friend selector component. so here it is

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Friend Selector</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body>
<fb:login-button></fb:login-button><br/><br/>
Hello <span id="me" uid="503274632" useyou='false'></span> And here is your friend list<br/>

<div id="friends"></div>
</body>
</html>
<script type="text/javascript"> 

function loadFriends(uid) {

    FB.XFBML.Host.autoParseDomTree = false;
    FB.XFBML.Host.addElement(new FB.XFBML.Name(document.getElementById("me")));

    FB_RequireFeatures(["CanvasUtil"], function(){  FB.CanvasClient.startTimerToSizeToContent(); });
    var api = FB.Facebook.apiClient;
    api.fql_query("SELECT uid, first_name, last_name FROM user WHERE  uid IN (SELECT uid2 FROM friend WHERE uid1 = "+uid+") order by first_name", function(result, ex) {

        data = "<table>";
        for (i=0;i<result.length;i++)
        {
            data += "<tr><td><input type='checkbox' value='"+result[i].uid+"' name='friends[]' id = 'friend"+result[i].uid+"' /></td><td>"+ result[i].first_name + " " + result[i].last_name+"</td></tr>";
        }
        data +="</table>";
        $('#friends').css({"overflow-y":"scroll","height":"200px","width":"300px","border":"1px solid #ccc"});
        $('#friends').html( data);

    });
}

FB.init("api_key", "xd_receiver.php",{"ifUserConnected":loadFriends});

</script>

and here is how it looks,

you will find it useful in your FBConnect applications

facebook reveals status api – how to use it?

today facebook revealed their new api to update user’s status, and i am quite certain that it will play a vital role in the massive “status” market that is controlled by twitter. lets see how we can update status of any users of your application using this new API called “status_set()”. first thing is to update your facebook client library from this link to make thie api available to your application. and oh, one more thing to note which is very important infact. your users must allow extended permissions for “status_update” before you can do it.

here is the code. first it asks for user’s permission to update his/her status directly from this application. if user grants the permission – we will display a form to our user. then the rest is just hitting the submitting button with new status

<?php
include_once("config.php");
if (!$facebook->api_client->users_hasAppPermission("status_update")){
echo '<fb:prompt-permission perms="status_update" next_fbjs="greet()">Let us update your status from this application</fb:prompt-permission>';
$visibility = "none";
}
else
$visibility = "block";

if(isset($_POST['status']))
{
    $facebook->api_client->users_setStatus($_POST['status']);
    echo "<p>Your status has been updated</p>";
}
?>
<div id="statusdiv" style="display:<?=$visibility;?>;">
    <form method="POST">
        Please update your status:<br/>
        <input type="text" name="status" /> <br/>
        <input type="submit" value="change status" />
    </form>
</div>

<script>
function greet()
{
    var session = "<?=$facebook->api_client->session_key;?>";
    document.getElementById("statusdiv").setStyle("display","block");
    new Dialog().showMessage("Info","Thank you for granting us this permission! Now you can update your facebook status directly from here.");
}

</script>

here is the sequence

screenshot 1: default view, before granting permission

screenshot 2: permission dialogue, asking for the authorization

screenshot 3: status update form

screenshot 4: confirmation

so this is it! pretty easy, eh?