Email Updates RSS Subscribe
Line

This blog is created and maintained by the technical team at Hook in an effort to preserve and share the insights and experience gained during the research and testing phases of our development process. Often, much of this information is lost or hidden once a project is completed. These articles aim to revisit, expand and/or review the concepts that seem worth exploring further. The site also serves as a platform for releasing tools developed internally to help streamline ad development.

Launch
Line

Hook is a digital production company that develops interactive content for industry leading agencies and their brands. For more information visit www.byhook.com.

Line

Facebook “Like” Button in Flash

Line
Posted on August 3rd, 2010 by Jake
Line

Facebook Like Button in Flash: A Tale of Broken Dreams and Tortured Souls

It all started so innocently, “Hey, can we implement The Like Button in flash?”. Seemed like a very average and reasonable request. I mean really, how hard could it be? Its all just http requests right? Shouldn’t be an issue… Turns out its like agreeing to step into a ring with Kimbo Slice, assuming that anyone with a name like “Kimbo Slice” couldn’t possibly put up much of a fight.

Consequently, this post has two parts. The first part that explains what we ended up with, and the second part which is a recount of what essentially turned out to be a twisted trail littered with the shards of broken dreams… I highly suggest reading part two first. However the TL;DR effect will probably kick in on this post. So we are putting the working bits up front.

Part 1 – Mostly Successful
So, the original goal was to create a duplicate of the Facebook “Like Button”. Which means that we wanted to make a component of sorts that folks could drop into their project, and feed it a URL to be “liked”, just like the Javascript and iframe versions of the Like Button. This was not to be. I’m not saying its impossible, but its far from trivial. Please see Part 2 below to find out why its so difficult. However, we still wanted to have some semblance of a Like button for people to be able to use. So we worked out the next best thing. The answer is within Facebook Connect.

We have a working solution but there are some disadvantages when compared to Facebook’s Like Button. In order to use the Facebook API to “Like” something, you will actually need to have a post to like already set up. Which means you will need a page with posts on it that you can “Like”. This is a stark difference to how the “real” Like Button works, with which you can like any URL passed to it, and Facebook itself manages the creation of the objects within the Facebook system for the URL automatically. The other inconvenience is that in order to “Like” a post on a Facebook page, the user must also “Like” the page itself. This cannot be done through the Facebook API, which means we need to find a way to interface with the Facebook LikeBox or FanBox components.

So in order for our solution to work for you, you will need:

  • A registered Facebook Connect app
  • A company Facebook Page
  • A post on that page

While they are inconvenient requirements, the process will help drive traffic to places where you have a presence, and anyone that clicks the new Like Button, will have a standard “Like” notification posted in their Recent Activity section on their wall. So not all is lost. The trick here is to make the process the least annoying as possible for the user. So here is an in-depth look at our solution.

Our working example that we will be building during this post can be found here:
http://labs.byhook.com/hookconnect/HookConnect.html

And the source here:
HookLikeButtonExample.zip

First Things First
To get started, you will need set up a Facebook Connect application by going here:
http://www.facebook.com/developers/createapp.php

If you do not already have the “Developer” application installed you will be greeted with a window that looks similar to this:
Become A Developer

Once you click “Allow”, you will be redirected to the “Facebook Developers” home page. Here at the bottom right you will see a “Status” section. Keep an eye on this as often as possible, because this seems to be one of the only places to get a bit of a heads up on changes and bug fixes to the api.

As a quick note, to get back to the developers page without creating a new app, just go here:
http://www.facebook.com/developers/

If you are now not sitting at the “Create Application” screen, click the “+ Set Up New Application” button in the upper right hand corner of the Developer page. It should look like this:

Type in the name you want to give your application, select “Agree” (after reading the Facebook Terms of course), and click “Create Application”.

This will bring you to your application settings:
Application Settings

Thankfully for a “Connect” app, there are very few things we need to set up. Go the the “Authentication” section and uncheck “Users” and “Facebook Pages”, since this app won’t be installed for people to use it on Facebook.

Next go to the “Connect” tab and fill in the Connect URL. This is basically the URL from where the api calls will be made. In this example’s case it will be from “http://labs.byhook.com/hookconnecttest/”

You will also need to fill in the “Base Domain”, which is simply the domain from which the API calls will be made. In our case its “byhook.com” (without the quotes).

