{"id":20731075,"url":"https://github.com/greg-md/ng-facebook","last_synced_at":"2025-04-23T22:05:13.919Z","repository":{"id":57114265,"uuid":"75297983","full_name":"greg-md/ng-facebook","owner":"greg-md","description":"Using Facebook SDK with Angular.","archived":false,"fork":false,"pushed_at":"2018-05-31T21:38:39.000Z","size":167,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-23T22:05:03.512Z","etag":null,"topics":["angular","facebook","facebook-sdk","fb","greg-js","greg-md","javascript","js","ng","ng-facebook","sdk","ts","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greg-md.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-01T14:02:37.000Z","updated_at":"2022-09-13T14:06:51.000Z","dependencies_parsed_at":"2022-08-22T10:11:00.608Z","dependency_job_id":null,"html_url":"https://github.com/greg-md/ng-facebook","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-facebook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-facebook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-facebook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greg-md%2Fng-facebook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greg-md","download_url":"https://codeload.github.com/greg-md/ng-facebook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250522300,"owners_count":21444511,"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":["angular","facebook","facebook-sdk","fb","greg-js","greg-md","javascript","js","ng","ng-facebook","sdk","ts","typescript"],"created_at":"2024-11-17T05:13:38.348Z","updated_at":"2025-04-23T22:05:13.594Z","avatar_url":"https://github.com/greg-md.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ng Facebook\n\n[![npm version](https://badge.fury.io/js/%40greg-md%2Fng-facebook.svg)](https://badge.fury.io/js/%40greg-md%2Fng-facebook)\n[![Build Status](https://travis-ci.org/greg-md/ng-facebook.svg?branch=master)](https://travis-ci.org/greg-md/ng-facebook)\n\nUsing Facebook SDK with Angular.\n\n# Table of Contents:\n\n* [Features](#features)\n* [Installation](#installation)\n* [How It Works](#how-it-works)\n* [Components](#components)\n    * [fb-page](#fb-page) - Page Plugin;\n    * [fb-like](#fb-like) - Like Button for the Web.\n* [Directives](#directives)\n    * [fbParse](#fbparse) - Parse facebook plugins.\n* [Facebook Service](#facebook-service)\n* [License](#license)\n* [Huuuge Quote](#huuuge-quote)\n\n# Features\n\n1. Multi-Language initialization support with changing languages in real time;\n2. Lazy loading Facebook plugins when they appears in viewport.\n\n# Installation\n\n```bash\nnpm install @greg-md/ng-facebook --save\n```\n\n# How It Works\n\n## Setting up in a module\n\n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\n// 1. Import Facebook module;\nimport { FacebookModule } from '@greg-md/ng-facebook';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    // 2. Register Facebook providers in root module;\n    FacebookModule.forRoot(),\n    \n    // 3. Import Facebook components for a specific module.\n    FacebookModule,\n  ],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Using in components/views\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { FacebookService } from '@greg-md/ng-facebook';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003ca tabindex=\"0\" (click)=\"changeLanguage('en_EN')\"\u003eEnglish\u003c/a\u003e\n    |\n    \u003ca tabindex=\"0\" (click)=\"changeLanguage('ro_RO')\"\u003eRomanian\u003c/a\u003e\n\n    \u003cfb-like href=\"http://greg.md\"\u003e\u003c/fb-like\u003e\n  `,\n})\nexport class AppComponent implements OnInit {\n  constructor(public facebook: FacebookService) { }\n\n  ngOnInit() {\n    this.facebook.init().subscribe();\n  }\n  \n  changeLanguage(newLanguage) {\n    this.facebook.init({}, newLanguage).subscribe();\n  }\n}\n```\n\n# Components\n\nAll components have next attributes:\n\n#### lazyLoad\n\nBy default plugins are loaded when Facebook SDK is initialized.\nIf you want plugins to be lazy loaded, use `lazyLoad` attribute.\nSetting `lazyLoad` to `200` causes image to load 200 pixels before it appears on viewport.\n\nYou can also define lazy loading threshold globally providing `FB_PARSE_LAZY_LOAD` token in module providers.\n\n```typescript\n{\n  provide: FB_PARSE_LAZY_LOAD,\n  useValue: 200,\n}\n```\n\n#### container\n\nYou can use also use `lazyLoad` attribute inside a scrolling container, such as div with scroll bar.\n\n_Example:_\n\n```html\n\u003cdiv #container\u003e\n  \u003cfb-page href=\"https://www.facebook.com/facebook\" [lazyLoad]=\"200\" [container]=\"container\"\u003e\u003c/fb-page\u003e\n\u003c/div\u003e\n```\n\n## fb-page\n\nPage Plugin.\n\n[Facebook Documentation](https://developers.facebook.com/docs/plugins/page-plugin).\n\n_Example:_\n\n```html\n\u003cfb-page href=\"https://www.facebook.com/facebook\"\u003eFacebook\u003c/fb-page\u003e\n```\n\n### Attributes\n\n#### href\n\nThe URL of the Facebook Page.\n\n#### width\n\nThe pixel width of the plugin. Min. is `180` \u0026 Max. is `500`.\n\nDefault: `340`.\n\n#### height\n\nThe pixel height of the plugin. Min. is `70`.\n\nDefault: `500`.\n\n#### tabs\n\nTabs to render i.e. `timeline`, `events`, `messages`.\nUse a comma-separated list to add multiple tabs, i.e. `timeline, events`.\n\nDefault: `timeline`.\n\n#### hideCover\n\nHide cover photo in the header.\n\nDefault `false`.\n\n#### showFacepile\n\nShow profile photos when friends like this.\n\nDefault `true`.\n\n#### hideCta\n\nHide the custom call to action button (if available).\n\nDefault `false`.\n\n#### smallHeader\n\nUse the small header instead.\n\nDefault `false`.\n\n#### adaptContainerWidth\n\nTry to fit inside the container width.\n\nDefault `true`.\n\n## fb-like\n\nA single click on the Like button will 'like' pieces of content on the web and share them on Facebook.\nYou can also display a Share button next to the Like button to let people add a personal message and customize who they share with.\n\n[Facebook Documentation](https://developers.facebook.com/docs/plugins/like-button).\n\n_Example:_\n\n```html\n\u003cfb-like href=\"http://greg.md\"\u003e\u003c/fb-like\u003e\n```\n\n### Attributes\n\n#### action\n\nThe verb to display on the button. Can be either `like` or `recommend`.\n\nDefault: `like`.\n\n#### colorscheme\n\nThe color scheme used by the plugin for any text outside of the button itself. Can be `light` or `dark`.\n\nDefault: `light`.\n\n#### href\n\nThe absolute URL of the page that will be liked.\n\n#### kidDirectedSite\n\nIf your web site or online service, or a portion of your service,\nis directed to children under 13 [you must enable this](https://developers.facebook.com/docs/plugins/restrictions/).\n\nDefault: `false`.\n\n#### layout\n\nSelects one of the different layouts that are available for the plugin.\nCan be one of `standard`, `button_count`, `button` or `box_count`.\n\n##### Layout Settings\n\n| Layout        | Default Sizes |\n| ------------- | ------------- |\n| standard      | Minimum width: 225 pixels.\u003cbr\u003eDefault width: 450 pixels.\u003cbr\u003eHeight: 35 pixels (without photos) or 80 pixels (with photos).  |\n| box_count     | Minimum width: 55 pixels.\u003cbr\u003eDefault width: 55 pixels.\u003cbr\u003eHeight: 65 pixels.  |\n| button_count  | Minimum width: 90 pixels.\u003cbr\u003eDefault width: 90 pixels.\u003cbr\u003eHeight: 20 pixels.  |\n| button        | Minimum width: 47 pixels.\u003cbr\u003eDefault width: 47 pixels.\u003cbr\u003eHeight: 20 pixels.  |\n\n#### ref\n\nA label for tracking referrals which must be less than 50 characters\nand can contain alphanumeric characters and some punctuation (currently +/=-.:_).\nSee the [FAQ](https://developers.facebook.com/docs/plugins/faqs#ref) for more details.\n\n#### share\n\nSpecifies whether to include a share button beside the Like button. This only works with the XFBML version.\n\nDefault: `false`.\n\n#### showFaces\n\nSpecifies whether to display profile photos below the button (standard layout only).\nYou must not enable this on [child-directed sites](https://developers.facebook.com/docs/plugins/restrictions/).\n\nDefault: `false`.\n\n### size\n\nThe button is offered in 2 sizes i.e. `large` and `small`.\n\nDefault: `small`.\n\n#### width\n\nThe width of the plugin (standard layout only),\nwhich is subject to the minimum and default width.\nPlease see [Layout Settings](#layout-settings) for more details.\n\n# Directives\n\nAll directives have next attributes:\n\n#### lazyLoad\n\nBy default plugins are loaded when Facebook SDK is initialized.\nIf you want plugins to be lazy loaded, use `lazyLoad` attribute.\nSetting `lazyLoad` to `200` causes image to load 200 pixels before it appears on viewport.\n\n#### container\n\nYou can use also use `lazyLoad` attribute inside a scrolling container, such as div with scroll bar.\n\n_Example:_\n\n```html\n\u003cdiv #container\u003e\n    \u003cdiv fbParse [lazyLoad]=\"200\" [container]=\"container\"\u003e\n      \u003cdiv class=\"fb-like\"\n        data-href=\"http://greg.md\"\n        data-layout=\"standard\"\n        data-action=\"like\"\n        data-size=\"small\"\n        data-showFaces=\"true\"\n        data-share=\"true\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## fbParse\n\nParse Facebook plugins from current container.\n\n_Example:_\n\n```html\n\u003cdiv fbParse\u003e\n  \u003cdiv class=\"fb-like\"\n    data-href=\"http://greg.md\"\n    data-layout=\"standard\"\n    data-action=\"like\"\n    data-size=\"small\"\n    data-showFaces=\"true\"\n    data-share=\"true\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n# Facebook Service\n\n`FacebookService` works directly with Facebook sdk.\n\n## Methods\n\nBelow is a list of **supported methods**:\n\n* [load](#load) - Load Facebook SDK;\n* [init](#init) - Load and initialize Facebook SDK;\n* [login](#login) - Login via Facebook;\n* [api](#api) - Facebook API;\n* [parse](#parse) - Parse Facebook plugins from a HTMLElement;\n* [reloadRenderedElements](#reloadRenderedElements) - Reload all rendered elements from DOM;\n\n## load\n\nLoad Facebook SDK.\n\n```typescript\nload(locale: string = 'en_US'): Observable\u003cFacebook\u003e\n```\n\n`lang` - Facebook SDK locale. See [Localization \u0026 Translation](https://developers.facebook.com/docs/internationalization).\n\n_Example:_\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\nimport { FacebookService } from '@greg-md/ng-facebook';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003cfb-page href=\"https://www.facebook.com/facebook\"\u003e\u003c/fb-page\u003e\n  `,\n})\nexport class AppComponent implements OnInit {\n  constructor(private facebookService: FacebookService) { }\n\n  ngOnInit() {\n    this.facebookService.load().subscribe(sdk =\u003e {\n      // do something\n    });\n  }\n}\n```\n\n## init\n\nLoad and initialize Facebook SDK.\n\nThis method extends the `load` method, by initializing the Facebook SDK in the meantime.\n\n```typescript\ninit(params: FacebookInitParams = {}, locale: string = 'en_US'): Observable\u003cFacebook\u003e\n```\n\n`params` - The same as [FB.init(params)](https://developers.facebook.com/docs/javascript/reference/FB.init/v2.8) parameters;  \n`lang` - Facebook SDK locale. See [Localization \u0026 Translation](https://developers.facebook.com/docs/internationalization).\n\n_Example:_\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\nimport { FacebookService } from '@greg-md/ng-facebook';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003cbutton type=\"button\" (click)=\"changeLocale()\"\u003eChange Locale\u003c/button\u003e\n    \n    \u003cfb-page href=\"https://www.facebook.com/facebook\"\u003e\u003c/fb-page\u003e\n  `,\n})\nexport class AppComponent implements OnInit {\n  settings = {\n    appId : '{your-app-id}',\n    version: 'v2.7',\n  };\n\n  constructor(private facebookService: FacebookService) { }\n\n  ngOnInit() {\n    this.facebookService.init(this.settings).subscribe();\n  }\n\n  changeLocale() {\n    return this.facebookService.init(this.settings, 'ro_RO').subscribe();\n  }\n}\n```\n\n## login\n\nFacebook Login.\n\n```typescript\nlogin(options?: FacebookLoginOptions): Observable\u003cFacebookAuth\u003e\n```\n\n_Example:_\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\nimport { FacebookService } from '@greg-md/ng-facebook';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003cbutton type=\"button\" (click)=\"loginViaFacebook()\"\u003eLogin via Facebook\u003c/button\u003e\n    \n    \u003cp *ngIf=\"userID\"\u003eUser ID: {{ userID }}\u003c/p\u003e\n  `,\n})\nexport class AppComponent implements OnInit {\n  settings = {\n    appId : '{your-app-id}',\n    version: 'v2.7',\n  };\n\n  userID: string;\n\n  constructor(private facebookService: FacebookService) { }\n\n  ngOnInit() {\n    this.facebookService.init(this.settings).subscribe();\n  }\n\n  loginViaFacebook() {\n    this.facebookService.login({scope: 'email'}).subscribe(auth =\u003e {\n      this.userID = auth.userID;\n    });\n  }\n}\n```\n\n## api\n\nFacebook API.\n\n```typescript\napi(path: string, method?: 'get' | 'post' | 'delete' | FacebookApiParamsArg, params?: FacebookApiParamsArg): Observable\u003cObject\u003e\n```\n\n_Example:_\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\nimport { FacebookService } from '@greg-md/ng-facebook';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003cbutton type=\"button\" (click)=\"getFacebookName()\"\u003eGet Facebook Name\u003c/button\u003e\n    \n    \u003cp *ngIf=\"name\"\u003eName: {{ name }}\u003c/p\u003e\n  `,\n})\nexport class AppComponent implements OnInit {\n  settings = {\n    appId : '{your-app-id}',\n    version: 'v2.7',\n  };\n\n  name: string;\n\n  constructor(private facebookService: FacebookService) { }\n\n  ngOnInit() {\n    this.facebookService.init(this.settings).subscribe();\n  }\n\n  getFacebookName() {\n    this.facebookService.api('/me').subscribe(me =\u003e {\n      this.name = me.name;\n    });\n  }\n}\n```\n\n## parse\n\nParse Facebook plugins from a HTMLElement.\n\n```typescript\nparse(element: HTMLElement): Observable\u003cHTMLElement\u003e\n```\n\n`element` - An HTMLElement.\n\n_Example:_\n\n```typescript\nimport { Component, OnInit, ElementRef } from '@angular/core';\n\nimport { FacebookService } from '@greg-md/ng-facebook';\n\n@Component({\n  selector: 'facebook-page',\n  template: `\n    \u003ch2\u003eWe on Facebook!\u003c/h2\u003e\n    \n    \u003cdiv class=\"fb-page\" \n      data-href=\"https://www.facebook.com/facebook\"\n      data-width=\"380\" \n      data-hideCover=\"false\"\n      data-showFacepile=\"false\" \n      data-show-posts=\"false\"\u003e\u003c/div\u003e\n  `,\n})\nexport class FacebookPageComponent implements OnInit {\n  constructor(private: elementRef: ElementRef, private facebookService: FacebookService) { }\n\n  ngOnInit() {\n    this.facebookService.parse(this.elementRef.nativeElement).subscribe();\n  }\n}\n```\n\n## reloadRenderedElements\n\nReload all Facebook rendered elements from DOM.\n\n```typescript\nreloadRenderedElements(): Observable\u003cHTMLElement\u003e\n```\n\n_Example:_\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\nimport { FacebookService } from '@greg-md/ng-facebook';\n\n@Component({\n  selector: 'app',\n  template: `\n    \u003cbutton type=\"button\" (click)=\"changeLocale()\"\u003eChange Locale\u003c/button\u003e\n    \n    \u003cfb-page href=\"https://www.facebook.com/facebook\"\u003e\u003c/fb-page\u003e\n  `,\n})\nexport class AppComponent implements OnInit {\n  constructor(private facebookService: FacebookService) { }\n\n  ngOnInit() {\n    this.facebookService.load().subscribe();\n  }\n\n  changeLocale() {\n    this.facebookService.load('ro_RO').subscribe(sdk =\u003e {\n      this.facebookService.reloadRenderedElements().subscribe();\n    });\n  }\n}\n```\n\n# License\n\nMIT © [Grigorii Duca](http://greg.md)\n\n# Huuuge Quote\n\n![I fear not the man who has practiced 10,000 programming languages once, but I fear the man who has practiced one programming language 10,000 times. #horrorsquad](http://greg.md/huuuge-quote-fb.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreg-md%2Fng-facebook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreg-md%2Fng-facebook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreg-md%2Fng-facebook/lists"}