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”
Newer Comments »
  1. Jake says:

    @WiniWini: Fine, its up there as CS4 as well… in return though, you have to tell us about what you made with it! :)

  2. WiniWini says:

    Hi!
    great …
    have a CS4 example?
    (don’t want to download CS5 trial!)
    It is possible to resave the files as CS4 and put it also in the example file?
    thank you!

  3. Martin says:

    How about making a “LIKE BOX” in flash… LETS PLAY BROTHERS!

  4. John Currie says:

    Hi again,

    So I just tried again (your example, from your link, not a personal implementation), this time in Firefox with Firebug enabled.

    First run through, I was connected to a Facebook account, hit Like, and it made a Facebook authorization dialog appear, then a shadowbox dialog in which I then hit Like. The main page did not change – the number nor the text did not change to reflect this, even after refreshing.

    I tried again with a different account, but this time it looked like it started to show the shadowbox popup (or I guess the authorization), but stopped. Here’s the Console output from that last attempt:

    [INFO] DEBUG PLAYER NOT INSTALLED] ADD SHADOWBOX CALLBACKS
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token from Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Requesting: https://graph.facebook.com/me?access%5Ftoken=142459119113770%7C2%2EYeKfiZ7Pqdhqs46ofvFPKg%5F%5F%2E3600%2E1287075600%2D100001511889066%7CUK4xYfEgZM6VPyjasF2CVp9uz6Y
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 0
    [INFO] DEBUG PLAYER NOT INSTALLED] ServiceRequest:ioErrorHandler: An error was thrown during the request: Error #2032
    [INFO] DEBUG PLAYER NOT INSTALLED] handleTokenCheckComplete: false
    [INFO] DEBUG PLAYER NOT INSTALLED] Setting isConnected to false
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] Refreshing
    [INFO] DEBUG PLAYER NOT INSTALLED] Liked: false
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/106749192712698_120334811347390/likes?access%5Ftoken=
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: true / true
    [INFO] DEBUG PLAYER NOT INSTALLED] Click Connected: false
    [INFO] DEBUG PLAYER NOT INSTALLED] Attempt To Auth
    [INFO] DEBUG PLAYER NOT INSTALLED] Confirm Connection: 142459119113770|2.6Xh9QJ_j9bbt7qu8a4TTYg__.3600.1287075600-642996314|F4TkeSRt1SWJ0bGgRNERzG4PxGE
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Requesting: https://graph.facebook.com/me?access%5Ftoken=142459119113770%7C2%2E6Xh9QJ%5Fj9bbt7qu8a4TTYg%5F%5F%2E3600%2E1287075600%2D642996314%7CF4TkeSRt1SWJ0bGgRNERzG4PxGE
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token Success: true
    [INFO] DEBUG PLAYER NOT INSTALLED] Token: 142459119113770|2.6Xh9QJ_j9bbt7qu8a4TTYg__.3600.1287075600-642996314|F4TkeSRt1SWJ0bGgRNERzG4PxGE
    [INFO] DEBUG PLAYER NOT INSTALLED] Setting isConnected to true
    [INFO] DEBUG PLAYER NOT INSTALLED] Got User ID: 642996314
    [INFO] DEBUG PLAYER NOT INSTALLED] MAIN Authorized
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/642996314/likes?access%5Ftoken=142459119113770%7C2%2E6Xh9QJ%5Fj9bbt7qu8a4TTYg%5F%5F%2E3600%2E1287075600%2D642996314%7CF4TkeSRt1SWJ0bGgRNERzG4PxGE
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: true / true
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 0
    [INFO] DEBUG PLAYER NOT INSTALLED] ServiceRequest:ioErrorHandler: An error was thrown during the request: Error #2032
    [INFO] DEBUG PLAYER NOT INSTALLED] LIKE FAILED
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/106749192712698_120334811347390/likes?access%5Ftoken=142459119113770%7C2%2E6Xh9QJ%5Fj9bbt7qu8a4TTYg%5F%5F%2E3600%2E1287075600%2D642996314%7CF4TkeSRt1SWJ0bGgRNERzG4PxGE
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: false / true
    [INFO] DEBUG PLAYER NOT INSTALLED] Revalidate
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token from Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Requesting: https://graph.facebook.com/me?access%5Ftoken=142459119113770%7C2%2E6Xh9QJ%5Fj9bbt7qu8a4TTYg%5F%5F%2E3600%2E1287075600%2D642996314%7CF4TkeSRt1SWJ0bGgRNERzG4PxGE
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] Refreshing
    [INFO] DEBUG PLAYER NOT INSTALLED] Liked: false
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/106749192712698_120334811347390/likes?access%5Ftoken=142459119113770%7C2%2E6Xh9QJ%5Fj9bbt7qu8a4TTYg%5F%5F%2E3600%2E1287075600%2D642996314%7CF4TkeSRt1SWJ0bGgRNERzG4PxGE
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: true / true
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] handleTokenCheckComplete: true
    [INFO] DEBUG PLAYER NOT INSTALLED] Token: 142459119113770|2.6Xh9QJ_j9bbt7qu8a4TTYg__.3600.1287075600-642996314|F4TkeSRt1SWJ0bGgRNERzG4PxGE
    [INFO] DEBUG PLAYER NOT INSTALLED] Setting isConnected to true
    [INFO] DEBUG PLAYER NOT INSTALLED] Got User ID: 642996314

  5. Jake says:

    @jimi: I have everything disabled in the Advanced section. So pretty much the opposite of what you have.

  6. jimi says:

    this is my apps setting

    Authenticaton
    Deauthorize Callback ”

    Migrations
    JSON Encoding Empty Arrays Enable
    Stream post URL security Enable
    Canvas Session Parameter Enable
    OAuth 2.0 for Canvas (beta) Enable

    This set up correctly?

  7. jimi says:

    I have applied for pages and apps
    In the beginning HookConnectMain.as
    private const APP_ID: String = “my apps id”;
    private const REDIRECT: String = “myWeb / ConnectCallback.html”;
    Can be displayed [2 people like this]
    But when I click on the button, firebug show POST LIKE 403 Forbidden
    And can not send facebook like

    So I try to use your APPS_id and Pages_id
    Then firebug POST LIKE IT’S WORKING
    And can correctly show [you And 2 people liks this]

    I guess the question is how to set up pages and apps

    This is my pages: http://www.facebook.com/pages/Fn5128/145141548863687
    This is your APP_ID and REDIRECT: http://dl.dropbox.com/u/6579624/web/Publish/index.html

    I would like to ask about when you create pages and apps at the time
    Have to do what settings?

    My English is very bad, please forgive me
    But I really want to learn Facebook like Button in Flash

    Thank you very much

  8. Jake says:

    @Andrew, Unfortunately that is a limitation of this system… The original goal of this project was to do exactly what you are asking for, however, it turns out to be non-trivial, and probably not possible (see part 2 of this post)

    @Jimi, Glad its working for you! I didn’t realize that people were having trouble with their own implementations, I thought it was our example that people were having the 403 error from. So yes, if you are having this issue, please update the CONSTANTS in the HookConnectMain.as file to match your own App ID and page.

    Now to answer your question, you just need to set up a page you can go here: http://www.facebook.com/pages/manage/ and create a new page there. The application ID you can get from the settings page for the facebook connect application you created.

    I’m not totally sure I answered your second question, so if I did not, can you please rephrase it?

    Thanks!

  9. jimi says:

    hi Jake
    the 403 Forbidden when i click like button
    but i change your HookConnectMain.as

    private const APP_ID:String = “148944131786138″;

    private const REDIRECT:String = “http://www.byhook.com/hookconnect/ConnectCallback.html”;

    it’s work!!

    so i guess have two problems about how to setting ‘facebook pages & apps’

    1. http://www.facebook.com/pages/Hook/

    2.http://www.facebook.com/apps/application.php?id=148944131786138

    could you share pages and apps how to setting?

    Thanks

  10. Andrew says:

    What if i just want a like button on my web site so that people can like the web site and not a post or comments or anything like that. What then?. I don’t have a business face book account..

  11. [...] Facebook “Like” Button in Flash | Hook – Labs – [...]

  12. Jake says:

    @Vicram, oddly enough when I hit the link that is throwing the 403 for you (and substitute in my own access token) I get:
    {
    “data”: [

    ]
    }
    Which means that resource doesn’t “like” anything yet. But I don’t get the 403… I’m starting to wonder if this is a regional issue. What region of the world are you trying this from?

    If you go to this link in the browser (you will have to add your own access token to the url) do you still get the 403?
    https://graph.facebook.com/100000526694627/likes?access%5Ftoken=

    The easiest way to get the access token for quick testing is to go here and copy it from the address bar in the browser:
    http://apps.facebook.com/hookfbloaderexample

    You could also go to that link and try putting in:
    100000526694627

    as the “Item ID” and:
    likes

    as the “Graph API Call”

    Then click “Get Info” and see what happens…

    Thanks for all of your feedback! This is an odd problem for sure!

  13. Jake says:

    @Vicram, Looks like it was caught by the spam filter… we’re correcting it…
    I’ll check out the logs and let you know… On the surface it looks like a server error (403 Forbidden) from facebook… I’ll investigate… Thanks for the Logs!

  14. Vicram says:

    I tought I posted a comment here with my results?

  15. Vicram says:

    This is in chrome, the likes say 8 after pressing te button no pop-up. In Firefox I get a pop-up and if I acces nothing seems to happen.

    hope this helps

    [INFO] DEBUG PLAYER NOT INSTALLED] ADD SHADOWBOX CALLBACKS
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token from Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Requesting: https://graph.facebook.com/me?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] handleTokenCheckComplete: true
    [INFO] DEBUG PLAYER NOT INSTALLED] Token: 142459119113770|2.naXl_BtFZSTcLPLURpEaZA__.3600.1286269200-100000526694627|Gu8WZONz7y_5cQHISeHNLZuyZAc
    [INFO] DEBUG PLAYER NOT INSTALLED] Setting isConnected to true
    [INFO] DEBUG PLAYER NOT INSTALLED] Got User ID: 100000526694627
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] Refreshing
    [INFO] DEBUG PLAYER NOT INSTALLED] Liked: false
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/106749192712698_120334811347390/likes?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: true / true
    [INFO] DEBUG PLAYER NOT INSTALLED] Click Connected: true
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/100000526694627/likes?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: true / true
    graph.facebook.com/106749192712698_120334811347390/likesFailed to load resource: the server responded with a status of 403 (Forbidden)
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 403
    [INFO] DEBUG PLAYER NOT INSTALLED] ServiceRequest:ioErrorHandler: An error was thrown during the request: Error #2032
    [INFO] DEBUG PLAYER NOT INSTALLED] LIKE FAILED
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/106749192712698_120334811347390/likes?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: false / true
    [INFO] DEBUG PLAYER NOT INSTALLED] Revalidate
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token from Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Requesting: https://graph.facebook.com/me?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] Refreshing
    [INFO] DEBUG PLAYER NOT INSTALLED] Liked: false
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/106749192712698_120334811347390/likes?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: true / true
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] handleTokenCheckComplete: true
    [INFO] DEBUG PLAYER NOT INSTALLED] Token: 142459119113770|2.naXl_BtFZSTcLPLURpEaZA__.3600.1286269200-100000526694627|Gu8WZONz7y_5cQHISeHNLZuyZAc
    [INFO] DEBUG PLAYER NOT INSTALLED] Setting isConnected to true
    [INFO] DEBUG PLAYER NOT INSTALLED] Got User ID: 100000526694627
    [INFO] DEBUG PLAYER NOT INSTALLED] Click Connected: true
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/100000526694627/likes?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: true / true
    graph.facebook.com/106749192712698_120334811347390/likesFailed to load resource: the server responded with a status of 403 (Forbidden)
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 403
    [INFO] DEBUG PLAYER NOT INSTALLED] ServiceRequest:ioErrorHandler: An error was thrown during the request: Error #2032
    [INFO] DEBUG PLAYER NOT INSTALLED] LIKE FAILED
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/106749192712698_120334811347390/likes?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: false / true
    [INFO] DEBUG PLAYER NOT INSTALLED] Revalidate
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token from Verify Saved Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Verify Token
    [INFO] DEBUG PLAYER NOT INSTALLED] Requesting: https://graph.facebook.com/me?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] handleTokenCheckComplete: true
    [INFO] DEBUG PLAYER NOT INSTALLED] Token: 142459119113770|2.naXl_BtFZSTcLPLURpEaZA__.3600.1286269200-100000526694627|Gu8WZONz7y_5cQHISeHNLZuyZAc
    [INFO] DEBUG PLAYER NOT INSTALLED] Setting isConnected to true
    [INFO] DEBUG PLAYER NOT INSTALLED] Got User ID: 100000526694627
    [INFO] DEBUG PLAYER NOT INSTALLED] HTTPStatus: 200
    [INFO] DEBUG PLAYER NOT INSTALLED] COMLETE
    [INFO] DEBUG PLAYER NOT INSTALLED] Refreshing
    [INFO] DEBUG PLAYER NOT INSTALLED] Liked: false
    [INFO] DEBUG PLAYER NOT INSTALLED] Handle Request Complete: https://graph.facebook.com/106749192712698_120334811347390/likes?access%5Ftoken=142459119113770%7C2%2EnaXl%5FBtFZSTcLPLURpEaZA%5F%5F%2E3600%2E1286269200%2D100000526694627%7CGu8WZONz7y%5F5cQHISeHNLZuyZAc
    [WARNING] DEBUG PLAYER NOT INSTALLED] RESULT: true / true

  16. Jake says:

    @Vicram:
    All of the stuff that looks like this:
    Firebug’s log limit has been reached. 0 entries not shown. Preferences
    [INFO] [0:00:52] [com.app.ui.likeButton.LikeButtonControl::addShadowBoxHandlers()] ADD SHADOWBOX CALLBACKS
    [INFO] [0:00:56] [com.jac.facebook.FacebookConnectManager::verifySavedToken()] Verify Saved Token
    [INFO] [0:00:59] [com.jac.facebook.FacebookConnectManager::verifySavedToken()] Verify Token from Verify Saved Token
    [INFO] [0:00:61] [com.jac.facebook.FacebookConnectManager::verifyToken()] Verify Token

    There should be quite few more lines… all of them would be nice… if you post it here, please log out of facebook afterwords so that your access token is reset…

    Also what happens exactly when you click the button? Any pop ups? Does it appear to be “depressed”? Does it then say “You and 8 others”?

    Thanks!

  17. Vicram says:

    Hi Jake,

    Been reading this post for the last couple off days, trying to replicate your example. But then I realised that your example isn’t increasing when ik “like” it. It’s on nine, and even dough I tried liking it with three different accounts it isn’t changing.

    My own version is having the same problem.
    Im on a Mac using safari, chrome and firefox.

    Which in information do you need from firebug? I don’t use the console in firebug so I don’t no wich info to give you.

  18. Jake says:

    @John, I just tried it again in firefox and chrome… seems to be ok for me other than the fact that the count is off initially (i’ll look in to this)
    Are you running the flash debug player? If so do you get a crash?
    Also a post of whatever is written to the console (as stated above) will be a great help in figuring out what is going on for you guys…

    Oh, which version of the flash player are you running?

  19. jake says:

    @john, it seems that yiou and Morato are having the same issue… could you run the example with either the firebug console open (in firefox) or the chrome javascript console open and post up the log information that id recorded when you click the like button?

    We’ll see if we can figure out what’s going on.. its entirely possible that something changed in the facebook api…

    Also could you try liking a piece of work in the gallery on our main site (byhook.com)? Thatg uses the same technique, but a slightly different code base

    Thanks!

  20. John Currie says:

    Hi there,

    I appreciate the lengthy post, but I have not been able to get your demo to work either in Firefox or IE. If not signed into Facebook beforehand, the text says “Connecting to Facebook…” then “4 people like this.” and clicking Like will prompt with the Facebook login, but then it will say “Be the first to like this.” and not respond to clicking on the Like button, although it appears to be communicating with graph.facebook.com. Being logged in to Facebook prior to viewing the page also results in a “Be the first to like this.” message and unresponsive Like button.

    I read almost the entirety of your post, and it seems like you’ve put a lot of research into getting this functionality working, but unfortunately I have not been able to get your demo to work and therefore am wary of attempting following the full extent of your instructions.

    Do you have any thoughts as to why this might be acting the way it is? I recently created a Facebook app with the new Graph API, so I know Facebook can be a pain in the butt. Thanks for the help!

  21. Morato says:

    Hi Jake,

    Are 4 users. But using the application can not get users to increase.
    By clicking on I like, a like reappears.

  22. [...] Facebook “Like” Button in Flash | Hook – Labs [...]

  23. Jake says:

    if you put this in your browser’s address bar:
    https://graph.facebook.com/106749192712698_122857984426987/likes

    what do you get?

  24. Morato says:

    Hi Jake, in firebug I detected the following error: Failed to load source for: https: / / graph.facebook.com/106749192712698_122857984426987/likes
    However, the pop-up correctly identifies me facebook.
    What can happen?
    Thanks!

  25. Jake says:

    @Morato, when I click it here, it seems to work and it says You and 2 others like this page. There might be an off by one bug in there, I’ll have to look into that when I have some free time, but it should be easy enough for you to fix as well.

    Are you getting the pop up that asks for your facebook credentials? Have you possibly denied the application access to your account?

    The april dates are just when we posted the posts on the Hook page. When we started the facebook page, we added posts for each of the labs site entries.. They were all done on the same day..

  26. Morato says:

    You could see the followers of a fan page and join?

  27. Morato says:

    The post has 6 likes, but always appear in April, why?

    {
    “id”: “106749192712698_122857984426987″,
    “from”: {
    “name”: “Hook”,
    “category”: “Websites”,
    “id”: “106749192712698″
    },
    “picture”: “http://external.ak.fbcdn.net/safe_image.php?d=595b819224dd2529a7698b8e03c2a521&w=90&h=90&url=http%3A%2F%2Fwww.byhook.com%2Fassets%2Fprojects%2Fhook_wtfffff%2F001.jpg”,
    “link”: “http://www.byhook.com/html/wtfffff-com-qa-platform/”,
    “name”: “Wtfffff.com QA Platform | Hook”,
    “caption”: “www.byhook.com”,
    “description”: “It’s awfully sad that our developers often find themselves unable to sleep, crippled by the uncertainty of their application’s performance across obscure”,
    “icon”: “http://static.ak.fbcdn.net/rsrc.php/zB010/hash/9yvl71tw.gif”,
    “type”: “link”,
    “created_time”: “2010-07-29T15:26:16+0000″,
    “updated_time”: “2010-07-29T15:26:16+0000″,
    “likes”: 6
    }

  28. Morato says:

    Hi Jake thanks for your reply, I tried it in different browsers. I always appear four people, but when I click I get a single follower.
    I log into facebook but still not working.
    Very thanks!

  29. Jake says:

    @morato: are you referring to the HookConnect.html link? Which browser are you using and on which OS? Are you logged into facebook before you go to that link?

    If you open Firebug (or the console in chrome) and look at the traces output there, what do you get?

    It seems to be working ok from here, right now it says “4 People Like this” for me.

  30. morato says:

    when I click in the example, always appears that a person likes.

  31. [...] Facebook “Like” Button in Flash | Hook – Labs [...]

  32. Jake says:

    @Box: I’m not sure I understand the question… this doesn’t actually use the Facebook Share button, it uses Facebook Connect to fake a share button. Unless by “new” you mean within the last few days, this is up to date.
    What problems are you having exactly?

  33. Boz says:

    Hi..

    Am I missing something here.. but I just can’t get your example to work.. I’ve spent a day and a night trying to replicate word for word just to get your example to work.. and it just doesn’t do it..

    One of the main reasons is because the explanation for the new Facebook setup is completely different now form your example.

    Would you mind giving some advice here or an update ocnsidering the new Facebook setup.

    Thanks.

  34. Jake says:

    @TimG, the .fla’s are CS5, you can download the CS5 trial, and re-save them out as CS4 versions. That should fix you up.

  35. Tim G says:

    Hey Jake,

    I followed your instructions all the way up until the point where it says to open HookConnect.fla and recompile the SWF. If I try to open the FLA on my Mac, it says “Failed to open document ________”, and if I try it on my PC, it says “Unexpected file format.”

    Any advice?

    Thanks,
    Tim G.

  36. Thanks Jake. I was able to get the Post ID and completed all of the steps. Can you tell me how I can embed the HookConnect to a another SWF file. I am going to use it in my website (www.ads.do), please check it out so you can understand what I need. Thanks so much.

  37. Jake says:

    “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.”

    Its just above the flowcharts in this post.

  38. Jake: I already did that. The is no information on that page. Please give me a direct link to the explanation. Thank you.

  39. Jake says:

    @Vanessa: do a search in this post for “To get the Post IDs you can use the example app”. That section tells you a way to get it.

    Our example app from the other post refers to:
    http://apps.facebook.com/hookfbloaderexample

  40. I can’t find the _idPOST. Where do I get the POST ID for my company page?

  41. Jakeee!!! Thanks soooo much!

  42. Jake says:

    @Vanessa, the files are CS5 files, you could download a Flash CS5 trial, and resave the files out as CS4. I think that will work for you. Good luck!

  43. Hi. I am trying to follow your guides in order to integrate the “ilike” button to my website. I downloaded the example ZIP but the Flash files will not open in Adobe Flash CS4. I am stuck here until I can get the files that will open. Please send me valid files. Thank you.

  44. [...] Facebook “Like” Button in Flash | Hook – Labs [...]

  45. Thanks Jake.

    It’s functioning cross browser. Wish it was in Flash. Anyways that Twitter official retweet button was released. I hope it isn’t like the facebook like button with Flash integration.

  46. For my friend in the hands of health articles. But only in Flash to make a greater effort be lost in this code:)

  47. Jake says:

    @Michael – Yeah, I’ve seen some other float the div over flash before, but unfortunately with the like button not being in flash, you can’t add the effects and transitions and such. Or really make it “part” of the flash experience, which is what we were trying to achieve. But yours is a viable solution for sure, though it seems to work in Chrome but not FireFox :) but that should be easily fixed.

    Thanks for the interest!

  48. I really would like this in full AS3. Here is my personal solution. It is very simple, just a div of an swf and a function called in AS3 to javaScript.

    http://hdwebdesign.org/flashfbzindex/

    thank you

  49. [...] This post was mentioned on Twitter by tony murphy, Filippo Lughi. Filippo Lughi said: Facebook Like Button in Flash http://goo.gl/fb/n7YZ3 [...]

Newer Comments »

Leave a Reply

*

Line
Line
Pony