The Morphic Group

For me, Facebook (free-access social networking website) is a guilty pleasure. I've spent more time on this site than I care to admit. When the chance came, I set out to use my mighty morphic skills to build a Facebook application. My goal was to create an application that makes phone calls from within Facebook. I had a little help by using Ribbit as my co-pilot.

What is Ribbit? It is an application framework that allows you to interact with telephone networks. You can basically send text message and make phone calls to mobile and regular phones. Right now, you can a request Ribbit account to use applications that utilize this platform. The Ribbit legal info can be found here. (For this blog, I am going to assume that you are a developer who is or will be using this platform for your application. You can get an account here.)

The concept was straight forward. Display my friends and create a phone book by adding their phone number, and call them up through the main application swf. My application uses Flash, Javascript, PHP, Ribbit Framework, Facebook API, and MySql database. I will primarily discuss the Facebook API FBML (Facebook Markup Language) with PHP, and how I used the Ribbit API in Flash.

First, it is a good idea to get acquainted with Facebook API by review and/or creating sample Facebook applications. You first need to look over at the developer section. As it states, you should be familiar with HTML, scripting languages such as PHP and JavaScript and a database like MySQL (if you want to contain any application state). You will be essentially hosting your application and interfacing with the Facebook site via their interface and setup. View the Basic Application Architecture to get an idea of how the system works. It is also helpful to run through their sample applications to understand what you can and can't do. Demo Applications

Here are a few good links I found helpful:
- Creating your first application
- Developers Wiki Page
- Developing with the Facebook Platform and PHP
- FBML Reference
- Test data retrieval of Platform
- PHP Client files for Facebook integration

You can either build your application using FBML (self defined markup language) or in an external web site with an iframe. For my application I used FBML. There are some HTML and Javascript techniques that will not work well with FBML. The parsing of the markup causes issues when you use quotes or parenthesis in a particular ways. It is a matter of trial and error (Error 500 to be exact).

Here are some tips:
- Avoid using inline Javascript, use function calls.
- Use a tool like Firebug to debug Javascript.
- I would also suggest enabling PHP log errors on your hosting server to troubleshoot issues cause on the server-end.
- Remember that the tags need to be written well formed. You must make sure you close tags.
- When you set up your application in the developer page, make sure that the canvas url is all in lower-case.
All in all, I always found a solution that would work. So don't give up.

FBML has tags for rendering flash and javascript bridge embed code. From the documentation, this tag (Fb:fbjs-bridge) seems to be fairly new. There must have been a big request for this feature because the rendered html in the FB:swf has allowScriptAccess set to none.  As the documentation states "Facebook prevents direct script access from flash"(1). The Javascript bridge is essential for interaction with the flash swf.
- code sample including javascript, php library and fla
- info on FB:swf (1)
- info on Fb:fbjs-bridge

Make sure that you add this file at the root of your web domain to prevent security issues:
...
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="apps.facebook.com" />
<allow-access-from domain="apps.*.facebook.com" />
</cross-domain-policy>
...

Now that we have the basics down on setting up the application for Facebook, I will give a few highlights of my application (Call a Friend). I won't go through the setup and actions (update, select and insert query) of the database and html form.

- To display all my friends, I reference get_friends() method from my instance of the Application API and run through the array object returned.
Something like this:
php
....
foreach($fb_friends as $friend){
$fbml .= '<div style="clear: both; padding: 3px;" >'
.   '<fb:profile-pic  uid="' . $friend . '" size="square"/> '
.   '<div height="20"><fb:name  uid="' . $friend . '" capitalize="true"/></div>'
}
echo $fbml;
....

- Within that listing of friends, I make a call to a Javascript function to send up the phone number
Something like this:
php
...
$info = '555-555-5555';
$fbml .= "<input type='button' name='callButton' value='Call Friend' onClick=callFriendPhone('" . $info . "') /> ";
echo $fbml;
...

html
...
<fb:fbjs_bridge />
<div id="swfContainer"></div>
...

javascript
...
var swf = document.createElement('fb:swf');
swf.setId('my_swf_id');
swf.setWidth('200');
swf.setHeight('100');
swf.setSWFSrc('[absolute path]fbjs.swf');
document.getElementById('swfContainer').appendChild(swf);
function callFriendPhone(phone){
document.getElementById('my_swf_id').callSWF('callFriend', phone);
}
...

So just to explain the Javascript... I'm getting the reference of the swf tag container. Which calls the internal actionscript method callFriend() with parameter (phone number). Make sure that the fb:fbjs_bridge tag is included on the page. Notice that the fb:swf tag is created dynamically and added to a div section. Check out my code sample as an example of this functionality.

This is a good time to talk about the embedded Flash Application which interacts with Ribbit. Before hand, I created a developer account on http://developer.ribbit.com. From there I downloaded the flash kit. Using Flash CS3 to build my swf, I referenced the classes for Ribbit by adding the "RibbitAPI_2.5.0.1070.CS3" component into my library. If you haven't already, I would highly suggest playing around with the samples and reading the documentation on this site.

There are three parts to my application:

The login window allows the user to login with their username and password.

The phone interface contains the status, phone number input, volume control of mic and sound, and digit buttons. This interface references a local connection to the Javascript/Flash bridge.

Lastly, the call log interface displays data grid consisting of recent calls.

These parts interact with my service manager that holds the Ribbit Framework reference. It's main purpose is to pass the application and developer id to the service, log into the service and add event listeners to Ribbit's AuthenticationEvent and Ribbit Callmanager's CallEvent. After logging into the Ribbit service, I reference Ribbit's callManager object to make and end phone calls. This object is also used to get call logs to display all recent calls made with this account and reference the call state ( Ringing, Answered, etc.). View Source of RibbitServiceManager.as

All in all, the Ribbit framework was straight forward and easy to use. The developer site gives a lot of helpful information on getting your application up and running. The only drawback I had was that I could not allow users to log out. I'm getting this error: "TypeError: Error #1009: Cannot access a property or method of a null object reference." within the Ribbit API. There seems to be a problem with the current library component. Here are a few forum posting that I found Forum post 1 Forum post 2 .

Maybe I'm getting this error because I'm not using their visual components. My colleague Seth is building a cool Ribbit app in Flex. I don't think he is having the same problem that I have. For now, I've disabled this feature in my application.

Well... I had a lot of fun building this application. If you have Facebook and want to check it out, hit this link : http://apps.facebook.com/callafriend/

This application is still a beta. It will only be used as a demo. It may be changed or reset at any given time.

I welcome any feedback or comments.

Tags: facebook, flash cs3, javascript, php, Ribbit
Posted in ActionScript, Flash, Reviews

This entry was posted on Wednesday, February 18th, 2009 at 12:47 pm and is filed under ActionScript, Flash, Reviews. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.