Facebook Cookbook » Hasin Hayder

embedding google map in canvas

Hasin Hayder — Sun, 15 Feb 2009 00:44:11 +0000

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 object

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



Here is the map of Dhaka 

=23.7099,90.407,green' /> 

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



Here is the map of Dhaka 




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

Google Maps JavaScript API Example: Map Markers

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 style and not like . check out the following example for the differnece –

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.

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

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

Hasin Hayder — Tue, 10 Feb 2009 11:48:29 +0000

ok, i have learned my lesson while integrating and in an iFrame app where i was rying to render it uwing . 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 renders the 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 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





Custom Friend Selector







Hello  And here is your friend list

and here is how it looks,

you will find it useful in your FBConnect applications

facebook reveals status api – how to use it?

Hasin Hayder — Sat, 07 Feb 2009 17:07:35 +0000

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


api_client->users_hasAppPermission("status_update")){
echo 'Let us update your status from this application';
$visibility = "none";
}
else
$visibility = "block";

if(isset($_POST['status']))
{
    $facebook->api_client->users_setStatus($_POST['status']);
    echo "Your status has been updated";
}
?>

    
        Please update your status:

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?

how to keep track of users of your application, and how to remove them properly when they remove it

Hasin Hayder — Thu, 05 Feb 2009 14:44:06 +0000

there are two things we are going to discuss in this article. both of these are very important issues for successful marketing of your app, to generate precise traffic report. and if you want to sell your app or generate revenue, traffic report is very important. so we are going to show you how to maintain a precise list of your active users and how to precisely remove them when they remove your app.

keeping track of your users
this one is fairly easy. but beside storing their user id you should keep track of their session ids. why? for extended permissions and for viral marketing. lets create a mysql table for storing these data, along with the active/inactive


+------------+---------------------+------+-----+---------+-------+
| Field      | Type                | Null | Key | Default | Extra |
+------------+---------------------+------+-----+---------+-------+
| uid        | bigint(20) unsigned | NO   | PRI |         |       |
| sessionkey | varchar(128)        | YES  |     | NULL    |       |
| active     | char(1)             | YES  | MUL | 1       |       |
+------------+---------------------+------+-----+---------+-------+

here is the SQL


CREATE TABLE `users` (
  `uid` bigint(20) unsigned NOT NULL,
  `sessionkey` varchar(128) default NULL,
  `active` char(1) default '1',
  PRIMARY KEY  (`uid`),
  KEY `activity` (`active`)
)

now can you remember that there is a field named “Post authorize redirect url” in the “Authentication” tab of your application settings page? set the data in that field before proceeding further. have a look at the following screenshot. you can see it’s enlarged view by clicking on it

now lets see how to store the user ids and their corresponding session key. in the following code block there are two functions for storing user ids in your database and for updating their session key.

now in your install.php all you have to do is place the following code.


include_once("config.php");
$sk = $facebook->api_client->session_key;

$db = mysql_connect('host','user','db');
mysql_select_db("db",$db);

insertUser($uid,$sk, $db);
echo "";

thats it. now you can periodically update your user’s session key to stay uptodate using updateSessionKey() function.

how to remove your user
remember in the previous screenshot there was a field named “Post-Remove Callback URL” in the application setup page? when any of your application users remove this application from their account, facebook sends some information to this callback url so that you, the application developer, can successfully take necessary steps to remove this user from your database or set the inactive flag “ON”. lets see how to do this. here is the code of “remove.php”


get_loggedin_user();
if ($user != NULL &amp;&amp; $facebook->fb_params['uninstall'] == 1)
{
    makeUserInactive($uid,$db); //$db is your mysql link indentifier
}

/**
 * set an user as inactive, indicating that user has removed your application
 *
 * @param int $uid user id
 * @param resource $db mysql connection resource
 * @return bool
 */
function makeUserInactive($uid,$db)
{
    return mysql_query("update users set active = '0' where uid='{$uid}",$db);
}
?>

thats it! for reference you can check out facebook wiki entry.

updating profile box using

Hasin Hayder — Wed, 04 Feb 2009 13:10:58 +0000

1. string handle which just stores FBML and later output the content – like

2. url based, which must serve valid FBML

you can create by using fbml_setRefHandle() function. now lets see s in action. the following code will create a and you can later use it anywhere in your application. remember, once created the ref objects are in application scope. and until you change the content again using fbml_setRefHandle() api, it will remain the same.


 ";
$facebook->api_client->fbml_setRefHandle($handle, $markup);
?>

now you can use it anywhere in your application like this

it will say "Hello "

but wait, there is a major disadvantage with this type of handlers and that is the content of this ref object is cached. say, while creating the ref object if the $uid was, for example 503274632 (which is my id) – when I will come to a page that used this "greetings" ref object, I will see that the out put is "Hello you" and that is expected. Now when another user see the same page he will see that the output is "Hello Hasin Hayder", but this was not expected. Look, here it didn’t update the content according to the new user. Because the content of this ref object will remain cached until u change it again using fbml_setRefHandle() api.

to over come this problem and to make these ref objects more usable, you can use url type ref objects. lets see below, you have to use fbml_refreshRefUrl() api.


