13

I'm copying the code right out of this page on Facebook's developer website and the fbAsyncInit() method never fires. I've also read this page, I've tweaked the code quite a few different ways, and I cannot get the method to fire. Your thoughts?

Also, for what it's worth, when I try and run this code and Chrome (on Mac) and run Firebug lite, I get an error that says "Firebug Lite cannot be loaded in this page"

Here's the code...

<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1234567890', // App ID
      channelUrl : '//localhost/test.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    alert("this statement never gets called either");
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>
</script>
</body>
</html>
BenMorel
  • 34,448
  • 50
  • 182
  • 322
BeachRunnerFred
  • 18,070
  • 35
  • 139
  • 238

6 Answers6

9

I had the same problem. It seemed I loaded the JavaScript library //connect.facebook.net/en_US/all.js in some other place before the async loading.

That probably confused things a bit.

I removed the premature load tag definition and now I am fine.

Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156
Jørgen Jørgensen
  • 91
  • 1
  • 1
  • This is the solution for the problem! – Brane Mar 07 '16 at 12:09
  • I just got rid of the `window.fbAsyncInit` callback around `FB.init` and it worked for me. No clue why, but that works every time. Any other solution only works part of the time. – HartleySan Feb 14 '20 at 16:53
6

You should change:

 js.src = "//connect.facebook.net/en_US/all.js";

to:

 js.src = "http://connect.facebook.net/en_US/all.js";
newfurniturey
  • 37,556
  • 9
  • 94
  • 102
Martín
  • 117
  • 1
  • 2
  • 1
    wtf?? don't know how I would of ever figured that out wtthout SO – Scott Selby Mar 07 '13 at 18:08
  • 32
    not good, this will break your app if you are loading from HTTPS. if you have to force any protocol, make sure to use HTTPS. – maskedbacon Jun 11 '13 at 17:34
  • It's better to leave the protocol off, or else like @maskedbacon said, use https – magikMaker Aug 06 '14 at 16:18
  • This fixed it for me as well. Interesting note, after adding the protocol and reloading the page, a bunch of what looks like facebook initialization messages showed up in the console (firefox). I had just created the FB app it was referencing. – Mark Dec 29 '15 at 18:43
  • Worked for me, just changed the `http` for `https`. – leonardofmed Apr 11 '19 at 18:54
  • @leonardofmed, could you take a look https://stackoverflow.com/questions/66654709/facebook-sdk-send-method-in-reactjs – Asking Mar 17 '21 at 09:10
5

Do you have a problem with Synchronous loading?

    <script src="//connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId      : 'YOUR_APP_ID',
    channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
  });
</script>
Mikey G
  • 3,473
  • 1
  • 22
  • 27
  • Yes, when I adjust the code to look like your synchronous code, the alert method still never fires. What gives? Only when I remove the FB.init() method does the alert method fire – BeachRunnerFred Feb 07 '12 at 21:40
  • I don't know... this guy is loading asynchronously and it seems to work for him: http://facebook.stackoverflow.com/questions/2855784/facebook-graph-api-fb-login-called-before-calling-fb-init the code at the top works, if you read the answer, he just for got to put in the right appid – Mikey G Feb 07 '12 at 21:44
  • @BeachRunnerJoe it looks like he is appending the script below to the fb-root div, instead of to the head. – Mikey G Feb 07 '12 at 21:46
  • @MikeyG This script is an example from the Facebook http://developers.facebook.com/docs/reference/javascript/ – Cheery Feb 07 '12 at 21:51
  • Thanks, Mikey G, I play around with the AppID. I still don't understand why the alert statement isn't being called. Even if the init method failed because the appID wasn't correct, it seems the alert method should still get called, shouldn't it? – BeachRunnerFred Feb 07 '12 at 22:37
  • It should be, and i think you can take it that window.fbAsyncInit isn't getting called – Mikey G Feb 07 '12 at 22:50
  • Also, for what it's worth, when I try and run this code and Chrome (on Mac) and run Firebug lite, I get an error that says "Firebug Lite cannot be loaded in this page" – BeachRunnerFred Feb 07 '12 at 22:53
  • If you still have problems with it, i would switch to synchronous. I think i might mention that 1) The fb javascript is 263kB, which is hefty for a js file, but about the same as a page, and 2) If the user has already been to your page, or any other site that uses that js file (like facebook and any site that has a fb app) it will be cached and they won't need to download it anyway. – Mikey G Feb 07 '12 at 22:56
  • I've tried loading it synchronously using the code you posted above, I stil have the same problem. I'm of the opinion that none of this has anything to do with asynchronous loading or incorrect appIDs, but instead, the code structure is messed up some how. I don't understand why firebug lite can't load this page, but it can load all the other pages. Anyhow, +1 for all your help! Thank you. – BeachRunnerFred Feb 07 '12 at 22:59
  • No problem, I hope you get it figured out – Mikey G Feb 07 '12 at 23:02
