How to Embed a Flash into a Simple Facebook Application.
Published 5/22/2010 — This tutorial will show you how to make a simple Facebook application and embed a flash into your Facebook application. All without writing a lot of code, because I'm not very good at writing code either. You can use my example to experiment with own your own and create your own apps. O.K. So let's get started.
First you are going to need this.
Facebook Developers App.
http://www.facebook.com/developers/
This is where you will setup and manage any applications that you make.
Once you're inside...
Click the "+Set Up New Application" button to get started. Give your App a name. I named mine "Embed Tutorial". Agree to the terms and save.
On the next screen you will see many options. Many are obvious. We'll concentrate on those not so obvious.
Canvas:
Canvas Page URL: This is the Facebook URL to your app.
I entered "embed_tut" My app will be accessible using a Facebook URL like this:
http://apps.facebook.com/embed_tut It must be at least 7 characters long. The "CANVAS" is the area on a Facebook user's page where the app is displayed.
Canvas Callback URL: This is where the app is actually hosted.
http://mysite.com/embed_tut/
Don't forget / on the end.
Post-Authorize Redirect URL: leave blank for this application.
Render Method : Iframe It's the easiest so that's our choice.
Connect, Widgets, Advance, &
Migrations: Do nothing to these.
Save your settings.
Now on this Screen you will see information about
the app's details and
some links to
edit the app. At the very bottom notice:
Example Code
Get started quickly with some
example code!
Click on the example code link and a window pops opens with some sample code and some instructions.
Download Facebook's PHP Library:
'http://pearhub.org/get/facebook-0.1.0.tgz'
You need to
Download and
Save this file. Unzip, & Upload the contents to the server where your app is hosted,
making sure they are in the folder that holds your app files. On my server I created a folder named "embed_tut"
to hold my app files.
Remember this must match the Canvas Callback URL: http://mysite.com/embed_tut/
Now we're ready to make our index.php page.
----------------
Create index.php page:
Copy the sample code provided. We're going to use some of the code to make our index.php
file.
Open an html editor or notepad and paste in the code we copied from the example. The code contains the important parts like the App ID, KEY & SECRET, Granting Permissions and displaying the Users Name.
Running this code in the Iframe Render Method doesn't work and running this code in the FBML Render Method works somewhat but still returns errors.
In this tutorial we will use the Iframe Render Method and use parts of the sample code mixed with some normal html.
Here's a run down of the code for my index.php page.
The first bit of php code handles the login and brings up the grant permissions request if it's the users first time visiting the app.
The next bit of php code will greet the user showing their name.
Some normal html displays more text and the flash.
The code near the end is the JS SDK. Needed for Like box and other features.
The code for my index.php page.
Be sure to enter your AP ID, KEY & SECRET before using the code.
Upload your index.php file to the app folder on your server. If your server
doesn't support PHP remove the PHP from the code and it will work minus a
few features. This is what I'm doing since my server doesn't support PHP.
Test Your App: Access your app thru Facebook. Don't just
view the index.php on your server.
Access your App from the Developer App.:
http://www.facebook.com/developers/
Select your app. View your app's profile.
Click Go to Application.
You can also access your app at:
http://apps.facebook.com/your_app_name/
Now spruce up your app's profile page and suggest to all your friends,
including me!!
See you around!
Chas.
Embed Tut Profile Page