{"id":13697109,"url":"https://github.com/zyra/ngx-facebook","last_synced_at":"2025-12-12T03:46:41.169Z","repository":{"id":43299102,"uuid":"60044804","full_name":"zyra/ngx-facebook","owner":"zyra","description":"Angular TypeScript Wrapper for Facebook SDK","archived":false,"fork":false,"pushed_at":"2020-06-14T11:16:06.000Z","size":718,"stargazers_count":209,"open_issues_count":46,"forks_count":69,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T18:17:17.782Z","etag":null,"topics":["angular2","angular4","facebook-sdk","ionic2"],"latest_commit_sha":null,"homepage":"http://zyra.github.io/ngx-facebook/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zyra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-30T23:37:51.000Z","updated_at":"2024-06-07T03:16:09.000Z","dependencies_parsed_at":"2022-09-02T00:42:39.242Z","dependency_job_id":null,"html_url":"https://github.com/zyra/ngx-facebook","commit_stats":null,"previous_names":["ihadeed/ng2-facebook-sdk"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyra%2Fngx-facebook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyra%2Fngx-facebook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyra%2Fngx-facebook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyra%2Fngx-facebook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zyra","download_url":"https://codeload.github.com/zyra/ngx-facebook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234923,"owners_count":20905854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular2","angular4","facebook-sdk","ionic2"],"created_at":"2024-08-02T18:00:52.688Z","updated_at":"2025-12-12T03:46:41.134Z","avatar_url":"https://github.com/zyra.png","language":"TypeScript","funding_links":[],"categories":["API"],"sub_categories":["Picker"],"readme":"# ngx-facebook\n\nThis 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.\n\n[![npm](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/ngx-facebook)\n[![Build Status](https://drone.zyra.ca/api/badges/zyra/ngx-facebook/status.svg)](https://drone.zyra.ca/zyra/ngx-facebook)\n[![npm](https://img.shields.io/npm/dt/ngx-facebook.svg)](https://www.npmjs.com/package/ngx-facebook)\n[![npm](https://img.shields.io/npm/dm/ngx-facebook.svg)](https://www.npmjs.com/package/ngx-facebook)\n\n## Installation\n\n#### 1. Install via NPM:\n\n```shell\nnpm i -S ngx-facebook\n```\n\n#### 2. Add the Facebook JavaScript SDK to your index.html\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://connect.facebook.net/en_US/sdk.js\"\u003e\u003c/script\u003e\n```\n\n#### 3. Import `FacebookModule` into your app's root module\n\n```typescript\nimport { FacebookModule } from 'ngx-facebook';\n\n@NgModule({\n  ...\n  imports: [\n    FacebookModule.forRoot()\n  ],\n  ...\n})\nexport class AppModule { }\n```\n\n#### 4. Inject `FacebookService` and call the `init` method (optional):\n\nThis 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.\n\n```typescript\nimport { FacebookService, InitParams } from 'ngx-facebook';\n\n...\n\nexport class MyComponentOrService {\n\n  constructor(private fb: FacebookService) {\n\n    const initParams: InitParams = {\n      appId: '1234566778',\n      xfbml: true,\n      version: 'v2.8'\n    };\n\n    fb.init(initParams);\n\n  }\n\n}\n```\n\n## Documentation\n\nYou can view complete and detailed documentation by visiting https://zyra.github.io/ngx-facebook/.\n\n## Example Usage\n\nYou 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/)\n\n### Example of login with Facebook\n\n```typescript\nimport { FacebookService, LoginResponse } from 'ngx-facebook';\n\n@Component(...)\nexport class MyComponent {\n\n  constructor(private fb: FacebookService) { }\n\n  loginWithFacebook(): void {\n\n    this.fb.login()\n      .then((response: LoginResponse) =\u003e console.log(response))\n      .catch((error: any) =\u003e console.error(error));\n  }\n\n}\n```\n\n### Example of sharing on Facebook\n\n```typescript\nimport { FacebookService, UIParams, UIResponse } from 'ngx-facebook';\n\n...\n\nshare(url: string) {\n\n  const params: UIParams = {\n    href: 'https://github.com/zyra/ngx-facebook',\n    method: 'share'\n  };\n\n  this.fb.ui(params)\n    .then((res: UIResponse) =\u003e console.log(res))\n    .catch((e: any) =\u003e console.error(e));\n\n}\n```\n\n### Example of adding a Facebook like button\n\n```html\n\u003cfb-like href=\"https://github.com/zyra/ngx-facebook\"\u003e\u003c/fb-like\u003e\n```\n\n### Example of playing a Facebook video\n\n#### Basic video component usage:\n\n```html\n\u003cfb-video href=\"https://www.facebook.com/facebook/videos/10153231379946729/\"\u003e\u003c/fb-video\u003e\n```\n\n#### Advanced video component usage:\n\n```html\n\u003cfb-video href=\"https://www.facebook.com/facebook/videos/10153231379946729/\" (paused)=\"onVideoPaused($event)\"\u003e\u003c/fb-video\u003e\n```\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { FBVideoComponent } from 'ngx-facebook';\n\n@Component(...)\nexport class MyComponent {\n\n  @ViewChild(FBVideoComponent) video: FBVideoComponent;\n\n  ngAfterViewInit() {\n    this.video.play();\n    this.video.pause();\n    this.video.getVolume();\n  }\n\n  onVideoPaused(ev: any) {\n    console.log('User paused the video');\n  }\n\n}\n```\n\n## Versioning\n\nWe use [SemVer](https://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/zyra/ngx-facebook/tags).\n\n## Contribution\n\n- **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.\n- Got a **new feature or a bug fix**? Fork the repository, make your changes, and submit a pull request.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\n\n## Support this project\n\nIf 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:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzyra%2Fngx-facebook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzyra%2Fngx-facebook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzyra%2Fngx-facebook/lists"}