Wanting to try my hands at integrating Adobe Flex with their Facebook API. The 1st stop was to Adobe’s website where I found this tutorial on creating a Flex application and adding their Facebook API (Note : This is a standalone Flex app, not a Facebook Flex app). The tutorial went well and was simple enough to follow. The only problem is that logging into Facebook from the Flex app produces a popup window.
Next, I went to the next tutorial which covers deployment of a Flex app into a Facebook iFrame which was what I wanted. So I went through tutorial #2 and when I ran my Flex app from my Facebook account. The same popup window appears.
Now, I have played enough Facebook games to see that they do not have this popup window when the games prompt me to grant them permission, so why does this Adobe Flex tutorial show this popup window? Besides, some people who use popup blockers may not see the popup.
Looking around, I found nothing that could solve my problem until I was randomly reading articles on Flex and Facebook development when I came to clue #1 which was this tutorial regarding SWFObject
Then my “programming” sense kicked in and I started to sniff around google for clues. After a few hours of searching and editing, I finally discovered how to get rid of that irritating popup window and put everything on 1 canvas. So here are the steps which I will outline
- Create a swfproxy.php PHP file and add this into the PHP file so that it consists of only this
<?php
header('Content-type: application/x-shockwave-flash');
header('Expires: Thu, 01 Jan 1970 00:00:00 GMT, -1');
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
echo file_get_contents($_GET['swf']);
?>
- Copy the entire line of code and insert your Facebook app API key and change the swfobject.embedSWF(“swfproxy.php?swf=fbconnect.swf” segment where you replace fbconnect.swf with the name of your swf file (e.g swfproxy.php?swf=foo.swf) and save the file as index.htm
<html>
<head>
<title>Main</title>
<!-- include swfobject library -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function navigateTo(url)
{
window.parent.location.href = url;
}
function openURL( url, target )
{
try
{
var popup = window.open( url, target );
if ( popup == null )
return false;
if ( window.opera )
if (!popup.opera)
return false;
}
catch(err)
{
return false;
}
return true;
}
</script>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
//define your flashVars from the URL GET string
var flashVars = {};
var api_key = "";
var channel_path = 'xd_receiver.htm';
FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init(api_key, channel_path);
});
var fb_sig_added = 0;
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ) {
var strQueryString = strHref.substr(strHref.indexOf("?")+1);
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ) {
var aParam = aQueryString[iParam].split("=");
flashVars[aParam[0]] = aParam[1];
if (aParam[0].toLowerCase() == "fb_sig_added")
{
fb_sig_added = aParam[1];
}
}
}
// first check if they have authorized the app, if not
// redirect them to the login page.
if (fb_sig_added == 0)
{
//alert('0')
window.parent.location = "http://www.facebook.com/login.php?api_key=" + api_key + "&v=1.0&canvas=1";
}
else
{
// load the flash movie.
swfobject.embedSWF("swfproxy.php?swf=fbconnect.swf", "flashContent", "700", "500", "9.0.0", "expressInstall.swf", flashVars);
}
//create your instance of your .swf
</script>
<!-- this is where your flash content will be placed when created -->
<div id="flashContent"></div>
</body>
</html>
- Download the SWFObject Javascript file and unzip it to a folder
- Do the same for xd_receiver.htm
- Put xd_receiver.htm, expressInstall.swf(Look in the SWFObject folder), swfproxy.php, index.htm, swfobject.js and your swf file all into the same directory
Now, if you have done everything correctly, you will see the disappearance of that irritating popup window and the “grant permissions” window appearing in the same window as your canvas
Pingback: ajf7688 Blog - Gibson's Blog ยป Adobe Flex tutorial + Facebook API = Not Very Good
I love you! This was driving me absolutely insane. I figured it would be easy or that there would be official documentation somewhere, but no. Thanks so much!
Glad you found the tutorial helpful, Lance. This issue cost me quite a number of hours to fix
Just want to say that this helped alot! Thanks!