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

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