Tuesday, March 21, 2017

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

By Hường Hana 2:30 PM , , , Leave a Comment

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'));

3 Answers

Answers 1

Answering this for the benefit of others....

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

Answers 2

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

Answers 3

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

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment