Hi, can somebody provide me the interface for the params parameter in the api method?

api(path: string, method?: FacebookApiMethod, params?: any)

many thanks!

Hi, I'm wondering if it's worth it to add a method that dynamically/asynchronously adds the FB SDK script rather than manually add the reference in the index.html file? Would you be open to PRs for that kind of change? Thanks!

Facebook login dialog says: "uri blocked",
I checked the return url for the test environment i created, but the url was not updating,
Checked in the changes for Fb.FacebookUiParams also but it is not updating, some staticxx.facebook.com url is always coming as the return URI in facebook login dialog.
Any solutions?

Now that exception is catched in init() method, we can't detect if init process failed. This is very annoying.
Could we

• throw an exception if FB.init fails
• or refactor FacebookService.init function into a promise
• or set a state on FacebookService that provides information about fail or success status of init ?
  Thanks

Browser gets stuck at loadiing.

Developer tools console shows the following
http://localhost:3000/ng2-facebook-sdk Failed to load resource: the server responded with a status of 404 (Not Found)

I have followed the steps in the readme. I am just running the basic example.

Thanks in advance for your help!

Hi

I'm trying to use your library to integrate facebook on my Angular 2 webApp.

I've installed the library and configured all steps but when start my webapp the inspector shows this error message and the webapp not start

GET http://localhost:3000/node_modules/ng2-facebook-sdk/ 404 (Not Found) fetch:32

Could you help me?

Hi

I previously had some problem that got resolved with issue #25 and #34, but now i stumple upon an issue saying:
ZoneAwareError {__zone_symbol__error: Error: (SystemJS) Unexpected value 'FacebookService' imported by the module 'AppModule'....}

Could you help me?

I am getting 404 error on ng2-facebook-sdk
in my app.module.ts
import { FacebookService } from "ng2-facebook-sdk/dist/ng2-facebook-sdk";
providers: [FacebookService]

Is possible to change the window position of the popup when trying to share?
It is always in the bottom right.

Hi,
on my side I got this message:

404 GET /node_modules/ng2-facebook-sdk/dist.js

I included in index.html what follows:

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

Then in the systemjs.config.js:

map: {
  ...
 'ng2-facebook-sdk': 'npm:ng2-facebook-sdk'
},
packages: {
  ...
'ng2-facebook-sdk': {
                main: './ng2-facebook-sdk.js',
                defaultExtension: 'js'
            }

Any idea?

I've tried using the ui method for a share dialog, but it's interface is missing a required href attribute so I cannot pass FacebookUiParams correctly. I've created a pull request that takes care of this.

Hi guys,
first of all thanks for such a lovely plugin... 😄

I got this issue while tryna implement game requests...

Argument of type { method: string; message: string; } is not assignable to parameter of type 'FacebookUiParams'.

message is used in apprequests ui method.
https://developers.facebook.com/docs/games/services/gamerequests#jssdk

1. Added this module to app from npm
2. Added facebook sdk in index.html

<script src="https://connect.facebook.net/en_US/sdk.js"></script>
    
    <!-- Custom -->
    <script type="text/javascript" src="lib/custom.js"></script>

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

component.ts

import { FacebookService } from 'ng2-facebook-sdk';


@Component({
  moduleId: module.id,
  selector: 'login',
  templateUrl: `login.component.html`,
  providers: [FacebookService]
})

export class LoginComponent {

 constructor(public fs: FacebookService) {
       
  }
}

Whenever I use FacebookService (provideres, constructor), I am getting unexpected token error. Can you help me?

Hello all,
I'm currently using this in my project:
FBLogout() {
this.fb.logout()
.then(response => {
console.log("Logout?", response);
})
}
I assigned the function to a button and when I click it I get an error:
Refused to display 'https://www.facebook.com/home.php' in a frame because it set 'X-Frame-Options' to 'DENY'. And the user is still logged in. The console.log in never shown.
Any ideas?
Thanks!

@ihadeed I checked the closed issues, but nothing worked on my side. I've a script that includes FB SDK in header.
I'm trying to implement this with angular-universal starter project https://github.com/angular/universal-starter
Here is the component I'm trying to add FB login code provided in readme: https://github.com/angular/universal-starter/blob/master/src/app/home/home.component.ts

Any hints?

I was just trying to make a Facebook login. But the following error is showing. I am attaching the screenshot of the error. both in safari and chrome.
In chrome

In safari

at line 8727 the value of w is like returning an authResponse object.

My Facebook login component is like this
`
export class FacebookLoginComponent implements OnInit {

constructor(private fb: FacebookService) {
    const initParams: InitParams = {
        appId: Config.facebook_api_id,
        xfbml: true,
        version: 'v2.8'
    };

    this.fb.init(initParams);
}

ngOnInit() {

}

loginWithFacebook(): void {
    this.fb.login({scope: 'email, public_profile'})
        .then(
            (response: LoginResponse) => {
                console.log(response);
            }
        )
        .catch((error: any) => console.error(error));

}

}
`
Need help.TIA

Is possible to share content without show the dialog?

I've tried to set display option of FacebookUiParams to:
"async", "hidden", or "none"

But it doesn't works

Thanks

Trying to set the href property of the FacebookUiParams object, this error is returned while building: Object literal may only specify known properties, and 'href' does not exist in type 'FacebookUiParams'

Hi there,
Check please this link: https://zyramedia.github.io/ng2-facebook-sdk/facebook-service/
there is a typo error in this line scope: public_profiel, user_friends,email,pages_show_list

it should be fixed cauze we all do copy & paste blindly & it causes a 500 fb api error :)

