A Prototype Facebook Widget

We at the Facebook Connect team are very happy to see the developer community’s interests in creating widgets for Facebook Connect. Widgets are very important for Facebook Connect because the developers community can make it very simple for thousands of web sites to quickly add Facebook Connect to their sites. In addition, our developer community would be able to create many more new features that we can do on our own.

Some people have expressed desires to enable Facebook Connect on Blogger but encountered some difficulties in creating a cross domain channel page using the sample HTML on a blogger site according Facebook’s developer wiki site. This is because all pages on a Blogger site share the same HTML template and there is no way to create a separate page with just the HTML page in cross domain channel page.

There is a workaround for this issue. I created a prototype Blogger widget to illustrate it. You can see the widget at work on this blogger site. You can also follow this link to add the widget to you Blog site. The principle applies to other web sites with limited ability to modify HTML/JavaScript support as well.

You are welcome to study the code for this prototype and freely copy/modify/distribute it for your use without any conditions.

How to Work Without a Separate Cross Domain Channel Page?

Facebook Connect requires a cross domain page on a site’s domain to enable that site to communicate with Facebook. The cross domain page really is just a very simple HTML page that loads a simple JavaScript code. Having a dedicated cross domain page that is fast to load and can be cached on browser client is desirable for performance. However, if there is no way to create a dedicated cross domain page with the minimum HTML markup specified in our dev wiki, we can substitute with almost any page on a web site as long as we can run the necessary JavaScript code on that page. For this prototype, we just use the same page where the widget runs as the cross domain channel page. My little trick is to signal its usage by adding a query parameter “fbc_receiver=1” in the url. For example, when this page http://funwithconnect.blogspot.com/2008/12/prototype-facebook-widget.html runs, we specify http://funwithconnect.blogspot.com/2008/12/prototype-facebook-widget.html?fbc_receiver=1 as the cross domain channel url. When Facebook Connect create a hidden iframe to http://funwithconnect.blogspot.com/2008/12/prototype-facebook-widget.html?fbc_receiver=1, the JavaScript code widget_loader.js will detect that by checking window.location and run the code normally used in a dedicated page.