Facebook LIKE In Flash (From Forums to Blogs…)

Share Button

It has come to my attention that ASSUMING DIRECT CONTROL of the facebook “like” button in Flash is a deed not as easy as it appears on the outset. It seems they made an API for everything except for “like”.
On embarking into this task, the assumption of any Flash developer is the normal one. It’s a common feature! By now it’s been done a million times! *enthusiasm* How hard could it possibly be?
Just drop by the Like API to generate your own like button and your like-ing away. Right? I mean it’s even being used by spammers as another “trick” so it might as well be used in Flash.
And there’s even the wordpress plugin: Here. (The honest one that won’t trick users.)
So what about inside of Flash with actionscript?
Well, no. Sorry. It’s an example of hacking (and unreliability) at it’s finest!
Here’s the deal…
A direct “like” button is not yet possible because (as others speculate) Facebook needs to sandbox it. Both “like” button formats (xfbml and iframe) use a sandboxed iframe. Nobody but facebook can set “likes” or know anything about the user. For it to work in Flash, facebook would have to provide the button itself as a SWF file so it can be loaded into Flash (so it can create a sandbox in itself and load the user information safely — like the Chromeless YouTube PLayer. Where it is nearly impossible for Flash to access the actual FLV URL). Facebook forms and requests are protected by a number of unique parameters generated for each user that makes it impossible to “fake” a request (so there is no API for it as of yet). Perhaps there won’t be because of it being to easy to abuse if “like” where the case. Perhaps it would pose too many security risks (not enough security could be provided). You can, however, easily “share”. (Sample files for that are plenty for example HERE or HERE ) Which (“Like” being possible or not) I would think has the added benefit of aiding in your search engine ranking (provides a link to your site, because it posts a link to a users profile, thus google bots picking up on that’ll always bump you up a bit, etc…). Still you can also provide your own “screenshot” (image thumbnail) of the site + title. Neeeeedless toooo saaaaay, back to the subject at hand!
Oh yeah! There is also an “Promotional Services” extension here
Ok… For that matter, there is no support for the notorious “Like Button” in the official Facebook Actionscript Library so it starts to look “less easy” than it was on the outset.
Most people use an iframe & div combo (Quick example of that HERE ), and set the .swf to transparent (in order for like to show), or use it as a frame over the Flash div (float the div over Flash)… for that one there are lots of conditions that have to be met to make it work in all browsers:
1. wmode= transparent or opaque kills the cpu in safari and firefox.
2. for the facebook like button : iframe style=”overflow:hidden; position: absolute; left: 5px; top: 5px; z-index: 99;” …
3. flash content: div style=”z-index: -1;” id=”flashContent”
4. body style=”position:relative;left:0px;top:0px;z-index:0″
( Forum post for the above bit is here. )
…Or call some Javascript on your page via ExternalInterface to register a “like” (the later using the Javascript Facebook Library).
Finally here’s another solution I threw together (SOURCE FILE ). It uses ExternalInterface.call(‘window.location.href.toString’); and appends the URL to facebooks “plugins/like.php?href=” opening a JavaScript window over the page with the “like” menu… A.E. a like button in Flash that opens a new JS window containing the button. It’s another solution to consider. Because it’s Javascript the window can be made nice and small too. Only downside is a pop up 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 post is based on a lot of hacking, tweaking, breaking, and reading I’ve done this Saturday. If anyone has any other hints, approaches, or if things generally have changed since, feel free to comment with your approach! I’d love to know how you solved it.

UPDATE: See my post “Twitter, Tiny URL, Stumble Upon, Facebook Share, Delicious, Google Buzz, IN FLASH (With Source Files)” which is a good alternative regarding “SHARE”, and covers most of the main social networking sites.

This monster belongs in Web/Game Dev: Tutorials & Sourcecode. Bookmark the permalink. Follow any flames or other attacks to it with the RSS feed for this abominable creature. Voice your rage or leave a /b/roback: /b/roback URL.

2 /B/romments

  1. Raged February 25, 2011 at 10:10 am | Permalink

    Hi,

    i spend a lot of hours to find that solution too, but found nothing. So i prefer/ suggest to use the I frame i a Div and just go ahead. maybe in future Facebook include this feature.

    Thanks for this long and informative article.

    take care & good bye.

    Tahir Alvi

    • Raged February 25, 2011 at 10:52 pm | Permalink

      Thank you. It’s always nice to know that others have come to a similar conclusion.
      I checked out your site. It’s very informative! Thanks for commenting!

Post a /B/romment

Chill, /b/ro. Your email is probably not, but most likely impossibly going to be not shared. Required fields are marked, yo... *

*
*

Use these /b/ro HTML haxxx: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Beerme: