Download Demo Files (Start & Completed versions for Part 1 & Part 2) In order for the completed code to work you have to put in your Facebook App ID and generated Facebook Social Plugin code in the required fields.
I would also recommend publishing for Adobe AIR 2.6 or 2.7. I have not tested this with AIR 3.0.
The use of the Facebook Like Button in Flash has been pretty difficult to produce. There have been some “work arounds” and “hacks”, but nothing as clear and direct as using the API’s from the ActionScript 3 SDK for Facebook Platform .
Now the ActionScript 3 SDK for Facebook Platform currently DOES NOT have any API’s that allow you to create the “Like” button, but using some other ActionScript API’s and a Facebook’s Social Plugin we can incorporate the “Like Button”.
*Important note*
- This example is publishing for Adobe AIR and not the Flash Player for the web.
- ActionScript 3 SDK for Facebook Platform currently does not have any API’s for the “Like Button”
There are two key components here to get started:
- Facebook Social Plugins - Facebook code snippets that allow you to incorporate Facebook social feature in your website without having to know any of the Facebook Graph APIs.
- Adobe AIR – HTMLLoader class - An Adobe AIR container that will display HTML content.
Create your “Like Button” Social Plugin
The Facebook Social Plugins allow you to quickly integrate your and/or other Facebook data into your HTML pages without having to know anything about the Graph API, FBML, etc. We are going to use the Facebook Social Plugin (let Facebook do the dirty work) and then plug the code into our AIR app.
- Visit: http://developers.facebook.com/docs/reference/plugins/like-box/
Facebook Social Plugin Custom Settings
- Fill in your desired fields. You can use any public Facebook Page URL for the URL section. (eg. myNOTO (shameless plug), Adobe, FlashPlatform, etc)
- Click the “Get Code” button
- Click on “HTML5” and copy both sections of code to a new Dreamweaver document or blank document.
Facebook HTML5 Social Plugin
Create your HTML code
In order for the code to display in the HTMLLoader object, it must be placed in HTML.
- Create a new HTML5 document.
- Paste the “<div>” tag elements after the “<body>” tag.
- Change all double quotes to single quotes. This will allow the code to be used as one String in Flash.
- Add “https:” in front of ” //connect.facebook.net
Facebook Social Plugin HTML
You can copy and paste the code below. Change YOUR_APP_ID to your Facebook Application ID.
<!DOCTYPE HTML><html><head><meta charset='UTF-8'><title>Untitled Document</title></head><body><div id='fb-root'></div><script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = 'https://connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID';fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class='fb-like-box' data-href='https://www.facebook.com/myNOTO' data-width='292' data-show-faces='false' data-stream='false' data-header='false'></div></body></html>Incorporate your “LIKE” button into Flash (AIR Application) Download Demo Files (Start & Completed versions for Part 1 & Part 2)
- Open the file named “facebookNOTO.fla” from here.
- Save your file in your desired directory.
- You will notice: (these components will be used fully later in Part 2)
- UILoader
- Dynamic Text Field
- Text Area Component
- 5 buttons
- Create a Document class. File -> New -> ActionScript File
- Save the file in the same directory as your “.fla” and name it ‘NotoFB.as“ and it is CASE SENSITIVE!!!
This file(NotoFB.as) will be used as our Document Class for the facebookNOTO.fla file.
Create your document class (NotoFB.as)
Create the package, class definition and constructor function
package{
import flash.display.Sprite;
public class NotoFB extends Sprite{
public function NotoFB(){
}
}
}
Import the following classes that will be used in this example.
package{
import flash.display.Sprite;
import flash.html.HTMLLoader;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowType;
import flash.net.URLLoader;
import flash.geom.Rectangle;
import flash.events.Event;
import flash.events.MouseEvent;
public class NotoFB extends Sprite{
public function NotoFB(){
}
}
}
Define properties and initial values. The added code creates a new instance of the HTMLLoader class and defines the options and boundaries for the HTMLLoader object.
package{
import flash.display.Sprite;
import flash.html.HTMLLoader;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowType;
import flash.net.URLLoader;
import flash.geom.Rectangle;
import flash.events.Event;
import flash.events.MouseEvent;
public class NotoFB extends Sprite{
private var html:HTMLLoader;
private var options:NativeWindowInitOptions;
private var boundaries:Rectangle;
public function NotoFB(){
html = new HTMLLoader();
html.scrollV = 200;
html.navigateInSystemBrowser = true;
options = new NativeWindowInitOptions();
options.type = NativeWindowType.NORMAL;
boundaries = new Rectangle(950,55,300,300);
}
}
}
Create a function that will add the HTMLLoader object on the stage. Add the function the constructor function.
package{
import flash.display.Sprite;
import flash.html.HTMLLoader;
import flash.display.NativeWindowInitOptions;
import flash.display.NativeWindowType;
import flash.net.URLLoader;
import flash.geom.Rectangle;
import flash.events.Event;
import flash.events.MouseEvent;
public class NotoFB extends Sprite{
private var html:HTMLLoader;
private var options:NativeWindowInitOptions;
private var boundaries:Rectangle;
public function NotoFB(){
html = new HTMLLoader();
html.scrollV = 200;
html.navigateInSystemBrowser = true;
options = new NativeWindowInitOptions();
options.type = NativeWindowType.NORMAL;
boundaries = new Rectangle(950,55,300,300);
loadFacebookLikeButton();
}
private function loadFacebookLikeButton():void {
var myString:String = 'ADD YOUR HTML5 CODE FROM YOUR PASTED FACEBOOK SOCIAL';
html = HTMLLoader.createRootWindow(false,options,false,boundaries);
html.loadString(myString);
addChild(html);
html.width = 292;
html.height = 60;
html.x = 15;
html.y = 0;
html.addEventListener(Event.COMPLETE, completeHandler);
}
private function completeHandler(event:Event):void {
trace("Facebook Like Button Loaded");
}
}
}
Paste the code that you copied from the Facebook Social Plugin Page.
var myString:String = 'ADD YOUR HTML5 CODE FROM YOUR PASTED FACEBOOK SOCIAL';
After you paste your code, save your NotoFB.as file and return to Flash and set your class as the Document Class for your “.fla” file.
Document Class Properties Panel
Test your movie. You will see the “distractor” animation. When you click on the “LIKE” button you will be prompted to log into Facebook.
Part 2 – Facebook Wall(post/read) in Flash Professional for Adobe AIR
