CODEWITHSUNDEEP
javascriptfacebookfbconnectfbjs
BeachRunnerFred
BeachRunnerFred

Reputation: 18578

Javascript: My fbAsyncInit() method never gets called

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>

Upvotes: 13

Views: 46376

Answers (6)

USAMA KHAN Web App Developer S
USAMA KHAN Web App Developer S

Reputation: 1

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>

Upvotes: -3

J&#248;rgen J&#248;rgensen
J&#248;rgen J&#248;rgensen

Reputation: 91

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.

Upvotes: 9

Mart&#237;n
Mart&#237;n

Reputation: 117

You should change:

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

to:

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

Upvotes: 6

Nimrod Yonatan Ben-Nes
Nimrod Yonatan Ben-Nes

Reputation: 386

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

Upvotes: 2

Mikey G
Mikey G

Reputation: 3491

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>

Upvotes: 5

DMCS
DMCS

Reputation: 31870

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.

Upvotes: 0

Related Questions