Create facebook Iframe Application Using flash AS3 API.

A new Updated tutorial have been added,please follow this link below .

http://as3flashcs5.blogspot.com/2011/04/create-facebook-iframe-application.html

please like and post your questions : http://www.facebook.com/pages/FlashCS5-Tutorials/176320862386436

After along research on how I can use flash instead of flex to create facebook application by using the new facebook graph API, I finally create a simple class to connect flash with facebook and i am happy to share it with you.

please be aware to follow below steps because any mistake may give you an error .

so as many of you know already know the first step is to create facebook new application from the developer application as you can see in the picture below :

• when you click setup new application you need to choose your application name and agree the facebook terms ( I choose facetalk) .
• after your application is created you must know the most important parameters in order to connect with facebook ( API key, application ID, application secret ) .
• now click the setting and go to the website tap and fill the site url with your application folder URL so for me i fill it with : http://amazingwork.com/amazingtalk/ so i hosted my files inside amazingtalk folder and in the site-domain just fill it with your domain : amazingwork.com .
• then click the facebook integration tap and now you need to fill the convas url and this is the main URL for your application and every body will access your application thru this URL so for our example I fill it with amazingtalk becuase facetalk is already taken, and in the convas Type please be sure to select Iframe because your application is not related to facebook compiler, u can use any java script , you are not forced to used FBL tags ). finally choose Auto-resize in the iframe size .

at this stage we finish creating our application setting ;) now we will start Writing our code to connect with facebook.

as i found in my research that facebook keep upgrading their code and release new versions of API to allow users to connect with the facebook, so in this tutorial we will connect with facebook using the graph API which the latest version of facebook API.

so since we will use Flash AS3 to connect with facebook you need for sure to install the graph API as3 libraries to connect with facebook, so please click this link below to download this graph API.

Graph API

after you installed the graph ApI, go to flash cs5 and create new flash AS3, then go to file-->action script setting, then as you can find in the picture below click the + sign and choose the GraphAPI Web_1_0.swc as you can find in the .rar file .

now flash will recognize all the facebook classes .

P.S: if you need to create a desktop version please be aware to download the desktop version from google code :

http://code.google.com/p/facebook-actionscript-api/

this will help you to test your API in offline mode before converted to the web version.

also you can download the whole documentation from the google code aslo.

now to make it easy for u i have created simple single tone class that handle the connection with facebook thru flash itself also u can use a java script  to handle the connection :

you can find the code of this class in the source files link in the bottom of this tutorial, so to use this class you need only to copy and paste it in your .fla folder, and then from any place you need to use this class functionality you can write this code :

var oFaceBookConnector:FaceBookConnector = FaceBookConnector.GetFaceBook(Trace_txt);
oFaceBookConnector.APKey = "b1762000d69544ebef65396dfe4a297a"
oFaceBookConnector.APPID = "181390918539668"
oFaceBookConnector.ReDirectURL ="http://amazingwork.com/fbexampletest/index.html"
oFaceBookConnector.addEventListener("Connected",onFaceBookConnectHandler)
oFaceBookConnector.Connect()
function onFaceBookConnectHandler(e)
{
Trace_txt.text = "Connected"
UserID_txt.text = oFaceBookConnector.UserInfo.UserID
}



the Trace_txt is only for testing purpose and you can remove it when you finish your testing.
so as you can notice first of all i get the instant of the facebook object , then i set the importent properties i need to connect to facebook ( APkey, APPID, redirect URL - i use this url to set the permition for the first time user connect to my application)
also i created a custom event to know when my application successfully connected to the facebook .


after we publish the swf  then you need to establish the connection using facebook Javascript graph API, and this can happens using any server pages ( PHP,ASP.net) or even an HTML page .


so after you publish the SWF and HTML page you need to modify the HTML page to connect with facebook.


first of all copy this code in your header tag :
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
    function SetPermissions(ReDirectURL) { 
       top.location.href = ReDirectURL;
       
    }
</script>


in the  body tag and before your SWF object you need to reference to the facebook java script bridge :
<script type="text/javascript" src="FBJSBridge.js"></script>


so by this you finish all itis need to connect to facebook :)
----------------------------------------------------------------------
you can download all you need by follow this link below :

Source Files
Online Demo

if you have any question please feel free to contact me : abed_q@hotmail.com