Angular TypeScript Wrapper for Facebook SDK
This is a wrapper for the official Facebook JavaScript SDK. It makes it easier to use Facebook SDK with Angular by providing components, providers and types.
npm i -S ngx-facebook
<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script>
FacebookModule
into your app's root moduleimport { FacebookModule } from 'ngx-facebook';
@NgModule({
...
imports: [
FacebookModule.forRoot()
],
...
})
export class AppModule { }
FacebookService
and call the init
method (optional):This method must be called before using login
or api
methods. It is not required for other methods/components.
import { FacebookService, InitParams } from 'ngx-facebook';
...
export class MyComponentOrService {
constructor(private fb: FacebookService) {
const initParams: InitParams = {
appId: '1234566778',
xfbml: true,
version: 'v2.8'
};
fb.init(initParams);
}
}
You can view complete and detailed documentation by visiting https://zyra.github.io/ngx-facebook/.
You can view our example project here and/or view its source code here
import { FacebookService, LoginResponse } from 'ngx-facebook';
@Component(...)
export class MyComponent {
constructor(private fb: FacebookService) { }
loginWithFacebook(): void {
this.fb.login()
.then((response: LoginResponse) => console.log(response))
.catch((error: any) => console.error(error));
}
}
import { FacebookService, UIParams, UIResponse } from 'ngx-facebook';
...
share(url: string) {
const params: UIParams = {
href: 'https://github.com/zyra/ngx-facebook',
method: 'share'
};
this.fb.ui(params)
.then((res: UIResponse) => console.log(res))
.catch((e: any) => console.error(e));
}
<fb-like href="https://github.com/zyra/ngx-facebook"></fb-like>
<fb-video href="https://www.facebook.com/facebook/videos/10153231379946729/"></fb-video>
<fb-video href="https://www.facebook.com/facebook/videos/10153231379946729/" (paused)="onVideoPaused($event)"></fb-video>
import { Component, ViewChild } from '@angular/core';
import { FBVideoComponent } from 'ngx-facebook';
@Component(...)
export class MyComponent {
@ViewChild(FBVideoComponent) video: FBVideoComponent;
ngAfterViewInit() {
this.video.play();
this.video.pause();
this.video.getVolume();
}
onVideoPaused(ev: any) {
console.log('User paused the video');
}
}
We use SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under the MIT License - see the LICENSE.md file for details
If you find this project useful, please star the repository to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you :smile: