What is the best way to use old Facebook REST API and new Facebook Graph API on the same webpage?

Question

The existing page has code to work with the old REST API:

jQuery(document).ready( function() {
   FB_RequireFeatures(["Connect", "XFBML"], function() {
     FB.init('12345678ABCDEF','/xd_receiver.html', {ifUserNotConnected: fb_user_not_connected});    // real key replaced by 12345678ABCDEF

which is to support "Login with Facebook" and "Share" button to share story on Facebook.

If the following code for new Graph API is added

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '123456', status: true, cookie: true,   // real appId replaced by 123456
             xfbml: true});
  };

  jQuery(document).ready( function() {
    (function() {
      var e = document.createElement('script'); e.async = true;
      e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
      document.getElementById('fb-root').appendChild(e);
    }());
  })
</script>

then the "Share" and the "Login with Facebook" stopped working. I realize the different code each calls its FB.init(), one with 2 strings and 1 object, and the other calls FB.init() with just one 1 object. Is one overriding the other FB.init()?

There are some people who think it cannot work:

http://forum.developers.facebook.net/viewtopic.php?id=66057

http://stackoverflow.com/questions/3918089/can-facebooks-javascript-sdk-work-together-with-the-older-facebook-api

and some people who think it can:

http://forum.developers.facebook.net/viewtopic.php?pid=278718#p278718

http://github.com/mmangino/facebooker2/issues/closed#issue/18

Answer 1

Both APIs are available from new JS client. You're mixing the terms "API" and "JS client". You can (you should) use new client and make request to both REST and GRAPH APIs as well.