Tuesday, April 26, 2011

Create facebook Iframe Application Using flash AS3 API ( Updated Version ).


After I have received a lot of requests to update the old tutorial on how to create simple flash application, I decided to create new simpler tutorial with a snap shots of all the steps to accomplish this task, so please if you have any question please posted on my above facebook page ;)

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 abedtutorial) .
in the new updated api  the application ID is the only parameter you only need to know in order to connect to facebook.

  • 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/abedtutorial/ 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 abedtutorial, and then choose Auto-resize in the iframe size .
  • finally, click the advance tab and fill it as you can in the image below :

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

so since facebook and adobe updated their API, in this tutorial i will add all the libraries you need along with the whole source codes files.

finally, you need to make below changes with your application parameters to make it work :
  • in the Net->FacebookUserConnector.as : change the below appid with your App id.
    • private var appId:String = "179085902140993";
  • in the index.aspx just replace below variables with your app paramters
    •   var APP_ID = "179085902140993";
    •   var REDIRECT_URI = "http://apps.facebook.com/abedtutorial/";

by changing above two points you can now get User Information from facebook using flash as you can find in the online demo :
so by this you finish all itis need to connect to facebook :)
----------------------------------------------------------------------
you can download all you need by follow this link below :









at

11 comments:

  1. UnknownApril 26, 2011 at 12:57 PM

    I'm stuck again Abed... i made the changes to the .as and aspx files yet when I run the "abedtutorial.html" or the .swf...all I see is "init"... sorry to be such a bother but can you help?

    ReplyDelete
  2. Abed Allateef QaisiApril 26, 2011 at 9:56 PM

    hi ricky,

    you need to use server page such as ASP or PHP file, I also faced a lot of problems when I used an html cause their are server variable sent from facebook Iframe as i think.

    ReplyDelete
  3. Abed Allateef QaisiApril 26, 2011 at 9:57 PM

    and also please be aware that all the index.aspx page contain server tags which is for sure not valid in the html page.

    ReplyDelete
  4. AnonymousMay 11, 2011 at 4:18 AM

    Thanks man..After few days of Google search for actionscript example, only your version is working well.

    ReplyDelete
  5. trueliesJune 14, 2011 at 5:49 AM

    I am not getting the output as it shows only the below text
    "
    Init
    ---------------------" .
    I have changed the app id as mentioned by u and also loaded the files in a local xamp server..

    ReplyDelete
  6. AnonymousSeptember 27, 2011 at 7:17 AM

    excellent tutorial although i did have a couple of problems getting to work in facebook.

    so just to clear up any misunderstanding follow the simple steps above but as a final step create an "index.php" file with the line:



    and save it to your canvas page dir. (in the example above it would be: http://amazingwork.com/abedtutorial/)

    ReplyDelete
  7. AnonymousSeptember 27, 2011 at 7:18 AM

    ""

    ReplyDelete
  8. AnonymousSeptember 27, 2011 at 7:20 AM

    won't let me post php script but all you need to do is include the index.aspx file

    ReplyDelete
  9. custom facebook appNovember 18, 2011 at 12:07 AM

    i would like to join your facebook fan page

    ReplyDelete
  10. facebook applications developersJune 24, 2012 at 7:58 PM

    This post was simply interesting. It was well detailed and understandable. You did a good job. Thank you and keep sharing.

    Shasing

    ReplyDelete
  11. UnknownJuly 29, 2013 at 11:29 PM

    thanks for your information I have a blog about
    Tutorial Adobe Flash CS5

    ReplyDelete

Subscribe to: Post Comments (Atom)

Create facebook Iframe Application Using flash AS3 API ( Updated Version ).

please like and post your questions :  http://www.facebook.com/pages/FlashCS5-Tutorials/176320862386436 After I have received a lot of requ...