Integrate 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:

require_login();

?>

Hello !
Play Jamag!
Find out how to embed your Flash games on Facebook (and much more) at emanueleferonato.com

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

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers