Javascript: My fbAsyncInit() method never gets called

Asked 7/2, 2012 at 21:23 Answered 28/1, 2018 at 9:32

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>

Niu answered 7/2, 2012 at 21:23 Comment(4)

is your file called test.html ? – Burg 7/2, 2012 at 21:25

yes it is, is that a problem? – Niu 7/2, 2012 at 21:27

Are there any js errors? – Selfness 7/2, 2012 at 21:33

What browser you are testing it in? Try to change src for some nonexistent and check error logs in browser after that. – Usury 7/2, 2012 at 21:56

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.

Diapositive answered 21/11, 2012 at 19:24 Comment(2)

This is the solution for the problem! – Disario 7/3, 2016 at 12:9

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. – Bourgogne 14/2, 2020 at 16:53

You should change:

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

to:

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

Kensell answered 8/11, 2012 at 2:54 Comment(6)

wtf?? don't know how I would of ever figured that out wtthout SO – Minetta 7/3, 2013 at 18:8

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. – Touchandgo 11/6, 2013 at 17:34

It's better to leave the protocol off, or else like @Touchandgo said, use https – Ursas 6/8, 2014 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. – Osmometer 29/12, 2015 at 18:43

Worked for me, just changed the http for https. – Gladysglagolitic 11/4, 2019 at 18:54

@leonardofmed, could you take a look #66655209 – Dogeatdog 17/3, 2021 at 9:10

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>

Selfness answered 7/2, 2012 at 21:29 Comment(10)

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 – Niu 7/2, 2012 at 21:40

I don't know... this guy is loading asynchronously and it seems to work for him: facebook.#2856284 the code at the top works, if you read the answer, he just for got to put in the right appid – Selfness 7/2, 2012 at 21:44

@BeachRunnerJoe it looks like he is appending the script below to the fb-root div, instead of to the head. – Selfness 7/2, 2012 at 21:46

@MikeyG This script is an example from the Facebook developers.facebook.com/docs/reference/javascript – Usury 7/2, 2012 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? – Niu 7/2, 2012 at 22:37

It should be, and i think you can take it that window.fbAsyncInit isn't getting called – Selfness 7/2, 2012 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" – Niu 7/2, 2012 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. – Selfness 7/2, 2012 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. – Niu 7/2, 2012 at 22:59

No problem, I hope you get it figured out – Selfness 7/2, 2012 at 23: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

Firebug answered 3/7, 2012 at 18:14 Comment(3)

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 – Firebug 3/7, 2012 at 20:55

OK ignore the "even if" above, it cause the problem WHEN an alert() is issued from the Scratchpad – Firebug 4/7, 2012 at 9:38

WOW! I freaking hate chrome right now !!!!!!!!!!!!!! WTF!!!! Thank you!!!! – Huckaby 6/3, 2021 at 19:58

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.

Burg answered 7/2, 2012 at 21:29 Comment(4)

Thanks, DMCS, I removed the optional channelUrl parameter and this method still never fires. Your thoughts? – Niu 7/2, 2012 at 21:32

Try removing one of the two ending </script> tags as its extra and might be causing your browser to not like it. – Burg 7/2, 2012 at 21:42

yeah i fixed that, it didn't help – Niu 7/2, 2012 at 21:43

Are you sure, the only html you have is what you posted?? Do you have javascript turned off on your browser? – Burg 7/2, 2012 at 21:45

-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>

Clathrate answered 28/1, 2018 at 9:32 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags