Rommel Santor's Clog

Just thought I’d share this in case anyone comes googling, as I could not find a satisfactory search result, but was fortunate that it was obvious enough that I realized the issue.

I had a page that has had a FB “like” button forever with this code:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 
<fb:like layout="button_count" show_faces="true" width="80" font="verdana"></fb:like>

I just finished using a bit of the new Facebook API to add some Facebook Connect functionality, including a “Login with Facebook” button in the sidebar of all pages in addition to the Facebook JavaScript SDK asynchronous loader:

<script type="text/javascript">// <![CDATA[
  window.fbAsyncInit = function(){
	FB.init({
	  appId   : '...',
	  session : ...,
	  status  : true,
	  cookie  : true,
	  xfbml   : true
	});

	FB.Event.subscribe('auth.login', function(){
	  window.location.reload();
	});
  };
  (function(){
	var e = document.createElement('script');
	e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
	e.async = true;
	document.getElementById('fb-root').appendChild(e);
  }());
// ]]></script>

Before too much time passed, I discovered that on just some pages, one or both of these things would occur:

1. Trying to click on the “Login with Facebook” button would do nothing but result in this JS console error: “FB.login() called before calling FB.init().”
2. The page would just keep reloading itself.

You may have guessed just by looking at the above code what the cause of the problem is. The pre-existing “like” button code is loading the all.js script synchronously, but the Facebook Connect code is also loading the same file, but asynchronously. The fix is even more obvious: Remove the old <script> tag that is paired with the like button. Et voila, fin.