Connect with Facebook buttons - how does the pop-up window work?

Question

Does anyone know how facebook connect buttons generate the pop-up window that you use to sign in?

I would think that there's a code like this..

<a href="#" onClick="MyWindow=window.open('http://www.yahoo.com','MyWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,width=600,height=300'); return false;">Click Here</a>

but I haven't found anything similar in the documentation.

Answer 1

The Facebook API uses something called FBML (Facebook Markup Language). It is a tag based markup that is written inline with the other HTML on your website, and is processed with a javascript library. The connect script is:

<script src="http://connect.facebook.net/en_US/all.js"&gt;&lt;/script&gt;

If you use this script and then provide the following tag:

<fb:login-button></fb:login-button>

then javascript will render the button.

More details can be found here: http://developers.facebook.com/docs/authentication/

The button will automatically generate the popup window when you click it, so you don't have to worry about the code required. If you really want to see the code that is generated anyway, I would use a tool like firebug on an existing fbconnect button to look at the javascript.