Home >

Notification Component

June 16, 2009 | Permalink | Comments (5)

The notifications are one of the most interesting (and important) parts of the facebook area. In order to completely understand the Flash side of it, we need to understand the basics of the facebook notification, what it is and how it works. We need to digg real deep into it. The whole system in fact does not need any flash in it because the notification is not a part of the interface, the notification is something that works rather in the background, sending out notifications to friends and application users. Here is how the notifications look like in the very basic form:

Here we see how it looks like. This is what is called the notifications panel and it's the board where we can check all the notifications that were sent. There are two types of notifications an application can send you. An user-to-user notification and an app-to-user notification. Here on the image above, the first notification is a app-to-user notification. The app-to-user notification can be recognized when the notification is sent without any names mentioned, like this one:

On the other hand, a user to user notification mentions the name of the friend who initiated the action in application that sent the notification to you.

Here we see that Anita likes me a lot and as soon as she kissed me, the notification was sent to me. We also see that the name of the person was mentioned who initiated the action on their side. Beside the notifications panel there is also the extended notifications page that appears when you click the "See All" link in the top right corner.

Now when it is clicked, we see the screen with all notifications.

There are also filters that can be set. We can enable and disable notifications from specific applications.

Ok, now the we know more about the basic usage of notifications, let's create a simple example. Before moving to Adobes facebook ActionScript library, we will go through a simple PHP example to demonstrate the standard approach, that is very simple.

Open the index.php file where usually the swf file lives. Here is the current content on my side:



<?php

//include facebook api etc.
require_once("facebook/client/facebook.php");
require_once("keys.php");

//create new facebook instance
$facebook = new Facebook(API_KEY, SECRET);

//propmpt the user to login
$fb_user = $facebook->require_login();

//check if the user has added the app
if (!$facebook->api_client->users_isAppUser()) {
 
 	//if not, redirect him to add it
     $facebook->redirect($facebook->get_add_url());
 
}


?>

<fb:swf swfsrc='http://yourServer.com/facebookAppDir/ria.swf' allowscriptaccess='always' bgcolor='#ffffff' flashvars='' width='550' height='400'/>

We will add just this line of code:



$facebook->api_client->notifications_send($fb_user, 'Hey this is just a test', 'user_to_user');

just before the PHP script end. Here is the whole index.php script:



<?php

//include facebook api etc.
require_once("facebook/client/facebook.php");
require_once("keys.php");

//create new facebook instance
$facebook = new Facebook(API_KEY, SECRET);

//propmpt the user to login
$fb_user = $facebook->require_login();

//check if the user has added the app
if (!$facebook->api_client->users_isAppUser()) {
 
 	//if not, redirect him to add it
     $facebook->redirect($facebook->get_add_url());
 
}

$facebook->api_client->notifications_send($fb_user, 'Hey this is just a test', 'user_to_user');

?>

<fb:swf swfsrc='http://yourServer.com/facebookAppDir/ria.swf' allowscriptaccess='always' bgcolor='#ffffff' flashvars='' width='550' height='400'/>

Let's run the sample to see what it looks like.