Thanks

I think ng2-facebook-sdk package should be located in dependencies (not in devDependencies).
If so, please update the document.

I am using ng2-facebook-sdk to call some facebook endpoint on our project.
I have logged in using login endpoint of ng2-facebook-sdk.
I am trying to call acounts endpoint with manage_pages, publish_pages, pages_show_list options
FB.api(
"/{user-id}/accounts",
function (response) {
if (response && !response.error) {
/* handle the result */
}
}
);

how can I use the ng2-facebook-sdk endpoint to do this?

It seems to me that Angular2 is all Observable yet this project is using Promise.
Result in the code I wrote looks very strange. And I'm having a hard time to chain things properly.

Hey there,

I've added this npm module to my project and followed all of the instructions, however when I try to load my app it says "FB is not defined". Any idea what this could be?

This is a great component so thank you.

Is there anyway that I can add requested permissions to the login url?
For example I want to add the email permission request so I think I have to add a parameter to the url....

"You can do this if you are using Facebook connect by passing scope=email in the get string of your call to the Auth Dialog."

http://stackoverflow.com/questions/3611682/facebook-graph-api-how-to-get-users-email

Is there anyway to do this using your code?

This module cannot be used with SystemJS module loader.
Can you build umd file?
Thank you.

HI , it is working fine now i am searching for same type of thing for linkedin but could not find any solution . can you help me ?

Hello,

