Facebook sigin-in javascript sdk not loading in Chrome or FF

Question

Update 1

I started with angular quickstart and added only facebook javascript, however it will not load:

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

---

I am using the JavaScript API for JavaScript to create an entry into an angular 2 application, but it works in the following:

TypeError: FB.login is not a function

index.html (done 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 that the script does not seem to load correctly following from Chrome devtools :

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 } } 

Should I do something like the following? as described 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')); 

Answer 1

Answering this for others.

It was a ghostery plugin that was (among other things) a blocking "social signal".

Answer 2

I think insert the fb script library into your main html file. Also make sure that the script provided by the fb developers is inserted into your code that solves the problem. Follow the link https://developers.facebook.com/docs/javascript/quickstart

Answer 3

Do not run FB.init directly, you should:

 declare var window:any; 

and then your constructor or ngInit method uses the Async FB 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 starts automatically when you load facebook sdk.

More on Facebook Quick Start