A blog about User Interface, User Experience, Design, Flash, Product management and all that goes in between.

I just finished connecting my blog and few other pages on my site to Facebook, to enjoy some sharing goodness of the social community, as well as Facebook’s ‘insight’ statistics – why not enjoy what is given for free right?

I had some setbacks and strugles along the way, thought it might save you some time (and wasted ‘Likes’ too) to write few tips down. It will not be a full tutorial, instead I will focus on some oddities on the Facebook side:

First tip will be: Do not implement until you REALLY understand what your options are and what exactly you want to do. Facebook offers two main options for adding a ‘Like’ button to your page/site/blog, one is IFRAME, second is XFBML. The iframe option is as simple as adding a line in your html source, and will get you going in seconds. The xfbml is based on their Javascript SDK, and sports the Facebook ‘insight’ statistics via open graph, but requires few preliminary steps which are kinda tricky as the documentation is fairly sparse. Obviously we would prefer the xfbml option.

In order to use xfbml you will need an AppID, which require you to set up an application, to do that you will have to add the Developer application to your Facebook Profile.

Then, you have to activate you developer account – you have to give you cell number, after which you will receive a code via sms to submit.

Then you can create an application in Facebook here.
* This page has a strange behavior, you will define your application name, pass a captcha and receive an Error page:
“Sorry, an error has occurred.
We’re working on getting this fixed as soon as we can.”

But if you look at the column on the right in the developers page, you will see that the application was actually created:
(Facebook, are you serious about that? is this some kind of a test?) I ended up creating about 10 applications, read countless forums threads until I found it by mistake!

After that you can start implementing, follow the instruction here which are pretty simple.

Since I thought Facebook application creation service is down, I started with the iframe version, obviously a mistake as all the ‘Likes’ I got were dumped once I connected the xfbml. damn.

Good luck and may the force be with you..

About a year ago I posted an example for using externalInterface to start and stop sound inside flash, based on focus and blur events in the window. After recently receiving several comments and questions about strange behavior on different browsers, I decided to test the script on the browsers I have on my Mac and PC.

Originally I was using the onFocus & onBlur events, attached to the window object, I found out that each browser can deal with these event when attached to a different object, I started testing which object works for each browser, and added browser sniffer for the listener definition, these are the objects for each browser:

And here are the results:

The situation on Mac seems to be much better than on Windows XP (sorry, I did not test Vista, so if someone can try this on Vista and send me the results – it would be great), currently both IE7 and Firefox on XP have strange behavior.
With IE7 it gets even weirder, when IE7 has Tabbing enabled, it can’t handle onblur event for body object, while without tabbing, onblur works if clicked on the browser title area, once clicked inside the window (Html body) “something” goes crazy and both onfocus and onblur are fired together upon focus event.

Here is the test page, you will find the events I tested for IE7 commented in the page source.

Does anyone know a way around this strange behavior on IE7 and Firefox?
any way to make this listener compatible with all browsers?