Series: Facebook Application Development


This 20 article series will cover RIA development on the popular Facebook platform and will provide samples based on the brand new Facebook ActionScript 3.0 library from Adobe, as well as on the standard approach using the PHP library provided by Facebook.

Mirza Hatipovic
Creating a Hello Friends App using ActionScript 3.0, PHP and Facebook API
As we all know life is much more colorful with friends, Facebook it's the best example on the internet for this case. It's even more colorful when you can use the Facebook API to create applications on that platform. Using Flash, PHP and the FB API we can utilize ActionScript OOP features to make the applications perform better then with standard FBML. I'm not trying to say here that FBML is bad, no, this series will try to teach how to implement the existing knowledge of Flash into the Facebook application platform.
Mirza Hatipovic
Overview of embedding SWFs into Facebook Canvas
Following the first article where we introduced the basic usage of Flash with PHP and Facebook, we are here in the second article to discuss all about the correct embedding of swf's into the facebook canvas. There are a lot of ways of how to do that and everyone of it has its pros and cons. We will discuss this in in detail in this article. Every step will be accompanied by a sample where we will demonstrate the pros and cons.
Mirza Hatipovic
Setting Up AMFPHP for Flash and Facebook API
     Following good software engineering principles and following the goal to make flash based facebook applications easier to develop there are well known technologies to utilize. So far we have been introduced to the basics of Flash - Facebook API communication. In the second article we discussed the various methods to embed swfs into the facebook canvas. Equipped with that knowledge, we can make a good step forward. In software engineering, experts say that we should develop applications “close to the problem”.
Mirza Hatipovic
Creating a Custom API for Flash using Facebook API and PHP
    In the previous article we discussed how to set up the framework for PHP, FB API and Flash. We did a lot of work to make this happen. We tested the framework only with very simple methods that made calls to the FB API and databases. In this article we are going to extend the sample to implement all necessary calls to the api. We will try to find the most important and needed fb api methods and teak them for usage in Flash. All the hard work will be accompanied by a sample that will make the whole article more interesting. We will create a small photo album viewer that will let you send notifications of type "I like this" for every photo to your friends. This sample will be more interesting.
Mirza Hatipovic
Using the brand new Facebook ActionScript 3.0 library
In the 5th article we will deal with Adobes new Facebook ActionScript 3.0 library. It is a brand new product and it is still in beta, but it looks promising. In fact, it has beed there for quite some time and was original developed by Jason Christ. This time Adobe decided to support it and add features. The way the library works differs from the methods from the previous articles because it is completely based on ActionScript and does not use a PHP middle layer. In this article we will explore the library briefly and examine the basic features to get us started. The goal of this article is to create a simple swf file that will connect to facebook.
Mirza Hatipovic
Component Architecture for Facebook Applications
In the last tutorial we discussed the new library that was released by Adobe. The new library from Adobe fits much more naturally into the whole architecture of facebook applications that are built using the Flash platform. We need to know that the previous approach using the PHP library is not useless. In order to create stable and useful Facebook applications we need to know about many ways how to achieve the same goal. If you followed the series from the start then you are on a good way to be able to create truly cutting edge facebook apps as we have discussed have to grab results from DB and we also make use of the ActionScript library.
Mirza Hatipovic
ProfilePic Component
In the last article we discussed how components are built with the facebook api in mind. Now it's the time to do something more with it. We know how things need to be set up in order for the components to work. We learned about sessions, about the tow frame time line structure of the components and we talked about the inheritance of the UIComponent class. The previous example leveraged just a small potion of the methods that UIComponent provides. In this article we will take more advantange of the UIComponent class in order to create a component for the profile pic.
Mirza Hatipovic
Extended ProfilePic Component with Effects
In this article we will extend the ProfilePic component from the last article and show example of how we can use it in real world scenarios. We will create a facebook application that asks the user a question about the displayed friend. Yes, it is in fact a copy of an existing application (I don’t remember the name and I don’t want to make advertising). The application simply switches from one question to another and associates the displayed friend with the question. Like, for ex., the question appears “Would you ever like to date Monica?" and the application user can simply select between “Yes” of “No”. On the other side, you can choose if you want that the answer is send to the user as a notification. Personally I enjoyed the application and will use it as reference to make a flash version out of it. On the other side, we will use the component and add features to it so the sample will demonstrate how useful the component can be in the development process. We will have the freedom to create our own questions. They can be stored either in the database or XML, but in our case it will be stored in a flat XML file.
Mirza Hatipovic
Enhanced status component
In the last article we worked extensively with the ProfilePic component and showed how the component can be used in real time scenarios. We had an interesting example of a real word application with the "Would you..." application clone. I really had a lot of fun working on it and hope you too. For us it's important that we were able to work with components that where previously build based on the previous articles. The goal is not to hurt the "DRY“ principle, which means "Don't repeat your self". Every component that was created needs to reused again so no development time will be spent on them anymore, except when extending it. This tutorial will deal mostly with text. The idea of the application is the following: We need to create some sort of "Mood Checker", an application that will allow us to browse through the statuses of users.
Mirza Hatipovic
Multifriend Selection Component
Welcome back to our series. We will continue to work on components that will help us develop facebook applications faster and with less bugs. There is one quite useful component that will will be used throughout the facebook development and that's the MultiFriend Selection Component. There is already one developed by facebook and is displayed when using standard FBML.
Mirza Hatipovic
Notification Component
    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...
