CODEWITHSUNDEEP
facebook-graph-apifacebookfacebook-fql
user847495
user847495

Reputation: 10171

Why am I getting this error for my Facebook Like button?

Uncaught ReferenceError: _onloadHook is not defined

Why? My code is below:

<!DOCTYPE html  xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<html>
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <script type="text/javascript">
    //Initialize facebook
        FB.init({
            appId  : '12345',
            status : true, // check login status
            cookie : true, // enable cookies to allow the server to access the session
            xfbml  : true, // parse XFBML
            channelUrl : 'http://www.abc.com/channel.html', // channel.html file
        });
    </script>
</head>

<body>
<div id="fb-root"></div>
<fb:send href="http://abc.com/blah" font="lucida grande" ref="codes_popup"></fb:send>
<fb:send href="http://abc.com/blah" font="lucida grande" ref="codes_popup"></fb:send>
</body>
</html>

Edit: When I have multiple this will happen. When I only have one "send" button , the error is not there.

For every extra "Send" button, the error occurs.

Upvotes: 0

Views: 697

Answers (4)

DDD
DDD

Reputation: 26

This is a bug in the Facebook Platform; it has already been reported as bug #20041.

Upvotes: 1

Ryan White
Ryan White

Reputation: 1917

You should call the facebook javascript using the upgraded async method. This will make sure that the whole DOM is loaded so that the fb:root is already on the page.

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR APP ID',
      status : true, // check login status
      cookie : true, // enable cookies to allow the server to access the session
      xfbml  : true,  // parse XFBML
      channelUrl  : 'http://www.yourdomain.com/channel.html', // Custom Channel URL
      oauth : true //enables OAuth 2.0
    });
  };

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

Also critically important is to add support for OAuth 2.0 http://developers.facebook.com/blog/post/525/

oauth : true

As of Oct 1 if you don't have that your apps will stop working properly.

Upvotes: 0

Don
Don

Reputation: 531

I have been getting the exact same error today.

As ifaour mentions, the FB documentation says that you need to place the FB <script> tags under the <div id="fb-root"></div>. However, in his example and in the FB documentation, they put the scripts directly under the <div id="fb-root"></div>. I was doing that and still getting the error the OP mentions. I was finally able to solve the problem by moving the FB <script> tags to the very bottom of the page, right before the closing </body> tag. I believe what was happening is that some of my other scripts were interfering with the loading of the FB scripts. Hope that helps.

Upvotes: 0

ifaour
ifaour

Reputation: 38135

Place the Facebook JS library and JS code scripts under the fb-root div: 

<!DOCTYPE html  xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<html>
<head>

</head>

<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
//Initialize facebook
    FB.init({
        appId  : 'XXX',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true, // parse XFBML
        channelUrl : 'http://www.abc.com/channel.html', // channel.html file
    });
</script>
<fb:send href="http://abc.com/blah" font="lucida grande" ref="codes_popup"></fb:send>
</body>
</html>

Upvotes: 0

Related Questions