In the Advanced tab, make sure your application type is set to “Web”.

That is pretty much it. Easy right?

Facebook Connect
So Facebook Connect apps work like this. Your client app is launched by the user. Then your app pops open a browser window, and makes the standard Facebook Auth call:

"https://graph.facebook.com/oauth/authorize?client_id=_appID&redirect_uri=redirectURL&type=user_agent&scope=appScope&display=popup"

Basically, that is the only reason we need to create a connect app at all. Its simply get access to the authentication system. The Facebook app portion isn’t used for any other reason really.

At this point the browser window popup is on Facebook. If the user is already logged into Facebook, the pop up is redirected to whatever was put in the redirect_uri with the addition of the access_token hash appended:

"#access_token=142459119113770|2.EEdhWucXWlnNxaUX3o608A__.3600.1280768400-100001308505549|55r0b4qYjCI-SOMEMORESTUFF.&expires_in=4419"

If you remember from our previous Facebook post, the access token is passed along with most of the API calls made from your app. So your app will store that token, and use it with the Facebook web requests.

If the user is not already logged in, the pop up will be redirected to Facebooks Login pop up. Once they login, or cancel, the pop up will, like in the other situation, be redirected to the URI you passed in. If the login was a success you will get the access token, but if the user canceled you will get:

"&error_reason=user_denied"

appended to your URI.

The trouble with the pop up, is that we still need that access token passed back into our flash app which resides in the original browser window. The first thought was to use the window.opener reference in the browser and call a JS method that would then pass that token into the flash app in the original browser window. However we discovered that Chrome will block the function call if its not called from the window that contains that function.

Here is a quick example demonstrating the issue:
http://labs.byhook.com/likebutton/ChromeFunctionExample.zip

So we needed another way to get the token back to our flash app. We ended up passing that information through a LocalConnection, which we will talk about in more depth later in the post.

With a basic understanding of how a Facebook Connect app is set up, and flows, lets get this all into Flash, shall we?

Setting Up The Example
I first want to point you to Yoz’s blog post about Facebook Connect with Flex:
http://blog.yoz.sk/2010/05/facebook-graph-api-and-oauth-2-and-flash/

During the creation of this Flash Like Button, that post was referenced for the overall Connect flow. He also had the great idea of storing the current access token into a Local Shared Object for an attempt at a seamless (behind the scenes) user authentication. Our Connect implementation ended up being somewhat different, but we certainly store the access token for later use, thanks to his post. Thanks Yoz!

In order to get our example running, you need to set up a Facebook Connect app as stated above. Then download our example here:
HookLikeButtonExample.zip

Lastly you will need to download ShadowBox from:
http://www.shadowbox-js.com/

We will be using ShadowBox to display the Facebook LikeBox for the situation where the user has not yet liked our company page, but wants to Like a post.

On your web host in the directory where you set your Connect url, make a /js folder and extract the shadowbox code into a folder called “shadowbox”. So the whole path looks like /js/shadowbox/shadowbox.js (and the other files).

Also in the /js folder put the jaclib.js, shadowboxEnabler.js and swfobject.js file from our example.

In the root directory (just above the /js folder) put the AuthConnector.swf, ConnectCallback.html, expressInstall.swf, HookConnect.html, and HookConnect.swf files from our example.

Now update the APP_ID (to your new Facebook app id), PAGE_ID (company page) and _postID (a post id from the company page) vars at the top of HookConnectMain.as. Recompile the HookConnect.fla, and reupload the HookConnect.swf file to your host.

Pop open a browser and hit the HookConnect.html page from your host. You should now be able to like the hell out of your post :)

I know, I know.. “bbbbut where do I get the PAGE and POST IDs!?”

The page ID can be found in the link to the company page. For instance the Hook page link:
http://www.facebook.com/home.php?#!/pages/Hook/106749192712698

That number at the end is the Page ID.

To get the Post IDs you can use the example app from our other Facebook Post:
Hook Facebook Loader Example

In the “Item ID” field put your PageID, and then in the GRAPH API Call field, put “posts” (without the quotes). Now click “Get Info” and you will get the info you need on the right. You will see an “id”: just before the “from”: line. That ID looks like PAGEID_POSTID… you just need the number after the underscore. So the first post on the Hook page has an ID of 122857984426987.

