Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zyra/ngx-facebook
Angular TypeScript Wrapper for Facebook SDK
https://github.com/zyra/ngx-facebook
angular2 angular4 facebook-sdk ionic2
Last synced: 2 months ago
JSON representation
Angular TypeScript Wrapper for Facebook SDK
- Host: GitHub
- URL: https://github.com/zyra/ngx-facebook
- Owner: zyra
- License: mit
- Created: 2016-05-30T23:37:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-06-14T11:16:06.000Z (over 4 years ago)
- Last Synced: 2024-09-28T17:04:05.510Z (2 months ago)
- Topics: angular2, angular4, facebook-sdk, ionic2
- Language: TypeScript
- Homepage: http://zyra.github.io/ngx-facebook/
- Size: 701 KB
- Stars: 209
- Watchers: 6
- Forks: 70
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- Awesome - Facebook Wrapper
README
# ngx-facebook
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.
[](https://www.npmjs.com/package/ngx-facebook)
[](https://drone.zyra.ca/zyra/ngx-facebook)
[](https://www.npmjs.com/package/ngx-facebook)
[](https://www.npmjs.com/package/ngx-facebook)
## Installation
#### 1. Install via NPM:
```shell
npm i -S ngx-facebook
```
#### 2. Add the Facebook JavaScript SDK to your index.html
```html
```
#### 3. Import `FacebookModule` into your app's root module
```typescript
import { FacebookModule } from 'ngx-facebook';
@NgModule({
...
imports: [
FacebookModule.forRoot()
],
...
})
export class AppModule { }
```
#### 4. Inject `FacebookService` and call the `init` method (optional):
This method must be called before using [`login`](https://zyra.github.io/ngx-facebook/facebook-service/#login) or [`api`](https://zyra.github.io/ngx-facebook/facebook-service/#api) methods. It is not required for other methods/components.
```typescript
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);
}
}
```
## Documentation
You can view complete and detailed documentation by visiting https://zyra.github.io/ngx-facebook/.
## Example Usage
You can view our [example project here](https://zyra.github.io/ngx-facebook-example/) and/or view its [source code here](https://github.com/zyra/ngx-facebook-example/)
### Example of login with Facebook
```typescript
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));
}
}
```
### Example of sharing on Facebook
```typescript
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));
}
```
### Example of adding a Facebook like button
```html
```
### Example of playing a Facebook video
#### Basic video component usage:
```html
```
#### Advanced video component usage:
```html
```
```typescript
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');
}
}
```
## Versioning
We use [SemVer](https://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/zyra/ngx-facebook/tags).
## Contribution
- **Having an issue**? or looking for support? [Open an issue](https://github.com/zyra/ngx-facebook/issues/new) and we will get you the help you need.
- Got a **new feature or a bug fix**? Fork the repository, make your changes, and submit a pull request.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Support this project
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: