21

I've a problem with FB JS SDK.

I'm trying to do a request to get the fan_count of a facebook page node.

Here is my code from my html file into the body : 

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

    (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 = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

And when I'm using this on my js app, I use it : 

init();

function init() {
  var id_fb  = "l214.animaux";
  while (true) {
    console.log("je suis ici");
    FB.api(
      '/' + id_fb +  '/',
      'GET',
      {"fields":"fan_count"},
      function(response) {
        alert(response.fan_count);
      }
    );
  }
}

But the error is that FB is not defined. Any suggestions ?

Improve this question
5
  • You should init as callback URI or make sue FB is first loaded, than your init. Commented Apr 30, 2016 at 14:58
  • So I have to call init function at the end of fbAsyncInit function? It seems doesn't work for me :) Commented Apr 30, 2016 at 15:01
  • See: stackoverflow.com/questions/9184163/… Commented Apr 30, 2016 at 15:07
  • You also can't do an infinite loop like this in Javascript and expect ajax calls to work inside of it. That will never work. Commented Apr 30, 2016 at 15:09
  • OK thanks, I will look it. @jfriend00 you have right, I will change that. Commented Apr 30, 2016 at 15:24

3 Answers 3

Reset to default
20

This would be correct, you need to use FB after the JS SDK is initialized. That being said, you definitely don´t want to call FB.api in an infinite loop, so i removed that part:

<script>
    function init() {
        FB.api(
          '/l214.animaux',
          {"fields":"fan_count"},
          function(response) {
            alert(response.fan_count);
          }
        );
    }

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

      init();
    };

    (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 = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

Make sure you run this from an actual server, don´t just open your HTML files in a browser without at least a local server.

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

6 Comments

thanks for your answer, now I've not this error of FB is not defined. But, init function is never called. I past your code and just add a console.log in init function at the begining and the web browser console stays blank
i guess the js sdk does not get loaded. are you trying this with an actual webserver, or did you just open the html file in the browser locally?
I open it locally with the html file
well...of course that does not work. try with a real server (either on localhost or on a real one). you can also add "https" to the sdk source, but i would not recommend that. developers use localhost to develop nowadays, just opening a html file in the browser is not how it is done anymore.
I will implement a localhost server tomorrow
|
16

I got this error because I write the init code in an independent js file, so, of course FB is not defined, because it should be window.FB.

my code:

class FacebookUtil {

  static init() {
    // comes from https://developers.facebook.com/docs/javascript/quickstart
    // notice FB should be window.FB
    window.fbAsyncInit = function() {
      window.FB.init({
        appId            : '...',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v2.10'
      });
      window.FB.AppEvents.logPageView();
    };

    (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 = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }

  static login() {
    window.FB.login(...)
  }

}
Improve this answer

Comments

0

if it's in react that you are dealing with here is my solution code. And you must deactivate script blocking settings ( in brave browser I saw it's blocking and was reason for that issue)

    






import React from "react";

export const FacebookButton = ()=>{
    const handleClick=()=>{
        FB.login(function(response) {
            if (response.authResponse) {
            //  console.log('Welcome!  Fetching your information.... ');
             FB.api('/me', function(response) {
              //  console.log('Good to see you, ' + response.name + '.');
             });
            } else {
            //  console.log('User cancelled login or did not fully authorize.');
            }
        });
    }
    React.useEffect(()=>{
        window.fbAsyncInit = function() {
            window.FB.init({
                appId      : '380427166785990',
                xfbml      : true,
                version    : 'v11.0'
              });
            window.FB.AppEvents.logPageView();
          };
      
          (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 = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
        
    },[])
    
    return(
        <button  onClick={handleClick}>Login</button>    )
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>












import React from "react";

export const FacebookButton = ()=>{
    const handleClick=()=>{
        FB.login(function(response) {
            if (response.authResponse) {
            //  console.log('Welcome!  Fetching your information.... ');
             FB.api('/me', function(response) {
              //  console.log('Good to see you, ' + response.name + '.');
             });
            } else {
            //  console.log('User cancelled login or did not fully authorize.');
            }
        });
    }
    React.useEffect(()=>{
        window.fbAsyncInit = function() {
            window.FB.init({
                appId      : '0500550055050',
                xfbml      : true,
                version    : 'v11.0'
              });
            window.FB.AppEvents.logPageView();
          };
      
          (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 = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
        
    },[])
    
    return(
        <button  onClick={handleClick}>Login</button>    )
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.