ReferenceError: FB is not defined

Question

ReferenceError: FB is not defined

kiranpwt opened this issue 7 years ago · 8 comments

video share in facebook ... error occurs ReferenceError: FB is not defined
my code is see
function init_fb(){
window.fbAsyncInit = function() {
app_id = document.getElementById('fb_app_id').value;
FB.init({
appId : app_id,
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
};

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

}

function call_fb_share(){
site_name = "Musical Names";
site_url = "http://musicalnames.com";
fb_shar_image = "http://musicalnames.com/ecards/images/user_images/thumbs/thumb-fb_10942740_1581202525431718_323317920938951800_n.jpg.jpg";
detail_description = 'This is testing for desc ' ;

FB.ui({ method: 'feed', name: site_name, link: site_url, picture: fb_shar_image, caption: 'Musical Names E-card', description: detail_description, message: 'fb message' }, function(response){});

}
plz any solution...

Answer 1 · 2018-04-04T14:09:00.000Z

I am having the same problem. Fresh project. Included in modules the service and the facebook module. And tried it with just the service. Any help is appreciated.

Answer 2 · 2018-04-04T14:19:49.000Z

I just realized i forgot to add the facebook sdk js file in the index.html page

Also, it only worked by putting it in the <head> not before the </body> like recommended for lots of js libraries.

Answer 3 · 2018-07-26T14:21:59.000Z

Reopen the issue if you still have this problem.
I will update the docs with the next release to make it cleaner what is to do

Answer 4 · 2018-09-28T13:17:34.000Z

I'm having the same issue with a fresh project. In Angular 6.
The error I'm getting is:

Uncaught (in promise): ReferenceError: FB is not defined ReferenceError: FB is not defined at FacebookService.push../node_modules/ngx-facebook/dist/esm/providers/facebook.js.FacebookService.init (facebook.js:32) at new AppComponent (app.component.ts:18)

In my index.html file:

<html>
<head>
  <meta charset="utf-8">
  <title>ngx-facebook Example Project</title>
  <!--<base href="/">-->

  <!-- including bootstrap so the example is not so ugly -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <!-- We need to include the Facebook script tag here -->
  <!-- in this project, the app bundle files are added automatically by the build process at the end of the file  -->
  <script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

In my app.module file:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { FacebookModule } from 'ngx-facebook';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    FacebookModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

My app.component.ts file:

import { FacebookService, LoginResponse, LoginOptions, UIResponse, UIParams, FBVideoComponent } from 'ngx-facebook';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(
    private fb: FacebookService
  ) {

    console.log('Initializing Facebook');

    fb.init({
      appId: "my-app-id",
      version: 'v3.1'
    });

  }

  login() {
  this.fb.login()
    .then((res: LoginResponse) => {
      console.log('Logged in', res);
    })
    .catch(this.handleError);
}

private handleError(error) {
  console.error('Error processing action', error);
}

}

And finally the app.component.html file:

  <h1>
    Welcome to {{ title }}!
  </h1>
  <button (click)="login()" class="btn btn-lg btn-primary btn-block">
    Login
  </button>
</div>

Answer 5 · 2018-09-28T19:36:00.000Z

Check out my Angular 6 PR: #141
Maybe it's fixed with the Angular 6 compatible release.

Answer 6 · 2018-12-14T11:01:37.000Z

try initialize fb initParams inside "isPlatformBrowser(this.platformId)"

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    
    if(isPlatformBrowser(this.platformId)) {
      let initParams: InitParams = {
        appId: '{app-id}',
        xfbml: true,
        cookie: true,
        version: 'v2.8'
      };
      fb.init(initParams);
    }
    
  }

Answer 7 · 2020-02-28T10:14:59.000Z