From here you should just be able to new up a LikeButtonControl wherever you like in your project (as seen in HookConnectMain.as in the handeAddedToStage() method) and get your Facebook on!

Flash Like Button
By now, hopefully you have messed with the example a bit and got yourself a working Flash Like Button. Here is a bit of a rundown of how it all works. With Flowcharts! :)

Oh stop your whining, its way easier to look at these charts than to read a million lines of my blathering to get the gist of whats happening with our Like Button :) .

This is the flow of the initial Like Button Load
Like Button Initial Flow
Click to enlarge.

The is the flow for when the Like Button is Clicked
Like Button Click Flow
Click to enlarge.

A quick note on pop up blockers
Not surprisingly, each browser handles pop up blocking differently. This makes it difficult to make an OAuth app that doesn’t annoy the user by requiring extra clicks. What we would have liked to do is when the user clicks the Like Button, make a request using the saved token, and see if that was successful. If it comes back and is not successful then pop open the Facebook OAuth page. The issue with that is the pop up comes as the second request after the initial click. The browser tracks the click and seems to allow one request before it starts blocking things. (this is the case with most browsers… Opera differs here however)
So the blocking seems to work like this for the different browsers (as far as our quick tests have shown):
Opera:

  • Blocks pop up even if its right after the click
  • Blocks second request pop ups (after a click)
  • Blocks non-click pop ups
  • Blocks Pop ups called from within flash.

IE:

  • Allows pop up just after click
  • Blocks second request pop ups (after a click)
  • Blocks non-click pop ups.
  • Blocks pop ups called from within flash, unless its right after a click.

Chrome:

  • Allows pop up just after click
  • Blocks second request pop ups (after a click)
  • Blocks non-click pop ups
  • Allows all pop ups from within flash (no click required)

FireFox:

  • Allows pop up just after click
  • Allows Second request pop ups (after a click)
  • Blocks non-click pop ups
  • Allows pop ups from within flash (no click required)

This means if there is any chance that we will need the Facebook login pop up, we have to force a pop up on the click. In most cases this is fine, however there is a slight annoyance to the user in these two specific cases:

1) If the user is logged into Facebook, but has never been to our page.
In this case, we don’t have a saved access token. In order to get this, we will need to force a pop up on click. Since the user is logged in, the pop up will come up, and then immediately disappear. Not a huge deal, but not completely seamless either.

2) If the user is logged into Facebook, when they come to our page, then logs out of Facebook in another tab, while they are still on our page, then clicks the like button on our page.
At this point, we make the request and find out that our token is no longer valid. Unfortunately we cannot pop open the log in box now because our 1 request per click has been used up. So we have to inform the user to click the like button again, or log back into Facebook…

So the browsers traded convenience for security… I’m cool with that.

The Nitty Gritty
There are 3 major parts to this whole deal. The FacebookConnectManager, LikeButtonControl, and the AuthConnector.

The FacebookConnectManager deals with all of the mess of getting an access token from Facebook. This has two main starting methods, connect() and quickConnectCheck().

The quickConnectCheck() method will connect to facebook as far as possible without any user intervention. As soon as user intervention is needed, the process stops. This means if there is a saved access token, it will attempt to verify if its good or not. If it is still good, it sets “isConnected” to true, and saves off the user’s Facebook ID for later use. If there is no saved token, or the token is not valid, it stops. In either case, when its done it will dispatch a FacebookEvent.QUICK_CHECK_COMPLETE event.

The connect() method will attempt to verify with whatever information it has, and if user intervention is needed, it pops open the appropriate Facebook Authentication window. If a pop up is required it also sets up a LocalConnection so that when the user is finished with the Facebook authentication pop up, the AuthConnector can send back the new access token. The name of the LocalConnection is generated based on the time elapsed since the app was started. This LocalConnection ID is passed to the pop up in the Redirect URI parameter for the Facebook Authentication Pop up. Please refer to the openFacebookPopUp() method.