Mirza Hatipovic
Publish News Component
Welcome back to our exciting Facebook ActionScript series. In this article we will discuss one of most important (and most exciting) features of the FB platform, it's the publishing of news. We all know when we log in to facebook, we see plenty of news about our friends. Some were sent by the users, some where sent by applications. In lots of cases, the action is initiated by applications. We see stuff like "FriendX has just completed level 5", "FriendY just left the building" or "John just sent something to his friends", I'm sure you saw a lot of news similar to this on FB. News are an integral part of application because it's one of the ways that the virality of applications is ensured. Suppose we have the fanciest application on FB, what value we have out of this application if we do not publish any news, if we dont make sure the friends are not notified about the action don't in the application? The application simply needs to "talk" and publish news if the application user performed some action. We need to make sure everybody knows that we just topped the high score of the player from Nigeria.
Mirza Hatipovic
User Info Component
Welcome back to the series. This time we are goings to build a really exciting component that will be used to simply display information about the user. Well, you might say why to we need such a component, is there are real purpose behind that? Well, in my opinion, yes. There are a lot of facebook applications out there done in Flash where we see information about the friends etc. During the process of facebook application development, there will always be a need to quickly display information about the specific friend. The information that is contained inside the component could be every bit of information that was entered by the user.
Mirza Hatipovic
Search Friends Component
Welcome back to the series. In the previous articles we discussed topics like publishing of news, sending notifications to specific friends etc. The articles covered topics that are not only bound to the user interface in the facebook application development. This time, we are going to play around with the already existing (but complex) MultiFriend component. The component from the article 11 was quite good, but it really had the potential to be a kick ass component for facebook. There were things I wanted to implement, but was not able to because the whole article covered the basic construction of the component.
Mirza Hatipovic
Send Gifts Component
Sending gifts and items are one of the favorite actions among the millions of facebook users. Friends send items to friends, "buy" gifts, "sell" virtual items etc. Honestly I am not engaged in this activity a lot on facebook, but the number of people willing to send virtual gifts, buy virtual goods is shockingly high! So this article might be underestimated on the first sight, but because I am aware of the trend of sending and receiving gifts, it is worth writing a complete article that covers the trend in actionscript. The number of possible implementations for this component is really countless and in this article we will be able to show only few of them.
Mirza Hatipovic
Facebook App Case Study: Preparing the Elements
Welcome back! Finally we will work on a real world application that will go live. The application that we will be creating will be named “Movie Expert”. One reason why I chose it is because I am an avid Movie fan and I will have lots of motivation to work on it in detail. The other reason is because it is really a sample that has the potential to utilize the facebook actionscript 3 library the proper way.
Mirza Hatipovic
Facebook App Case Study: Integrating YouTube Videos
Welcome back to our series. In the previous article, we discussed the elements that are the necessary building blocks of the application MovieExpert (http://apps.facebook.com/movieexpert/). We created the main swf, we created the invite screen, we worked hard to make the invite screen actually work on our iFrame. Now that we have all those details done, we can move on and concentrate entirely on the application in the swf file. We know that the invite screen on facebook appears only when the use installs the application, the next time he logs in, he will be redirected directly to http://apps.facebook.com/movieexpert/.
Mirza Hatipovic
Facebook App Case Study: Administration module
Last time we talked about how to work with YouTube videos and how to implement those into our app. We worked hard to implement typical features that can be found on most video sites like play, pause, seek etc. As we already know, there is one external library used in our application that allows us to load videos into the swf and manipulate the video using ActionScript 3.0. Now it’s time to actually work on the admin part of the app and the features that allow us and all our application users (players) to add their own videos along with mistakes. This way the application will much more extensible. There are lots of Facebook users who are movie fans and we will give them the ability to contribute.
Mirza Hatipovic
Facebook App Case Study: Front-end Module
Welcome back to our exciting series. In the last article, we discussed about the administrative part of the application, where we implemented a background activity to allow every application user to upload their own videos and add mistakes. This time we will work on the front end that will be visible to everyone by default and where the main game play will take place. Before we start with the development, there are important things that need to be considered. First of all, there will be 14 levels to play, 14 levels means 14 video clips, 14 movie snippets.
Mirza Hatipovic
Facebook App Case Study: Additional elements and gotchas
Welcome back to the series and the concluding article of the exciting facebook series. So far we worked hard to implement features like the front end, administration, loading of YouTube videos etc. In the last article the application came finally to life. We implemented a database that contains 14 levels for the game.

Tag Cloud

Latest Features

Recommended for You

@InsideRIA on Twitter

Archives

  • Or, visit our complete archive.  

About This Site

Welcome to the premiere community site for all things RIA sponsored by O'Reilly Media and Adobe Systems Incorporated.