api_client->fbml_refreshRefUrl($url);
?>

and the content of ru.php is


Hello from an external Url

now you can use this url type ref object anywhere in your application, like this


Greetings!

now if you want to update content of your user’s profile box offline. Just print any url type ref handler in his profile box using profile_setFBML() api. later, on the time of updating all you have to do is call fbml_refreshRefUrl() so that facebook re cache the content of this url. and regardless to say that your url will deliver all the updated content to display on yoru profiles. your url will always get the user id via “uid” parameter in HTTP GET, so you can decide easily what to deliver.

if you are still confused or have any question, don’t forget to write it as a comment. in next article I am coming with “how to successfully keep record of all the users of your applications and how to remove them successfully when they remove your app” – stay tuned.

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

Hasin Hayder — Tue, 03 Feb 2009 15:05:43 +0000

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 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.


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.


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

$facebook->api_client->begin_batch();

$facebook->api_client->profile_setFBML(NULL, $uid1, "Offline profile ", NULL, 'mobile_profile', 'profile_main');
$facebook->api_client->profile_setFBML(NULL, $uid2, "Offline profile ", 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 .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 with an url handler

publishing on your friend’s mini feed (no session key)

Hasin Hayder — Mon, 02 Feb 2009 08:58:31 +0000

the way superpokey or other applications do this, first they ask you to select some friends from your friends list, then they ask you to publish on their wall. at this stage a popup dialog opens up and asks if you really want to publish that story on your friend’s wall. if you agree, the news goes straight to your friend’s wall.

so how do they do it? you know the publishActionOfUser() actually publish feed’s on your wall, but there’s no guaranty if the news will go to your friend’s news section. so to do this, you have to use feedStoryForm. this form was introduced in facebook old profile, but comes in a new flavor when the profile section is completely redesigned by facebook. feedForms are used to publish news on user’s mini feed as well as his/her friend’s wall. but it always asks the user to authorize the publishing of news first. lets see how it actually works

step 1: register feed template
first, you have to register a feed bundle for your application. later we will use that feed bundle for publishing stories. so lets open feed console and select your application. feed console is accessible at http://developers.facebook.com/tools.php?feed

now click on next. in the next screen you have to input a one line feed template. to check if you template is valid, you can also input sample data to pass to this template as “template data” which is infact a valid json object. lets do this

note one thing that to share a feed with friends, you must put {*target*} token in the one line feed templates.

our one line feed template is: {*actor*} is publishing some news about {*subject*} on friends wall and he wants to share it with {*target*}
parameters are: {”subject”:”fishing”}

now click on next to create short story template.

short story title template: {*actor*} is sharing some news about {*subject*} with {*target*}
short story body template: {*content*}

params: {”subject”:”fishing”, “content”:”The fishing goes superb in this sunny weather”}

now click on the “Update Preview” to check the validity of our short story feed. If it’s valid, lets proceed to next step of “Full Story Template” by clicking next. both short story and full story feeds are optional. this time we will skip full story template. so on the next screen just click “skip” and proceed to final screen.

now we are on the final screen of “Creating Action Link”. lets understand what is action link. check the following picture for details of our parameters and how it will appear on your friends wall.

ok, we are done – now click on next and on the following screen click on “Register Template Bundle”, a popup dialog box will confirm you that the feed has been created and it will also show you the id of this feedbundle. note that id.

step 2: include the feedStoryForm in your application
as we have our feed bundle registered, now it’s time to go into action. lets include the feed form in our application. here’s the code


Hello, , Its story time";
?>
   

	What's it all about?

           

           Ok! tell your friends more about this

	

	Thats cool, so whom do you want to inform about it?

output will be something like this

the config.php just initiated the facebook object, so nothing to mention about that. but now we have to code the handler of the feed story request that facebook will make when your users will hit the “Publish News” button.

step 3: feed story handler
this file will be invoked internally by facebook over http. in this file you have to process the parameters of yoru feed form and return a valid response to facebook as a json object so that facebook can proceed further to publish your user’s news. lets see how it works – here’s the code



{"content": {"next_fbjs":"shareDone();",
                   "feed": {"template_id":48644843809,
                                "template_data": {"subject":"",
                                                            "content":"",
                                                            "actionsubject":""} } },
 "method":"multiFeedStory" }

So we are done!

now when user’s will click on “Publish News” button after selleting friends, he will see a dialog box pops up for the authorization to publish the news – like this

user can select whether he wants to publish “short” or “one” line feed story. remember we had skipped the full story template? if we created full story template, user will get another option like “full” in this dialog box. so when this dialog box pops up, user will have to click “Publish” to publish the story.

check out the published feed on your friend’s wall

let us know your comment if you like our article. we are coming with new recipe soon.

hello fb cookbook reader

Hasin Hayder — Sun, 01 Feb 2009 20:39:45 +0000

hello everyone, we have just launched!

our plan is to make it one stop solution for all your facebook application development needs. you will get answers to all your questions. we will mainly focus on development of applications for facebook, and sometime we will also review interesting applications and their cool features which you might have stumbled upon.

stay with us, we will try to answer all of your questions in this cookbook.