Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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'));
like image 508
kmansoor Avatar asked Mar 12 '17 01:03

kmansoor


1 Answers

Answering this for the benefit of others....

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

like image 133
kmansoor Avatar answered Sep 22 '22 10:09

kmansoor