We just sent to our selves a small notification. Cool, as you can see there is the name of the sender (in this case it's my self) and the action text. The cool thing about the action text is that we can add links to it. Those links can bring the user directly to the application. We can pass parameters with the link to initiate a specific action in the application. Before we explore the stuff deeper, we might look how the application to user notification looks like. Here is the code:

$facebook->api_client->notifications_send($fb_user, 'Hey this is just a test', 'app_to_user');

So here is the whole script:




<?php

//include facebook api etc.
require_once("facebook/client/facebook.php");
require_once("keys.php");

//create new facebook instance
$facebook = new Facebook(API_KEY, SECRET);

//propmpt the user to login
$fb_user = $facebook->require_login();

//check if the user has added the app
if (!$facebook->api_client->users_isAppUser()) {
 
 	//if not, redirect him to add it
     $facebook->redirect($facebook->get_add_url());
 
}

$facebook->api_client->notifications_send($fb_user, 'Hey this is just a test', 'app_to_user');

?>

<fb:swf swfsrc='http://yourServer.com/facebookAppDir/ria.swf' allowscriptaccess='always' bgcolor='#ffffff' flashvars='' width='550' height='400'/>

Now when uploaded, here is the result:

Cool, as you can see there is no name in the front the notification. The notification indicates that the notification was sent by the application. So, the developer needs to know when it is appropriate to send user-to-user notifications and when to send app-to-user notifications. In cases where the application user needs to send some sort of gifts to their users, it is advisable to send a user to user notification. In case when a high score list is updated, we can send an app-to-user notification indicating that the list was updated and that the user is no more the number 1 on the score board. Notifications are a really really powerful way to attract users to the application over and over again.

Notifications in ActionScript

In ActionScript, notifications can be sent directly from the swf. It uses a very similar syntax. In order to fully understand the ActionScript implementation for the notifications, we will go thought the same examples like above, sending out an app to user and an user to user notification to demonstrate how it works. We will use the same swf / fla pair from the previous example and upload it to the same location. So, for this to happen, we need to open up the fla from the previous example and remove all code.

Now, first we need to import the necessary classes:



import com.facebook.Facebook;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.commands.notifications.*;
import com.facebook.net.FacebookCall;

Then we create the facebook session:



var fbook:Facebook;
var session:FacebookSessionUtil = new FacebookSessionUtil("YOUR_API_KEY", "YOUR_SECRET", loaderInfo);
fbook = session.facebook;

We also want need our own facebook user id:



var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var uid:Number = Number(paramObj["fb_sig_user"]);

Then we make the call:



var call:FacebookCall = new SendNotification([uid], "yoooo", "user_to_user");
fbook.post(call);

So, let's compile and run it. As soon as we upload it and start the app, the notification appears:

Cool. as we can see the result is the same as the php one, but this time the notification came directly from the swf! No workarounds, no calling php, this make the developers life on facebook much much easier.

As we do not want to get confused, here is the complete code:



import com.facebook.Facebook;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.commands.notifications.*;
import com.facebook.net.FacebookCall;

var fbook:Facebook;
var session:FacebookSessionUtil = new FacebookSessionUtil("YOUR_API_KEY", "YOUR_SECRET", loaderInfo);
fbook = session.facebook;

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var uid:Number = Number(paramObj["fb_sig_user"]);

var call:FacebookCall = new SendNotification([uid], "yoooo", "user_to_user");
fbook.post(call);

As we can see in the sample, first we fetch our own user id from facebook and use it to send the notification to ourselves.

The same can be used for app-to-user notifications. We just need to change the following line of code:



var call:FacebookCall = new SendNotification([uid], "yoooo", "user_to_user");

to the following:



var call:FacebookCall = new SendNotification([uid], "yoooo", "app_to_user");

Again, we dont want to get confused, so here is the whole script:



import com.facebook.Facebook;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.commands.notifications.*;
import com.facebook.net.FacebookCall;

var fbook:Facebook;
var session:FacebookSessionUtil = new FacebookSessionUtil("YOUR_API_KEY", "YOUR_SECRET", loaderInfo);
fbook = session.facebook;

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var uid:Number = Number(paramObj["fb_sig_user"]);

var call:FacebookCall = new SendNotification([uid], "yoooo", "user_to_user");
fbook.post(call);

When compiled and uploaded, the swf should give the following result:

Cool, like in the PHP example, here is the same notification, but this time it is the app-to-user type of notification directly from the swf.

Adding links and parameters to notifications

One interesting thing that needs to be reviewed when talking about notifications are links. Almost every notification in facebook applications uses some sort of links to direct the user back to the application. Now we will create a sample link inside the notification that will bring the user back to our application and perform some specific action. So, the sample will send a notification that will bring the user back to the application, nothing more for now.

Here is the string that will be used as a notification:

var str:String = "See what I have for you. Click here"; var call:FacebookCall = new SendNotification([uid], str, "app_to_user");

And here the the complete script:



import com.facebook.Facebook;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.commands.notifications.*;
import com.facebook.net.FacebookCall;

var fbook:Facebook;
var session:FacebookSessionUtil = new FacebookSessionUtil("YOUR_API_KEY", "YOUR_SECRET", loaderInfo);
fbook = session.facebook;

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
var uid:Number = Number(paramObj["fb_sig_user"]);

var str:String = "See what I have for you. Click <a href='http://apps.facebook.com/myAppName/'>here</a>";
var call:FacebookCall = new SendNotification([uid], str, "app_to_user");
fbook.post(call);

When complied and uploaded, here is the result:

As soon as we click on the link provided, we got redirected to our application. So simple and useful. However, in most cases, simple links are not good enough for the application, usually we need some more data to provide with the links. The best way to do that is to use the query parameters. In the following sample, we will pass one parameter, so here is the string:




var str:String = "See what I have for you. Click <a href='http://apps.facebook.com/myAppName/?clicked=true'>here</a>";

And the result is:

When clicked the following url opens:

http://apps.facebook.com/myAppName/?clicked=true

Unfortunately, the parameter clicked is passed directly to index.php, not to the swf. The index.php page needs some sort of loop to collect all the $_GET variables and pass it to flash as a nice string. PHP is cool and knows that $_SERVER['QUERY_STRING'] is the best thing for it. So here is how we need to modify the embed code:



<fb:swf swfsrc='http://kancelarijahatipovic.com/libs/ria.swf' flashvars="<?= $_SERVER['QUERY_STRING'] ?>" allowscriptaccess='always' bgcolor='#ffffff' wmode='transparent'  flashvars='' width='550' height='400'/>

So far we made sure the parameters are passed to the swf, but are there really there, ddi they arrive?

Let's check by adding this code in the swf:



trace("clicked: " + paramObj["clicked"]);

Now we compile and upload it and get the following result if everything went fine:

The great thing about this approach is that you can pass as many variables as you want! Like 'http://apps.facebook.com/myAppName/?clicked=true&bla=bla&bla2=bla2 etc. The $_SERVER['QUERY_STRING'] places all the query parameters nicely to the flashvars parameter and the swf receives it nicely and without any problems. This makes our app a lot more flexible.

Small sample application

We want to create a small birthday reminder application that will display us a list of friends who have birthday. A small ceckbox on the right side will allow us to select friends who do have birthday and we will be able to send them a short birthday greeting. So how does it need to look like?

Here is the final image of the application:

Here is the flow of the application:

load the list of all friends
check if they have birthday
if yes, mark them red, otherwise, mark them blue
click on the friend how has birthday
type a message
send it

Sounds complicated? Not at all. Well, the same functionality is basically already there on facebook. When we log in, we can see the list of friends who have birthday. That's the same approach we will use to create our own application.

Ope the fla we used before. We will modify the code to load the list of friends, something we did lots of times earlier. Here is the code that needs to be attached to the first frame of the swf:



import com.facebook.Facebook;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.commands.notifications.*;
import com.facebook.commands.friends.*;
import com.facebook.net.FacebookCall;
import com.facebook.data.users.GetInfoData;
import com.facebook.data.friends.GetFriendsData;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.data.users.FacebookUser;
import com.facebook.data.users.GetInfoFieldValues;
import com.facebook.commands.users.GetInfo;
import com.facebook.events.FacebookEvent;

var fbook:Facebook;
var session:FacebookSessionUtil = new FacebookSessionUtil("2b6378f4f5b55953f0c87d1eac40e4a1", "2151000c183a927ebbc7e24869d26a36", loaderInfo);
fbook = session.facebook;

var uids:Array = new Array();

var call:GetFriends = new GetFriends();
call.addEventListener(FacebookEvent.COMPLETE, onFriends);
fbook.post(call);

function onGetInfo(e:FacebookEvent):void {
 	var user = (e.data as GetInfoData).userCollection.getItemAt(0) as FacebookUser;
 	trace("Hello " + user.first_name + " " + user.last_name);
}

function onFriends(e:FacebookEvent):void {
 	
 	var friends = (e.data as GetFriendsData).friends;
 
 	var i;
 	var len = friends.length;
 	
 
 	for (i = 0; i < len; i++) {
  
  		var user = friends.getItemAt(i) as FacebookUser;
  		uids.push(user.uid);
  
  	}
 	var call:FacebookCall = fbook.post(new GetInfo(uids, [GetInfoFieldValues.ALL_VALUES]));
 	call.addEventListener(FacebookEvent.COMPLETE, onDataRecieve);
 	fbook.post(call);
}

function onDataRecieve(e:FacebookEvent){
  	
  	var userData = ((e.data as GetInfoData).userCollection);
  	
  	var i;
  	var len = userData.length;
  
  	for(i = 0; i < len; i++){
    		
    		var user = userData.getItemAt(i);
    		trace(user.first_name + " " + user.last_name + " " + user.birthday);
    		
    	}
  	
}

Now how does the result look like? Here is is:

On the image, we can see that the birthday format has the following format:




Month Date, Year

We need only this:

Month Date

We will use the utility function to cut off the unneeded data:




function getBirthdayFBDateFormat(str:String):String{
 	var arr = str.split(",");
 	var str = arr[0];
 	return str;
}

Basically what we can do here is to get the current date in ActionScript and compare it to the birthday, if they are the same, mark the friend as birthday kid. So simple? Well, first let's take a look at the date default date format that ActionSctipt provides. So this line of code:



trace(new Date());

gives us the following format:



Mon May 25 01:42:02 GMT-0700 2009

Not exactly what we want, so here is the function that gives us the desired format:




function getCurrentFBDateFormat(date:Date):String{
 	var arr = (date.toString()).split(" ");
 	var str = arr[1] + " " + arr[2];
 	return str;
}

When it is called this way:




getCurrentFBDateFormat(new Date());

we get the following output:




May 25

Cool, thats exactly what we need! So, now we will run thought the list of friends and compare the birthday to the current birthday:


 

function onDataRecieve(e:FacebookEvent){
  	
  	var today = getCurrentFBDateFormat(new Date());
  	var userData = ((e.data as GetInfoData).userCollection);
  	var i;
  	var len = userData.length;
  	for(i = 0; i < len; i++){
    		var user = userData.getItemAt(i);
  		var birthDay = getBirthdayFBDateFormat(user.birthday.toString());
  		
  		//trace(user.first_name + ", " + today + "==" + birthDay + ": " + (today == birthDay));		
  		
  		if(today == birthDay){
   			trace(user.first_name + " " + user.last_name + " has birthday today!");
   		}
  		
    	}
 	
}

And the output is:

Ok, let's make a nice app out of this. Place a bigger text field on the stage.

Name it friendList_txt. Make it multiline and enable HTML inside it. Now we will populate the field with friends. The friends that have birthday will be marked red and linked to an actionscript function.




function onDataRecieve(e:FacebookEvent){
  	
  	var today = getCurrentFBDateFormat(new Date());
  	var userData = ((e.data as GetInfoData).userCollection);
  	var i;
  	var len = userData.length;
 	
  	for(i = 0; i < len; i++){
  		
    		var user = userData.getItemAt(i);
  		var birthDay = getBirthdayFBDateFormat(user.birthday.toString());
  
  		var friend = user.first_name + " " + user.last_name;
  
  		friendList_txt.htmlText += (" <font color='#0000ff'>" + friend + "</font>");
  		
  		if(today == birthDay){
   			friendList_txt.htmlText += (" <font color='#ff0000'><a href='event:" + uids[i] + "'><u>" + friend + "</u></a></font>");
   		}
  		
    	}
 	
}

The textfield will needs to listen to the click event. This means, as soon as we click on the name of the birhtday kid, a notification needs to be sent to him. Here is the code:




friendList_txt.addEventListener(TextEvent.LINK, linkEvent);

function linkEvent(event:TextEvent):void {
 	var uid = event.text;
 	var str:String = " wishes you a happy happy birthday!";
 	var call:FacebookCall = new SendNotification([uid], str, "user_to_user");
 	fbook.post(call);
}

And the result is:

As soon as we click it, we get the result in the notifications panel:

Here is the complete code from frame 1:



import com.facebook.Facebook;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.commands.notifications.*;
import com.facebook.commands.friends.*;
import com.facebook.net.FacebookCall;
import com.facebook.data.users.GetInfoData;
import com.facebook.data.friends.GetFriendsData;
import com.facebook.utils.FacebookSessionUtil;
import com.facebook.data.users.FacebookUser;
import com.facebook.data.users.GetInfoFieldValues;
import com.facebook.commands.users.GetInfo;
import com.facebook.events.FacebookEvent;

var fbook:Facebook;
var session:FacebookSessionUtil = new FacebookSessionUtil("YOUR_API", "YOUR_SECRET", loaderInfo);
fbook = session.facebook;

var uids:Array = new Array();

var call:GetFriends = new GetFriends();
call.addEventListener(FacebookEvent.COMPLETE, onFriends);
fbook.post(call);


function onFriends(e:FacebookEvent):void {
 	
 	var friends = (e.data as GetFriendsData).friends;
 
 	var i;
 	var len = friends.length;
 	
 
 	for (i = 0; i < len; i++) {
  
  		var user = friends.getItemAt(i) as FacebookUser;
  		uids.push(user.uid);
  
  	}
 	var call:FacebookCall = new GetInfo(uids, [GetInfoFieldValues.ALL_VALUES]);
 	call.addEventListener(FacebookEvent.COMPLETE, onDataRecieve);
 	fbook.post(call);
}

function onDataRecieve(e:FacebookEvent){
  	
  	var today = getCurrentFBDateFormat(new Date());
  	var userData = ((e.data as GetInfoData).userCollection);
  	var i;
  	var len = userData.length;
 	
  	for(i = 0; i < len; i++){
  		
    		var user = userData.getItemAt(i);
  		var birthDay = getBirthdayFBDateFormat(user.birthday.toString());
  
  		var friend = user.first_name + " " + user.last_name;
  
  		friendList_txt.htmlText += (" <font color='#0000ff'>" + friend + "</font>");
  		
  		if(today == birthDay){
   			friendList_txt.htmlText += (" <font color='#ff0000'><a href='event:" + uids[i] + "'><u>" + friend + "</u></a></font>");
   		}
  		
    	}
 	
}

function getCurrentFBDateFormat(date:Date):String{
 	var arr = (date.toString()).split(" ");
 	var str = arr[1] + " " + arr[2];
 	return str;
}

function getBirthdayFBDateFormat(str:String):String{
 	var arr = str.split(",");
 	var str = arr[0];
 	return str;
}

friendList_txt.addEventListener(TextEvent.LINK, linkEvent);

function linkEvent(event:TextEvent):void {
 	var uid = event.text;
 	var str:String = " wishes you a happy happy birthday!";
 	var call:FacebookCall = new SendNotification([uid], str, "user_to_user");
 	fbook.post(call);
}

I hope you enjoyed this one. See you next week when we discuss the publishing of news.

To view the entire series please visit http://www.insideria.com/series-facebook-dev.html

Comments

5 Comments

Subscribe to comments. Comment feed

купить квартиру в Праге said:

Wow, I didnt know that facebook programming API is so vast and has so many possibilities for building own code, thatnks!

June 17, 2009 6:04 PM

Juan Zuluaga said:

Hi there! Great article...there's only one thing that bothers me, how can I set up my Application Key without hard-code it in the SWF?

Maybe someone with dark intentions would decompile my SWF and get it, is there a workaround for this issue?

Thanks a lot!

July 2, 2009 7:43 AM

Simon said:

Likewise, I had no idea that the Facebook API was so powerful. I love how these social networks such as Facebook and Twitter have opened their arms to the developers to try and create something truly special. Goalkeeper Clothing

September 2, 2009 10:52 AM

D Bomberg said:

Could you show how to put the app secret and key in a file external to swf, not hardcoded? Thank you. Excellent sharing.

December 13, 2009 5:59 PM

Gary Kling said:

Awesome tutorial! Gives me much help in my new page to learn Spanish, it was launched before long.

December 13, 2009 7:02 PM

Effects and Animation - Hello! Flex 4
Peter Armstrong

This excerpt is from Chapter 4 (Spark containers, view states, effects, and styling) of Hello! Flex 4, by Peter Armstrong. This excerpt is published with permission. Session 18 - Effects and Animation - Hello! Flex 4 In this workshop... Continue Reading
Photo Gallery Mate Framework, With Photo Caching
Pete Mackie

I have been developing Adobe Flex-based RIA applications for nearly three years. My prominent need has been for capable RIA photo galleries. I observed over time that most Flex-based example photo galleries resourced photos—either locally or remotely—from photo files stashed... Continue Reading
Getting Free with GraniteDS
William Drai

A few weeks ago, Justin Shacklette published a very interesting two-part article describing the new features of Adobe LCDS 3 (part 1 and part 2). The first article described the model-driven development features, and the second article focused on data... Continue Reading
Inside HTML5: The Browser becomes a first class RIA citizen
Matthew David

Over the last decade HTML has been trying to be a better RIA solution. First came CSS, then came AJAX and Web 2.0; but, it is not until now with the rapid adoption of HTML5 that the lines are... Continue Reading

Or, visit our complete archive.

O’Reilly: Inside RIA

Home >

Notification Component

Comments

5 Comments

Leave a comment

Tag Cloud

iPad

Latest Features

Podcasts & Screencasts

News & Events

Recommended for You

@InsideRIA on Twitter

Development Series

Archives

About This Site