protected function openFacebookPopUp(localConnectionID:String):void
       {//openFacebookPopUp
           //Update redirection link with new local connection ID
           var lcParams:String = localConnectionID;
           var fullRedirect:String = (_redirectURI + "?lcid=" + lcParams);
           var url:String = buildAuthURL(fullRedirect);
 
           if (ExternalInterface.available)
           {//handle through js
               var id:String = ExternalInterface.call("getSwfID"); //ADDED by addSWFFinder()
               var name:String = jsWindowName;
               var props:String = "width=670,height=370";
               var js:String = 'window.open("' + url + '", "' + name + '", "' + props + '");'
               ExternalInterface.call("function(){" + js + "}");
           }//handle through js
           else
           {//flash
               Log.log("Opening Facebook Webpage");
               navigateToURL(new URLRequest(url), "_blank");
           }//flash
       }//openFacebookPopUp

Once the access token is passed back from the AuthConnector, the FacebookConnectManager dispatches a FacebookEvent.AUTHORIZED event. If the user cancels the login process, the FacebookConnect Manager dispatces a FacebookEvent.AUTH_FAILED event.

The Facebook Authentication window is only the first half of the Login/Auth process. The second half is the callback after the login has been completed. This is where the AuthConnector comes into play.

The Facebook Authentication window redirects to whatever you passed in with the “&redirect_uri” parameter. In this case we pass in a URL to our ConnectCallback.html file with a “&lcid” parameter like so:

"http://labs.byhook.com/hookconnect/ConnectCallback.html?lcid=_AuthConnectorLC_12005392"

If you open the ConnectCallback.html file, you will see that it is basically loading a swf, our AuthConnector swf. When the AuthConnector is added to the stage, it calls on a bit of Javascript from the ConnectCallback.html to retrieve the passed in local connection name and another piece of JS to grab the passed in token hash:

private function handleAddedToStage(e:Event):void
       {//handleAddedToStage
           removeEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
 
           if (ExternalInterface.available)
           {//get params
               //Get access token
               _token = getToken();
 
               //Get LocalConnection ID
               _lcID = ExternalInterface.call("getLCID");
 
               if (_lcID && _lcID != "")
               {//send token
                   _lc = new LocalConnection();
                   _lc.addEventListener(StatusEvent.STATUS, handleStatus, false, 0, true);
                   _lc.addEventListener(AsyncErrorEvent.ASYNC_ERROR, handleAsyncError, false, 0, true);
                   _lc.addEventListener(SecurityErrorEvent.SECURITY_ERROR, handleSecurityError, false, 0, true);
 
                   //Send token
                   Log.log("ID: " + _lcID);
                   _lc.send(_lcID, "confirmAuthentication", _token);
               }//send token
           }//get params
 
 
       }//handleAddedToStage
 
       private function getToken():String
       {//getToken
           if (ExternalInterface.available)
           {//get hash
               var hash:String = ExternalInterface.call("getHash");
               var token:String = FBUtils.hashToToken(hash);
               return token;
           }//get hash
 
           return null;
       }//getToken

Now that we have the local connection name and the access token, we can send that info to our FacebookConnectManagerin the other browser window.

If the send is good, we call another bit of JS to close the pop up.

private function handleStatus(e:StatusEvent):void
       {//handleStatus
           switch(e.level)
           {//switch
               case "status":
                   if (ExternalInterface.available)
                   {//close window
                       ExternalInterface.call("closeWindow");
                   }//close window
               break;
 
               case "error":
                   Log.logError("Send Failed: " + e.code);
               break;
 
           }//switch
       }//handleStatus

If we have a good token, confirmAuthentication() is called via LocalConnection on the FacebookConnectManager. This starts the token verifcation process, which will save the token locally.

The last piece is the LikeButtonControl itself. It essentially waits around on events from the FacebookConnectManager, and updates the visuals of the button as needed. When the control is first added to the stage, it executes the quickConnectCheck() method on the FacebookConnectManager. Once the QUICK_CHECK_COMPLETE event is received, it makes a “Likes” request on the post to see how many people have liked that post. Once that request comes back, it checks to see if the FacebookConnectManager is connected. If it is, it then grabs the UserID from the FCM and checks to see if that is in the list of userIDs returned from previous the “Likes” request. If the current user is in the list, it sets the button to the “Selected” state and updates the accompanying text. If the FacebookConnectManager is not connected, then it just updates the button text with the number of people that like the post already.

The last scenario is if the user is logged into Facebook, but they have not yet “Liked” the company page. In order to prompt the user to “Like” the company page first (which is the only way the API will let you Like a post) we open an overlay in javascript. In our case, we are using ShadowBox. We could also do this in a pop up, but we are trying to prevent popup blockers from ruining our day.

