search

zyra / ngx-facebook

Angular TypeScript Wrapper for Facebook SDK
http://zyra.github.io/ngx-facebook/
MIT License
209 stars 70 forks source link

ReferenceError: FB is not defined #126

Closed kiranpwt closed 6 years ago

kiranpwt commented 6 years ago

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

tvl83 commented 6 years ago

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.

tvl83 commented 6 years ago

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

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

danielsogl commented 6 years ago

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

Dando1996 commented 6 years ago

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>
danielsogl commented 6 years ago

Check out my Angular 6 PR: https://github.com/zyra/ngx-facebook/pull/141 Maybe it's fixed with the Angular 6 compatible release.

pilot2981 commented 5 years ago

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

  }
vuonghuuthien commented 4 years ago

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>

Add to your index.html

UmeshShelke06 commented 1 year ago

can you please share facebookservice code ? I am trying to implement this facebook authetication

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.