2

This answer is probably too late and for many instances wont help but, I found out that my Firefox browser after some decent work apparently get a little crazy and cause that exact error... just restart the damn thing

Nimrod Yonatan Ben-Nes
  • 368
  • 5
  • 15
  • OK I just found the exact source of my problem, I use FF for developing and I use the Scratchpad (Tools->Web Developer->Scratchpad) from time to time.... from some reason it cause this problem even if I just do a simple alert() there... hope it help someone – Nimrod Yonatan Ben-Nes Jul 03 '12 at 20:55
  • OK ignore the "even if" above, it cause the problem WHEN an alert() is issued from the Scratchpad – Nimrod Yonatan Ben-Nes Jul 04 '12 at 09:38
  • 1
    WOW! I freaking hate chrome right now !!!!!!!!!!!!!! WTF!!!! Thank you!!!! – ihor.eth Mar 06 '21 at 19:58
0

Since both your file is called test.html and the channelUrl is supposed to be test.html, you're creating a circular reference. For the proper channelUrl it is supposed to just contain one line

<script src="//connect.facebook.net/en_US/all.js"></script>

http://developers.facebook.com/docs/reference/javascript/

The channel file addresses some issues with cross domain communication in certain browsers. The contents of the channel.html file can be just a single line:

<script src="//connect.facebook.net/en_US/all.js"></script>

It is important for the channel file to be cached for as long as possible. When serving this file, you must send valid Expires headers with a long expiration period. This will ensure the channel file is cached by the browser which is important for a smooth user experience. Without proper caching, cross domain communication will become very slow and users will suffer a severely degraded experience. A simple way to do this in PHP is:

 <?php  $cache_expire = 60*60*24*365;  header("Pragma: public");  header("Cache-Control: max-age=".$cache_expire);  header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');  ?>  <script src="//connect.facebook.net/en_US/all.js"></script>

The channelUrl parameter is optional, but recommended. Providing a channel file can help address three specific known issues. First, pages that include code to communicate across frames may cause Social Plugins to show up as blank without a channelUrl. Second, if no channelUrl is provided and a page includes auto-playing audio or video, the user may hear two streams of audio because the page has been loaded a second time in the background for cross domain communication. Third, a channel file will prevent inclusion of extra hits in your server-side logs. If you do not specify a channelUrl, you can remove page views containing fb_xd_bust or fb_xd_fragment parameters from your logs to ensure proper counts.

The channelUrl must be a fully qualified URL matching the page on which you include the SDK. In other words, the channel file domain must include www if your site is served using www, and if you modify document.domain on your page you must make the same document.domain change in the channel.html file as well. The protocols must also match. If your page is served over https, your channelUrl must also be https. Remember to use the matching protocol for the script src as well. The sample code above uses protocol-relative URLs which should handle most https cases properly.

DMCS
  • 31,720
  • 14
  • 71
  • 104
-3

Please Change Your App ID Then Start Working

  <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
USAMA KHAN Web App Developer S
  • 1
  • 1