Begin Tangent:
So I’m sure you are already thinking… Oh OH!! we could show the Facebook Auth pop up in the same type of overlay! That way we don’t have to worry about the pop up blockers!! We thought that too. Hover when you try and embed the result of the request to the Auth Page, Facebook puts a grey overlay above that, and anywhere you click, redirects the browser to their login page. So unfortunately we still need to use a real pop up for that.
End Tangent

Once that overlay opens, the FacebookConnectManager polls Facebook over and over to see if the user has “Liked” the page yet. If they have, we close the overlay automatically. If the user closes the overlay and doesn’t like the page, we stop the polling. There is another possible way to do this through Facebook’s Event Subscription system, but I believe I’ve read that will not be supported in the future. So we went with this route, which is more future safe, but less elegant.

That pretty much wraps it up. If you want to suffer along with us, you can read Part 2 below, for all of the other things we tried before coming to this conclusion. Its good times if you are in to that sort of thing :)

Our working example:
http://labs.byhook.com/hookconnect/HookConnect.html

All of the example code can be downloaded here:
http://labs.byhook.com/likebutton/HookLikeButtonExample.zip

This example is built on top of the library we started with the other Facebook Post as well as with our Logging Library which can be found here on the labs site. There are a few improvements that we have made to the FacebookManager class (not the FacebookConnectManager), that are not in this package yet, but they should be updated soon. The code will be replaced in this example (which won’t effect anything in this post) and in the previous Facebook Post. So check back soon!

Lastly there are some Like Button features that are not yet implemented. We figured we should list them to clear up any confusion:

  • The Facebook “processing” blue bars (could be shown during requests)
  • Be the first of your friends text
  • Faces on big Like Button
  • Comment overlay

These may or may not be implemented in the future. If someone out there implements them, let us know and we will post the update here for everyone.

As always if you have any stories to share or questions to ask, please do so in the comments below. Good luck!

Part 2 – Twisted Path of Shattered Dreams
Initially the goal was to make a turn-key component that you could just new up and add to the stage, that looked and acted just like the “real” like button. Additionally it was decided that we should also try to grab the images and styling for the button right from Facebook at runtime, just in case they changed the images.

So, first things first, make a test HTML page, add the Like button to it, pop open Fiddler and FireBug and see what we have to work with:

The HTML:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.byhook.com&amp;layout=standard&amp;show_faces=true&amp;\
width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:45\
0px; height:80px;" allowTransparency="true"></iframe>

It really doesn’t seem to get much simpler than that. Facebook did a great job in making it super easy to put their stuff all over your stuff.

So what do we get when we just make that like.php request right in the browser? Turns out its a huge amount of stuff. Too much to post here, so just copy this link into a new tab in firefox with firebug open: http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.byhook.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80

Then go to the HTML tab, and you will see this:

The image really doesn’t do it justice, there are a ton of HTML elements buried in the body as well, please check it out for yourself, and be amazed…

Ok, didn’t expect that, but its still just text right? We can parse that up, find the the link to the image, locate the “37 People Like This” text, download the CSS, parse that, and determine which styles to use on our flash like button.
So I popped over to the Net tab in Firebug, and looked at the raw response from the initial Like.php request, since this is what flash will see when making that same request. It turns out what we get is just a very small fraction of what we see on page. This is a sample of the raw return string:

This is because, that response includes a whole new set of tags. Inside of which contain more links (some being relative I might at) to more CSS and JS files. So fine, we’ll get the initial response, parse out the links to the CSS files and JS files. Convert any of the relative paths to absolute paths, download the contents of that and parse those files. Look for more links, and download those as well.

On the initial load these are the requests that are made:

See those files names? In your net tab check out the contents of the first download JS file, for me it was 39sasyj3.js. At this point, I start getting the feeling that these names are going to change all of the time. Which is still not impossible to deal with. They still have to look like links right?

Sadly, and so very painfully wrong again… check out this line:

