Why does the basic Facebook Connect example not work?
Overview
You are trying to implement Facebook Connect in your site so that your visitors can log in to your site using their Facebook accounts. You followed the simplest example available in
a Facebook wiki document, however for some reason the “Connect with Facebook” button does not seem to do anything – no pop-up, no error, nothing. Why is that?
Context
This article is for those who want to implement Facebook Connect in their websites. It explains the scenario when a simple Facebook Connect login button does not seem to work.
Solution
The login button does not do anything most likely because you have not set it up to do anything.
The basic example shown in this Facebook developers wiki page: http://wiki.developers.facebook.com/index.php/Connect/Setting_Up_Your_Site has instructions in great detail, however it has not mentioned clearly that it actually only shows you how to display a Facebook Connect login button.
The test.html described in the wiki page is
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:login-button></fb:login-button>
<script type="text/javascript">
FB.init("YOUR_API_KEY_HERE", "xd_receiver.htm");
</script>
</body>
</html>
If all instructions in the wiki page have been followed correctly, clicking on the resultant Connect-with-Facebook login button should trigger a Facebook login form to appear in a pop-up window, given that the user has not logged in to Facebook yet.
If user has logged in to Facebook and clicks on the login button for the first time, a pop-up will appear to ask the user to authorize the integration between your website and Facebook.
Once user logs in via the pop-up window or agrees on the Facebook Connect authorization, clicking on the login button will no longer trigger any actions because user is now “connected” and there is no “callback function” specified in the html file.
To make it slightly more confusing, the authorization pop-up will only appear once: Even after you clear all the cookies and log out of Facebook in an attempt to start from the beginning, the login button will no longer trigger any actions if you log in Facebook again and click on the test login button. This is because Facebook remembers your authorisation from its servers.
When the wiki page says “Optionally, you can add a JavaScript handler to the callback function to call when the user logs in”, it actually meant “Unless you want user to see no changes after logging in, you need to add a JavaScript handler…”.
So how do you specify a “callback function” and how does Facebook Authentication work? A separate article has been written to answer this question.