#xfbml=1 causing problems

I have two different mechanisms on my site using both xfbml and fbjs:

an FB:Like tag for individual entries
the FB object for facebook logins with fb connect

My problem is when I include "all.js" on the page, the login script works but the fb:like tag doesn't work.

When I include "all.js#xfbml=1", the fb:like tags work again, but now my FB object is undefined and my login code doesn't work.

Is there something I'm missing?

Thanks in advance for any help you can give.

Solution

You only need to include the script reference one time and call init on the script when the page is loaded. You can use this for either the fb:like buttons or the login script.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'YOUR APP ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
  });
</script>

The key to this is setting the xfbml to true (this is what the #xfbml=1 does). If you dont have that set then the like buttons wont render.

If you want to subscribe to the login event just add the following script after the FB.init() call:

  FB.Event.subscribe('auth.login', function(response) {
    window.location.reload(); // or something else...
  });

And here would be your login script to be fired ONLY when a user clicks on a link, button, etc.

function doLogin() {
   FB.login(function(response) {
     if (response.session) {
       if (response.perms) {
         // user is logged in and granted some permissions.
         // perms is a comma separated list of granted permissions
       } else {
         // user is logged in, but did not grant any permissions
       }
     } else {
       // user is not logged in
     }
   }, {perms:'read_stream,publish_stream,offline_access'});
}