Be my fan on FacebookIntegrate your Flash game on Facebook
You all should know Facebook. I think it would be interesting to integrate your Flash game into a Facebook application.
There are more options than you can imagine, but at the moment I’ll just embed a game, nothing more. Just remember there will be a lot more.
Obviously, first you have to have a Facebook account and be logged in
Then you have to install the Developer application.
From this page http://developers.facebook.com/get_started.php click on “Add Facebook Developer Application” and you will be able to start creating your own applications.
Once you clicked on that link, you will find a “Developer” item in the left nav button. This is your application control panel, where you can manage your applications.
Click on “Set up New Application”
You will be redirected to a quite unclear page with a lot of fields to fill… don’t worry, you will be out of this step in less than 2 minutes.
Just follow this picture:
Let me explain the most important fields:
Application name: This is the name of your application
Developer Contact E-mail: The email Facebook will use to contact you if there are any problems or important updates
User Support E-mail: Users will be able to mail you at this address
Callback URL: Very important, it’s the URL of the application on your server. That’s the place where you will write your application
Canvas Page URL: Another very important field… this is the URL of your Facebook application… the one you will share. It’s very importat than you choose an URL long at least 7 chars or you won’t be able to submit the form and you will lose all your previously inserted data!
Leave Use FBML checked. FBML stands for FaceBook Markup Language and enables you to build full Facebook Platform applications that deeply integrate into a user’s Facebook experience.
In four words, another language to learn
Application Type must be Website because we are going to embed a web game, and be sure to check Yes on Can your application be added on Facebook? to enable more options
Select Smart size on Default Iframe Canvas Size Option and check Users and All Pages on Who can add your application to their Facebook account?
Application Description: Write here how awesome is your game
Default Profile Box Column: Wide
Side Nav URL: write the same as Canvas Page URL
And you finished this step! You’ll notice you left a lot of blank fields, but at the moment we want to quickly embed a game into Facebook so never mind… you’ll learn how to fill the entire form later
Click on Submit and you will be redirected to this page:
Write down both API key and Secret values
Now it’s time to write some lines of code into your server.
From the Facebook resources page download the PHP (4 and 5) Client Library and uncompress it in the directory you specified in the Callback URL, then create an index.php file with this code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php error_reporting(0); require_once('facebook.php'); $facebook = new Facebook("your API key","your secret key"); $facebook_account = $facebook->require_login(); ?> <div style = "padding:5px"> Hello <fb:name uid="<?php echo $facebook_account; ?>" useyou="false"/>! </div> <div style = "padding:5px"> Play Jamag! </div> <div style = "padding:5px;background-color:black"> <fb:swf swfsrc="http://games.mochiads.com/c/g/jamag/jamag_secure.swf" swfbgcolor="#000000" wmode = "opaque" width="500" height="500" /> </div> <div style = "padding:5px"> Find out how to embed your Flash games on Facebook (and much more) at <a href = "http://www.emanueleferonato.com">emanueleferonato.com</a> </div> |
Line 3: Don’t display errors. With Php4 I got a couple of warnings, so I decided to remove them
Line 5: Including the facebook.php file you previously downloaded from the Facebook resources page
Line 7: Creating a new Facebook class. Be sure to insert your API key and Secret values you wrote down previously
Line 9: Force the user to login and save his data on $facebook_account variable
Line 14: First FBML tag: fb:name renders the name of the user specified, optionally linked to his or her profile.
The uid attribute is the id of the user name you want to show. In this case, the one saved in the $facebook_account variable
The useyou attribute is set to false because I want to display the name and not “you”
Line 20: Second FBML tag: fb:swf renders a Flash movie
swfsrc is the absolute URL of the Flash movie
swfbgcolor is the background color of the movie
wmode specifies if the Flash movie is transparent, opaque or window. If you set it to transparent, you will override the swfbgcolor attribute
And that’s it!!! Now go to http://apps.facebook.com/jamag_game/ to play Jamag on Facebook.
What’s so interesting in this?
Well, first of all you created a Facebook application, and that makes you a Facebook application developer.
Second, and more important, Facebook passes some interesting parameters to the SWF when it is loaded… and could make your game viral… I am going to mess around a bit and write a new tutorial soon.
Meanwhile, don’t forget to play Jamag on Facebook
(20 votes, average: 4.60 out of 5)
Loading ...They can be easily customized to meet the unique requirements of your project.
34 Responses to “Integrate your Flash game on Facebook”
Leave a Reply
Trackbacks
-
Links for integrating Flash and Facebook | Psyked on
June 17th, 2008 6:31 pm
[...] Integrate your Flash game on Facebook (Emanuele Feronato) June 17, 2008 | In Flash | No Comments [...]
-
Integrate your Flash game on Facebook : Emanuele Feronato – italian geek and PROgrammer | Linux and Open Source Resource on
December 29th, 2009 12:01 pm
[...] Go to Source Related Posts:Will Lala Power Web-Based iTunes? (PC World)How to write a FaceBook Application in 10 minutesFacebook and Google: Contrasts in Privacy (PC World)Facebook rolls out new privacy tool (AFP)Toshiba Announces 64GB Flash Memory; Perfect For Next iPhone (PC World) Share [...]
-
Integrate your Flash game on Facebook : Emanuele Feronato – italian geek and PROgrammer | Linux and Open Source Resource on
December 29th, 2009 1:00 pm
[...] Go to Source Related Posts:Integrate your Flash game on Facebook : Emanuele Feronato – italian geek and PROgrammerWill Lala Power Web-Based iTunes? (PC World)How to write a FaceBook Application in 10 minutesFacebook and Google: Contrasts in Privacy (PC World)Facebook rolls out new privacy tool (AFP) Share [...]
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)
I have been trying to add your game on my facebook page but I can’t seem to find how. It would be cool if you could add a flash game to your personal page.
Thats incredible, great way to get more people to play your game!
You think you can do that with myspace apps too?
thats cool. one problem though, I dont use facebook. lol =)
Hi Emanuele – I’ve followed your guide to adding a Flash game on Facebook, but I’m running into probelms. Can you please contact me to run through your instructions? Thanks!!
Awsome stuff emanuele!! Worked a treat first time..
Thanks Emanuele for taking the time to post the instructions. I finally sat down and followed your tutorial and have my first working facebook game:)
Great tutorial, Emanuele!
I’ve ran into one problem, though:
I’ve published my game both on my site and in Facebook (in both cases it is the same SWF).
It seems that when someone enters the Facebook leaderboard, it doesn’t reflect on the leaderboard on my site and vice versa…
As if these are 2 different leaderboards…
I’ve noticed that it doesn’t happen with your game…
http://www.microsheep.com/index.php?option=com_content&view=category&layout=blog&id=2&Itemid=4
http://apps.facebook.com/micro_olympics_mars/
Any ideas?
I followed this also and nothing works for me and Facebook has crap for information on why.
Here is what I am getting when I finished posting all the info and making the index.php page.
The URL http://thepixelcastle.com/ladybug returned HTTP code 200 and no data.
There are still a few kinks Facebook and the makers of Ladybug are trying to iron out. We appreciate your patience as we try to fix these issues. Your problem has been logged – if it persists, please come back in a few days. Thanks!
I wasn’t able to use PHP for some reason to get it to work but I did get HTML to work just not any of the FBML.
This is really helpful for integration of flash game with facebook using php
Any ideas on integrating Google Analytics to track Flash activity within Facebook? If we try to embed the tracking tags within Flash, set to communicate back to the canvas page, using something like”
getURL(“javascript:pageTracker._trackPageview(‘/myflashapplication/
button1′)”)
We’re getting a Facebook sandbox permission error.
Very straightforward tutorial. I have begun to mess around with FaceBook applications myself. And while slowly making progress, its a total headache! I have never had to fix so many bugs in such a short period of time before in my life… heh :P
Same problem as Jerry. Anyone knows a solution?
i am planning on putting a game on facebook and creating a scoreboard, buy i dont know how to connect flash with MySQL…any help there?
does any body know how to make flash game scoreboard for facebook
Thanks a bunch for this tutorial! It enabled me to integrate my first Flash game with Facebook without any problems. The tutorial is still fairly accurate even though the new process is a little different now up on Facebook and developer should be able to figure their way through it. Thanks again, I love your site!
Dave Evans / HybridMind
Hi, thanx for the tutorial, Im gonna try to integrate a game tonight.. I have a question though.. How do you implement the functionality: “Challenge your friends” ?
the game: Jetman, is an example where that is possible..
All the best
Hi emmanuel,
I got game on FB(still develop),
I have troble with score after play that flash game,
any suggestion, or maybe would u share some tutorial or sample game on Fb.
tnx b4
I want to put my flash game on facebook but i have absolutely no clue on what to do for a server.
Could you show us how to set up a server.(perferably free)
Can we download the source files?
thanks.. i’ll try to add my game to fb
Hi, nice work, as always you explain those tricky things which haven’t been explained correctly, any special reason you didn’t use the facebook flash API, I’ve used it and it is really friendly and usefull. Regards.
Won’t work anymore
wont work… i cant make my games works anymore… ny help?
i need help like putting the top of my game who play understand
@Emanuele, the screenshots above do not match with the Facebook App developer anymore. They are different.
at the beginning of developer Application, facebook will assign an API and a Secret value.
Are those the same on facebook resource page?
Or we need to add in game’s new API and Secret value?
Hola gente…Quiero contactarme con alguien que sepa introducir juegos desarrollados en flash para agregarlos a facebook. Esto es trabajo real remunerado. Mandar referencias a GLM producciones. Importante tener referencias de trabajos similares propios o para terceros comprobables.
Saludos
Gabriel Mangano
gabriel@glmproducciones.com
http://www.glmproducciones.com
Director creativo de la agencia publicitaria GLM producciones
Tel 011 4776 7694
Guatemala 48 40
Palermo Soho, Capital Federal, BS AS, Argentina
This won;t work anymore unless you are directly putting your API Secret Key into the source of your Flash code.
Facebook sends something called a secret session key that replaces the need to put your secret key in your code but ONLY if the SWF being loaded resides on the same domain as the canvas callback!
Therefore, using MochiAds to host your SWF file is risky. They DO encrypt your source so your secret key is safer, but we all know how easily Flash movies can be decrypted. Nothing can stop someone who makes a living off of hacking other peoples Flash code.
Therefore the best way is to just host the file yourself so you can take advantage of the great secret session key.
ma farli in italiano sti tut, emanue’?