I got some error like this

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: FB is not defined
Error: Error in :0:0 caused by: FB is not defined
at ViewWrappedError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:111699:33)
at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:6905:16)
at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:6970:16)
at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:61930:16)
at CompiledTemplate.proxyViewClass.DebugAppView.rethrowWithContext (http://localhost:4200/vendor.bundle.js:85422:23)
at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (http://localhost:4200/vendor.bundle.js:85339:18)
at ComponentFactory.create (http://localhost:4200/vendor.bundle.js:44860:25)
at ViewContainerRef.createComponent (http://localhost:4200/vendor.bundle.js:62606:62)
at RouterOutlet.activate (http://localhost:4200/vendor.bundle.js:68452:40)
at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:25879:16)
at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:25846:26)
at http://localhost:4200/vendor.bundle.js:25782:58
at Array.forEach (native)
at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:25782:29)
at ActivateRoutes.activate (http://localhost:4200/vendor.bundle.js:25756:14)

my step to install are

1. nstall via NPM
   2.Add the Facebook JavaScript SDK to your index.html

and my example code are
`import { Component, OnInit } from '@angular/core';
import { FacebookService, FacebookLoginResponse, FacebookInitParams } from 'ng2-facebook-sdk/dist';

@component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
providers: [FacebookService]
})
export class LoginComponent implements OnInit {

constructor(private fb: FacebookService) {
let fbParams: FacebookInitParams = {
appId: '*****',
xfbml: true,
version: 'v2.8'
};
fb.init(fbParams);
}

onFacebookLoginClick(): void {
this.fb.login().then(
(response: FacebookLoginResponse) => console.log(response),
(error: any) => console.log(error)
);
}`

thank you.

error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Error in ./LoginComponent class LoginComponent_Host - inline template:0:0 caused by: FB is not defined

    const fbParams: FacebookInitParams = {
      appId: 'REDACTED',
      xfbml: true,
      version: 'v2.8'
    };
    this.fb.init(fbParams);

this.fb.getLoginStatus()
      .then((i) => {
        console.log(i);
      })
      .catch(e => {
        console.log(e);
      })

neither of the console logs ever fire. No errors in log

grantedScopes is missing in FacebookAuthResponse, it is returned when return_scopes is passed.
Docs

After installing this library and putting the init code in constructor I get the error: FB is not defined. The issue is coming in this line in the library:

    FacebookService.prototype.init = function (params) {
        FB.init(params);
    };

Can you upgrade your lib to angular 4?

Hello,

I have used this library and it works perfectly, but I would like to know how to get the logged user's email. I Facebook Developers documentation it says we can ask for different permissions besides the default basic ones. Well, I have read that it can be asked in the Login() method, as it can be seen in the Javascript SDK Login documentation. But I don't know how to it with this Typescript version.

Thank you in advance.

Regards,

Alberto.

Hi there.

I just did

npm i --save ng2-facebook-sdk

And I got the following error

npm ERR! Darwin 16.1.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "--save" "ng2-facebook-sdk"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! path /Users/Fede/dev/bukium-rel/node_modules/bootstrap
npm ERR! code EISGIT

npm ERR! git /Users/Fede/dev/bukium-rel/node_modules/bootstrap: Appears to be a git repo or submodule.
npm ERR! git /Users/Fede/dev/bukium-rel/node_modules/bootstrap
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/Fede/dev/bukium-rel/npm-debug.log

What am I doing wrong?

Hi

Do you have any API usage examples?

I'm trying to get the pages a user manages, to ultimately post to them.

This is a snippet of my code, but I'm not getting the same response as in the Graph Explorer

let options:FacebookLoginOptions = {
  scope:'publish_actions,manage_pages,publish_pages,pages_show_list'
}
this.facebookService.login().then(
  (response: FacebookLoginResponse) => {
    console.log(response);
    this.authResponse = response.authResponse;

    this.facebookService.api(this.authResponse.userID+'/accounts')
       .then((response)=>console.log(response));
 },
 (error: any) => console.error(error)
);

Thanks for this project, and your help.

Currently working on version 2.0.0 of this module. The work is being done in the v2 branch.

What's changing?

• Interfaces no longer have Facebook prefix. Example: FacebookLoginOptions is now LoginOptions
• UiParams and UiResponse are now UIParams and UIResponse.
• Adding components to make using Facebook Plugins easier

What needs to change in your application?

You just need to refactor any interface usage to work with the changes mentioned above.

If you want to use the components in your app, you need to do 2 things:

• Remove FacebookService and add FacebookModule in your NgModule
• Use the following link in your script tag, you can change the language or use a later version: //connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8

How can I use this in my app now?

npm i --save ng2-facebook-sdk@next

To-do

• Export NgModule
• Comments
• Embedded comments
• Embedded posts
• Embedded videos
• Follow button
• Like button
• Page plugin
• Quote plugin
• Save button
• Send button
• Share button
• Complete documentation
• Complete testing
• Event listeners

Hi,

I'm facing an issue when I trigger the login. A new window opens and says:

“URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings.”

What URI should I put on my app settings?

Hi, i have issue.

I installed the script correctly because everything works, i can login/logout/get info about user.
But when i refresh (using F5) page in console i have Error:

`
ERROR { Error: Uncaught (in promise): ReferenceError: FB is not defined
ReferenceError: FB is not defined
at FacebookService.init (webpack:///.//ngx-facebook/dist/esm/providers/facebook.js?:34:36)
at LoginFacebookComponent.ngOnInit (webpack:///./src/app/components/user/login/loginFacebook.component.ts?:26:17)
at checkAndUpdateDirectiveInline (webpack:///.//@angular/core/@angular/core.es5.js?:10916:19)
at checkAndUpdateNodeInline (webpack:///.//@angular/core/@angular/core.es5.js?:12295:17)
at checkAndUpdateNode (webpack:///.//@angular/core/@angular/core.es5.js?:12263:16)
at prodCheckAndUpdateNode (webpack:///.//@angular/core/@angular/core.es5.js?:12716:5)
at Object.View_AppComponent_0.WEBPACK_IMPORTED_MODULE_0__angular_core._37.co [as updateDirectives] (webpack:///./aot/src/app/components/app.component.ngfactory.ts?:265:9)
at Object.updateDirectives (webpack:///.//@angular/core/@angular/core.es5.js?:12631:72)
at checkAndUpdateView (webpack:///.//@angular/core/@angular/core.es5.js?:12230:14)
at callViewAction (webpack:///.//@angular/core/@angular/core.es5.js?:12545:17)
at execComponentViewsAction (webpack:///.//@angular/core/@angular/core.es5.js?:12491:13)
at Object.checkAndUpdateView (webpack:///.//@angular/core/@angular/core.es5.js?:12236:5)
at ViewRef_.detectChanges (webpack:///.//@angular/core/@angular/core.es5.js?:10327:63)
at eval (webpack:///.//@angular/core/@angular/core.es5.js?:5257:63)
at Array.forEach (native)
at new Error (native)
at resolvePromise (webpack:///.//zone.js/dist/zone-node.js?:712:31) [angular]
at Function.ZoneAwarePromise.reject (webpack:///.//zone.js/dist/zone-node.js?:789:20) [angular]
at FacebookService.init (webpack:///.//ngx-facebook/dist/esm/providers/facebook.js?:37:28) [angular]
at LoginFacebookComponent.ngOnInit (webpack:///./src/app/components/user/login/loginFacebook.component.ts?:26:17) [angular]
at checkAndUpdateDirectiveInline (webpack:///.//@angular/core/@angular/core.es5.js?:10916:19) [angular]
at checkAndUpdateNodeInline (webpack:///.//@angular/core/@angular/core.es5.js?:12295:17) [angular]
at checkAndUpdateNode (webpack:///.//@angular/core/@angular/core.es5.js?:12263:16) [angular]
at prodCheckAndUpdateNode (webpack:///.//@angular/core/@angular/core.es5.js?:12716:5) [angular]
at Object.View_AppComponent_0.WEBPACK_IMPORTED_MODULE_0__angular_core._37.co [as updateDirectives] (webpack:///./aot/src/app/components/app.component.ngfactory.ts?:265:9) [angular]
at Object.updateDirectives (webpack:///.//@angular/core/@angular/core.es5.js?:12631:72) [angular]
at checkAndUpdateView (webpack:///.//@angular/core/@angular/core.es5.js?:12230:14) [angular]
at callViewAction (webpack:///.//@angular/core/@angular/core.es5.js?:12545:17) [angular]
at execComponentViewsAction (webpack:///./~/@angular/core/@angular/core.es5.js?:12491:13) [angular]

`

This info is from node, but is it a issue from ng2-facebook-sdk , angular 4 or webpack library?

I am able to log in and the response from server shows that i am connected with access token etc..

However, when i make an API call

this.fb.api('/me?fields: email', 'get').then(
(response: FacebookLoginResponse) => console.log(response),
(error: any) => console.error(error)
)

I only get the id and name of user. Cant seem to get the email. In the authResponse object, for the returned scopes property i get following:
"email, contact_email, public_profile"

So I do have access to email but cant query it with the API method. Do you know any reason why this might be happening.

Thank You

I managed to log in an get the accessToken, but the api method doesn't seem to work or i don't know how to use it. Examples would be great. Thanks.

Firefox 51.x results in this
The resource at “https://connect.facebook.net/en_US/sdk.js” was blocked because tracking protection is enabled.
Did anyone encounter the same and manage to resolve?

Angular2 / Ionic2 app.
App is not being initialised and throws invalid version specified

Changing https://connect.facebook.net/en_US/sdk.js to https://connect.facebook.net/en_US/all.js solves the problem. Should it be like that?

HI,

I am trying to use your module in Ionic 2 without success.

Error:
FB is not defined

And I've already executed:

let fbParams: FacebookInitParams = {
                                   appId: '111111',
                                   status     : true,
                                   xfbml      : true,
                                   version: 'v2.6'
                                   };
this.fb.init(fbParams);

Any help?

Thank you!

How do I subscribe to Facebook messenger events using ng2-facebook-sdk?

The code without the library is as follows:

     FB.Event.subscribe('send_to_messenger', function(e) {
       // callback for events triggered by the plugin
    
     });

how to get name, email, profile picture in the response??

like from here:

FB.api('/me?fields=id,name,email', function(response) {
      console.log('Successful login for: ' + response.name);
      document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.email + '!';
      console.log(response);
}, {scope: ''});

Object {id: "1051802346773234", name: "Full Name", email: "[email protected]"}

I use webpack to bundle my project and it always shows this warning:

WARNING in ./~/ng2-facebook-sdk/dist/index.js
Cannot find source file '../src/index.ts': Error: Can't resolve '../src/index.ts' in C:\...\node_modules\ng2-facebook-sdk\dist'
 @ ./src/app/components/app.component.ts 12:0-51
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

The problem is that you provide a map file but the referenced code file is missing.
Can you remove the map file or add the source files to the package? Because it doesn't really make sense to have the map files without the source files. Or am I wrong?
Thanks!

I'm trying to use FB.ui with the Go Live Dialog, but transpiler says Argument of type '{ display: string; method: string; phase: string; }' is not assignable to parameter of type 'FacebookUiParams'

checking read.me there is no specification for FacebookUiParams Interface.

Do you have a time scope to add it?

Hi,
I am trying to share canvas to Facebook,
I followed: https://github.com/lukasz-madon/heroesgenerator to implement the function in component

shareFacebook() {
var canvas = $('#myCanvas').get(0);
var data = canvas.toDataURL("image/png");
var encodedPng = data.substring(data.indexOf(',') + 1, data.length);
var decodedPng = Base64Binary.decode(encodedPng);

const options: LoginOptions = {
  scope: 'publish_actions',
  return_scopes: true,
  enable_profile_selector: true
};
this.fb.login(options).then((response: any) => {
  this.postImageToFacebook(response.authResponse.accessToken, "canvasImg", "image/png", decodedPng, "www.heroesgenerator.com");
});

}

I got error:
{
"error": {
"message": "(#200) Requires extended permission: publish_actions",
"type": "OAuthException",
"code": 200,
"fbtrace_id": "CH3fu/EmGwh"
}
}
the Facebook didn't login with scope 'publish_actions'

Any Suggestion is appreciated

Hello,

Does this library help to embed FB page plugins?
https://developers.facebook.com/docs/plugins/page-plugin

I had to clean my chrome caches and cookies to make it works for a few time, maybe like 5-10 calls, then i get a 'unknown' status in the response. But it works like a charm on safari, tested on different computers.

Do you have this same issue ?