Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook social sigin-in javascript sdk won't load in Chrome or FF – Facebook api

Update 1

I started with angular quickstart and only added facebook‘s javascript, however, it won’t load:

<script type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script>

I am Using Facebook JavaScript API to create login in an angular 2 app, but running into the following:

TypeError: FB.login is not a function

index.html (Elided for brevity)

<script type="text/javascript" src="//connect.facebook.net/en_US/sdk.js"></script>

<script>
    System.import('app').catch(function (err) {console.error(err);});
</script>

I noticed the script does not seem to load correctly, following is from Chrome devtools:

enter image description here

Angular 2 Component

declare const FB: any;

@Component({
  // usual suspects here
})
export class LoginComponent implements OnInit {
 constructor() {
  FB.init({
    appId: 'my-app-id',
    cookie: false,
    xfbml: true,
    version: 'v2.5'
  });    
 }

 ngOnInit(): void {    
    FB.getLoginStatus(response => {
      ....
    });
 }

 onSignin(socialMedia: string): void {
   FB.login(); // The errant line
 }
}

Am I supposed to do something like the following? as outlined here

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

3

Answers


  1. Chosen as BEST ANSWER
    0

    Answering this for the benefit of others....

    It was ghostery plugin which was (among other things) blocking 'social signin'.


  2. 0

    i think insert script library of fb in your main html file.Also make sure that the script provided by the fb developers are inserted in your code that solve the problem.follow the link https://developers.facebook.com/docs/javascript/quickstart

    Login or Signup to reply.
  3. 0

    Don’t run FB.init directly, You should do:

    declare var window:any;

    and then in your constructor or ngInit Method use FB Async Method:

        window.fbAsyncInit = function() {
            FB.init({
              appId: appID,
              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.com/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    fbAsyncInit automatically get trigger when facebook sdk loads.

    See more at Facebook quick start

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search