Facebook Javascript api not loading

Question

Here is my code:

<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial |     
Thinkdiff.net</title>
</head>

<body>

<div id="fb-root"></div>

<script>

  window.fbAsyncInit = function() {
  FB.init({
  appId      : '154062364721089', // 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
  oauth: true
  });

  // Additional initialization code here

   alert('Api loaded');

   FB.login(function(response)
   {
    console.log(response);
   });

   };

  // Load the SDK Asynchronously
 (function(d){
 var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "connect.facebook.net/en_US/all.js";
 ref.parentNode.insertBefore(js, ref);
 }(document));

</script>

test

</body>
</html>

But when I open this file in the browser the Facebook api does not load. I just see "test" printed on the screen. I believe the browser should be contacting facebook to load the api - this I think will be known as a connecting message at the bottom of the browser, which is not happening.

Did you try just using "connect.facebook.net/en_US/all.js" instead of "//connect.facebook.net/en_US/all.js". — Larry Battle
– Larry Battle, Commented Apr 30, 2012 at 19:13
Drop the top script tag, you can't combine asynchronous and synchronous loading :) — Ja͢ck
– Ja͢ck, Commented Apr 30, 2012 at 19:17
I think you need to close the script tag when you use the src attribute. Then open a new script tag when you want to write javascript. — Larry Battle
– Larry Battle, Commented Apr 30, 2012 at 19:19
@Jack: Is this what you meant? I have edited the latest code. — London guy
– London guy, Commented Apr 30, 2012 at 19:23

Ja͢ck · Accepted Answer · 2012-04-30 20:24:42Z

2

Parse errors in your JavaScript should be the first things to address. Your code is missing a comma between the last two dictionary elements within the FB.init() call (xfbml and oauth)

Edit The code as you have it works fine for me in IE and Chrome, except when you run it from your local machine (i.e. double click an HTML file on your disc) due to the '//' in the URL when loading the API

edited Apr 30, 2012 at 20:24

answered Apr 30, 2012 at 19:38

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

London guy Over a year ago

So dumb of me. I never started Tomcat server and went on double-clicking the file to check! :( Silly me - thanks to everyone!

Ja͢ck Over a year ago

I did mention that in my answer as a possible reason :p

John Himmelman · Accepted Answer · 2012-04-30 19:15:18Z

1

It sounds like you're expecting Facebook to automatically prompt the user to connect/allow/login to the App. To do this, you need to add the following after fb api initialization (code goes after // Additional initialization code here)...

// Additional initialization code here

alert('Api loaded');

FB.login(function(response)
{
    console.log(response);
});

Edit: Also, try removing the <script> reference and use the async code from the facebook documentation - https://developers.facebook.com/docs/reference/javascript/

  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));

answered Apr 30, 2012 at 19:15

John Himmelman

22k22 gold badges68 silver badges83 bronze badges

8 Comments

London guy Over a year ago

Trying he changes you suggested now .

London guy Over a year ago

Where do I remove the script tag John? I edited the latest code I have above.

John Himmelman Over a year ago

@AbhishekShivkumar It looks like you removed it properly :) (saw your post edit)

London guy Over a year ago

But I don't get the alert box yet... wondering what the problem is here!

John Himmelman Over a year ago

@AbhishekShivkumar You should accept the correct answer or upvote helpful comments :p

|

CRABOLO · Accepted Answer · 2014-01-19 01:35:33Z

1

Not sure if this is totally relevant, found this thread as I've been getting 'js is not defined' after the line: js = d.createElement('script'); js.id = id; js.async = true;

Turned out the solution was the line: if (d.getElementById(id)) {return;} needing a trailing ; after, and not within the line parenthesis:

if (d.getElementById(id)) {return;};

and

if (d.getElementById(id)) {return};

Worked, whereas:

if (d.getElementById(id)) {return;}

Throws the error..

edited Jan 19, 2014 at 1:35

CRABOLO

8,82439 gold badges46 silver badges68 bronze badges

answered Jan 19, 2014 at 1:15

user3211184

111 bronze badge

Collectives™ on Stack Overflow

Facebook Javascript api not loading

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related