Bootloader.setResourceMap({
    "rXnA0": {
       "name": "js\/39jlgo1hy7c4sgo8.pkg.js",
       "type": "js",
       "src": "http:\/\/static.ak.fbcdn.net\/rsrc.php\/z1TUG\/p\/hash\/8p8noxvm.js"
    },

Now I’m starting to realize that there are many many more external files that get downloaded as needed, and that their file names change all the time. But worse than that, it seems that the links to the other external files are constructed at runtime.

The actual depth of this rabbit hole stretches well beyond where I felt comfortable descending. Sooooo, scratch that idea.

I know! Lets use some Javascript injection, and create a “real” like button off screen when the flash Like button is newed up! Yeah! We could then descend down the DOM, and pick out the parts we need to display. Sweet! Until you realize that you can’t actually get access to the content of the Like Button iframe, because its hosted elsewhere and XSS security measures in the browser prevent you from doing that. Fine…

If you’ve spent enough time in Flash land trying to access public API’s you run into the problem that a crossdomain.xml file is needed on the server side to give explicit permission to flash to access its content. Many places don’t have one, not because they don’t want you to use their stuff, they just don’t really think about it. So their content is freely open to normal requests from web browsers and such. The common solution to this is to build a quick PHP proxy. Flash makes the request to the proxy, the proxy makes the request to the thrid party site, gets the returned result, and feeds that back to flash. It works rather well actually. See where I’m going with this?

This is all the php code it takes to make a proxy.

PLEASE BE VERY VERY AWARE THAT THIS IS NOT SECURE IN THE LEAST!! THIS IS SIMPLY AN EXAMPLE, AND THE SECURITY MEASURES ARE BEYOND THE SCOPE OF THIS POST!! Got it? :)

<?php
 
$url = $_GET['href'];
   $ch = curl_init();
   curl_setopt($ch, CURLOPT_URL, $url);
   curl_setopt($ch, CURLOPT_FAILONERROR, 1);
   curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
   curl_setopt($ch, CURLOPT_TIMEOUT, 3);
   curl_setopt($ch, CURLOPT_HTTPGET, 1);
   curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 6.1;     en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2 GTB5');
   $result = curl_exec($ch);
   curl_close($ch);
  echo($result);
?>

Super easy right? Send a request with a &href= parameter, cURL (which is awesome) grabs it, and then echos the result.

So we first use the same request for the Like Button as before, the Like.php call. Except this time we send it to the proxy, and get the result. Awesome. There is enough info in this raw result without all of the other downloaded CSS and JS to at least get the state of the button and the text that goes with it. You have to do some digging but there are a bunch of hidden divs, and you can determine the state of the button by checking which ones are there, and which ones are not. However there is not enough there to get the graphics.

So we take that result, and drop it into our own iframe. Render that off screen, and keep digging. Now we have access to the DOM, the fully rendered with all files already downloaded DOM.

( Quick bit of helpful JS: return likeIFrame.contentWindow.document.body.innerHTML; )

Thankfully there are not too many links to .pngs.
You can check the dimensions of those pngs to determine which one contains the graphics you want.

Ok, getting closer. At this point we can render a decent copy of the Like button in flash. Now we actually have to do something with it. Like maybe click it… sigh.. judging by how complex its been so far, I was not really looking forward to it..

At this point, we have been at it for a while, and were met with quite a bit of frustration. The initial gusto and spirit has been ground smooth, but we still made the attempt.

Looking at the fully downloaded code for the “real” Like button, I quickly realized that it would take far too long to find a way to manually fire a click event on the button to trigger the Like. So it was back to Fiddler and Firebug. With much trepidation, we clicked the like button and braced for the worst.

Not surprisingly a couple of JS files are brought down, and some images. But there is just one POST request.. just one… really? I was expecting something more… maybe this won’t be so bad? pleeeeese?


So there it is in all of its glory. Right away, you can see all of the Cookie data that is sent along. We can’t get access to that cookie, since its Facebook’s cookie… but we tried to recreate the request without the cookie anyway, just to see what happens. The first attempt was in AJAX, and it appears that Facebook has managed to block “extra” AJAX calls. It didn’t work, so we didn’t look too much more into it.

Then we made the call from flash:

private function handleClick(e:MouseEvent):void
       {//handleClick
           Log.log("Click");
           var vars:Object = { "node_type":"link",
                               "edge_type":"like",
                               "connect_text":"",
                               "fb_dtsg":"Fuwat",
                               "href":"http://www.byhook.com",
                               "nctr[_impid]":"23776cfe",
                               "nctr[_mod]":"like_widget",
                               "now_connected":"true",
                               "post_form_id":"7ee8882f68a975e95780ade69cd62717",
                               "post_form_id_source":"AsyncRequest",
                               "ref":""};                        
 
           _req = new ServiceRequest("facebook.com", 80, "/ajax/connect/external_node_connect.php", vars, URLRequestMethod.POST);
           _req.addEventListener(ServiceRequestEvent.COMPLETE, handleComplete, false, 0, true);
           _req.startLoad();

Mind you, I have no idea what some of those parameters are or what they mean, or even how to generate them, so even if we moved past this part we were still hosed.

The result:
“ “.
Thats right.. a blank space… So here’s me… and here’s me throwing in the towel… If someone else was inspired to hurt themselves this much, please tell us your stories and results in the comments below :)

Now go read Part 1 (veeeery top of this post), where there is at least some success…

Line
94 Responses to “Facebook “Like” Button in Flash”
« Older Comments
  1. Users want this kind of articles because users easily read and understand. If user understand correct then it will implement.

  2. csomak says:

    really great post!

  3. kk says:

    Hello,
    will anyone update this guide for the actuall facebook app interface? Most of the settings pages have changed and I cannot find the right place where to set them correctly according the guide above. I am affraid some of those setting have been completely removed…

    Thanks for any hint!

    • aZa says:

      Totally agree!!

      Would be great to have i little update… having same problems right now to set up the app options (is connect url now Deauthorize Callback URL?! etc. etc.)

      big thanks in advance!

      aza

  4. nelson says:

    the returned json for my pages posts is empty. I have verified that I can like the post with a standard like button, and I can see the post via your tool referenced above. I’m comparing the logs between your test example and my own, but am somewhat lost.

    notably, i also can’t seem to like your post via your example. fails silently…any help would be super awesome.

    • Jake says:

      @nelson, hmm… unfortunately its been quite a while since I’ve looked at how this works.. its possible that something has changed on the facebook side… Its also possible that facebook in possibly enforcing the https only rules for applications and I don’t think this app is hosted on a domain with a cert at the moment… However, if you open the console in your browser (firebug/chrome) you should see output from the example, which might give more clues into what is going on

  5. Daniel says:

    Hey, thank you for this awasome tutorial! Very interesting, but…
    I’m not able to understande how to place the button in my flash movie…
    sorry but I’m new to AS3! You say: “From here you should just be able to new up a LikeButtonControl wherever you like in your project (as seen in HookConnectMain.as in the handeAddedToStage() method) and get your Facebook on!” OK, but: how!!!
    I’ve complete the tutorial, publishing the files into http://www.danielgrandis.com/GrandisoftConnector, I’ve created the new app on Facebook: if I try to compile HookConnect.fla I can see it works fine!
    Stop, I’m not able to go ahead!
    Can you help me? What I have to write in my movie to place a new istance of the button on the stage?

    Any help is helpfull for me!

    Sorry for my bad english, I’m Italian!

    Daniel

  6. jon says:

    like this

  7. Joe Smith says:

    I love this i want more on this subject
    any references please?

  8. wesley says:

    perhaps the easiest idea would be to dedicate a strip of the page to html and adding that like button while the rest is your embedded SWF. D:

  9. Paul W. says:

    Thank you very much for this example!

    Seems they have removed the “Authentication” tab in the app settings.
    Is there now some other place to uncheck “Users” and “Facebook Pages”, or is that no longer necessary?

    • Jake says:

      They overhauled the set up pretty significantly as of late, but I don’t think you need to worry about the user and facebook pages any longer. They have made the process the same across all entry points it seems…

  10. Raphael says:

    Hey there, thanks for sharing this. We started the same as you did ie saying ‘looks quite reasonnable that our client want a like button for the nice flash website we did for him”.
    After looking at your post part2, I’m not sure that is so reasonnable yet. ^^

    I then get back to part1, and I got a question to be sure I got the ideas of your solution : if I want a user to like any URL of my website, I need to have a post for that precise URL on my facebook page ?

  11. chris draper says:

    This is the only example I’ve seen working and its working wonders for our project!

    Is there anyway that I can allow the user to LogOut of facebook from the Like Button flash file or the parent movie that is loading the HookConnect.swf file?

    We have numerous users logging in on a kiosks but they currently can’t logout so the next user can start.

    If possible please email me or my boss with any information you may have. a.mottern@re-invigorate.com

    Thanks

    Chris

    • Jake says:

      The easiest way would be to simply set the “token” to null in the local shared object (savedSession).
      Also set _token in the Facebook Connect Manager to “” (blank). I think that will get it for you.

      • chris draper says:

        Thanks, that worked somewhat but once the obj and token was set and the like button was hit again, it didnt bring up the fb login panel to be filled by the next user. It only works after I delete the cache and cookies.

  12. zac says:

    it would be nice if there was a higher contrast between the text and the background of this page. perhaps the color of the text could be a little darker.

    anyway, thanks for posting this!

  13. [...] blocker. ALL THAT SAID the closest that anyone has gotten is the Labs.byHook version of the button: “Facebook Like Button in Flash: A Tale of Broken Dreams and Tortured Souls” — Title pretty much summarizes the general consensus out there. …Nevertheless, this [...]

  14. [...] surfer, coolh… As far as I know it is rather difficult, Anyway, you can see how they made it here:http://labs.byhook.com/2010/08/0…Other way, quite easy is to implement the share button:http://fernando-comet.blogspot.c…Insert a [...]

  15. Nice post keeps on posting this type of interesting and informative articles.

  16. Donnie Destro says:

    This makes me never want to click a like button again!… lol…

  17. Jake says:

    @Jozef, thanks for the tips :) And your Remote air (http://blog.yoz.sk/2010/12/remotair/) stuff is awesome!

  18. Jozef Chutka says:

    Facebook forms/request are protected by some unique parameters generated (and maybe regerated) for each user that makes it impossible to fake the request – what “like” action is all about. so while there is no api support for “like” and I believe it never will be due to easy abusement you have those 2 choices:
    1. position like button (iframe) over your flash embedded in transparent/opaque mode
    2. clickjacking … psst

  19. Jake says:

    @Donovan, yeah it looks like they changed things again. (I thought I saw a black cat walk by twice) You should be able to fill in the info in the “Web Site” section instead.

  20. Donovan says:

    I’m not seeing the connect tab in my app settings, is there something I missed, or did facebook change things around once again?

  21. Jake says:

    @Steff, Thats what we like to hear! :) If you survive the ordeal, please let us know how you made out!

  22. [...] Hopefully flash developers will be strong enough to push this through eventually (see e.g. http://labs.byhook.com/2010/08/0...)Ran Rubinstein • Insert a dynamic date hereCannot add comment at this time.  1 [...]

  23. Steff says:

    I am tempted to delve into the rabbit hole and spend the hours (who knows how many?) to reverse engineer their button. Why? Because f*#k them.

  24. Jake says:

    @jesper: it should, it seems to here, check your logs for errors (Firebug console in FireFox, or Javascript console in Chrome)

  25. jesper says:

    but why doesn’t amount of people that like the page update in the flash button??

  26. slynn says:

    Hi Jake,
    thank for your reply.
    Please try to look at the link that i try implement the example from you
    http://www.smartem.com.my/demo2/

    Everything is fine from your example, i can success to add like to that page i want. From what i have tried, after clicking the like button, facebook application will pop up, after i allow it, a lightbox will pop up, at there we have a like button to like the page. after click the like button, will show up just like what you said, you and 2 others like this, at that moment, the like number is correct!

    after that, the lightbox close, when back to the page, it still keep showing “be first to like this” …..

  27. Jake says:

    @slynn, can you post up the logs from either the chrome javascript console or the firebug console for firefox.

    For me it says 10 people like this, and then when I click the like button, it says you and 9 others like this… so it seems ok on this side.

    Also are you referring to our live example or is this your implementation of it?

  28. slynn says:

    Hi,the like button keep on show “be the 1rst to like it” although i like it with 2 different account.

  29. [...] best example I could find on this specific topic was http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/. Spend a good half hour digesting the contents of that blog posting and you’ll be ready to [...]

  30. Jake says:

    @Randall, unfortunately no. There isn’t a way to do that through the API… you have to use the real (iframe pulled from facebook) version of the button. You could try an float that button in a div over the flash page, but thats about the only viable solution I’ve found…

  31. Randall Potter says:

    Jake,

    Can this be modified to like just the overall page and not a specific post? If so… how?
    Thank you for your insight and willingness to share this solution.

    Thank you :)

    -Randall

« Older Comments

Leave a Reply

*

Line
Line
Pony