{"id":15018469,"url":"https://github.com/nativescript/nativescript-facebook","last_synced_at":"2025-03-17T14:14:15.512Z","repository":{"id":18651090,"uuid":"84842095","full_name":"NativeScript/nativescript-facebook","owner":"NativeScript","description":"NativeScript plugin, wrapper of native Facebook SDK for Android and iOS","archived":false,"fork":false,"pushed_at":"2022-12-07T02:14:44.000Z","size":3902,"stargazers_count":79,"open_issues_count":23,"forks_count":50,"subscribers_count":33,"default_branch":"master","last_synced_at":"2024-10-29T15:51:53.619Z","etag":null,"topics":["facebook","facebook-sdk","login","logout","nativescript","nativescript-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NativeScript.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-13T15:21:48.000Z","updated_at":"2024-05-30T15:46:01.000Z","dependencies_parsed_at":"2023-01-13T19:56:34.018Z","dependency_job_id":null,"html_url":"https://github.com/NativeScript/nativescript-facebook","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-facebook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-facebook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-facebook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NativeScript%2Fnativescript-facebook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NativeScript","download_url":"https://codeload.github.com/NativeScript/nativescript-facebook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244047646,"owners_count":20389206,"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":["facebook","facebook-sdk","login","logout","nativescript","nativescript-plugin"],"created_at":"2024-09-24T19:52:00.281Z","updated_at":"2025-03-17T14:14:15.475Z","avatar_url":"https://github.com/NativeScript.png","language":"TypeScript","readme":"NativeScript : Facebook SDK ![apple](https://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-32.png) ![android](https://cdn4.iconfinder.com/data/icons/logos-3/228/android-32.png)\n =======\n[![npm](https://img.shields.io/npm/v/nativescript-facebook.svg)](https://www.npmjs.com/package/nativescript-facebook)\n[![npm](https://img.shields.io/npm/dm/nativescript-facebook.svg)](https://www.npmjs.com/package/nativescript-facebook)\n[![Build Status](https://travis-ci.org/NativeScript/nativescript-facebook.svg?branch=master)](https://travis-ci.org/NativeScript/nativescript-facebook)\n-------\n\n[NativeScript](https://www.nativescript.org) plugin, wrapper of native [Facebook SDK](https://developers.facebook.com) for Android and iOS.\n\n![demo](https://github.com/nativescript-space/nativescript-facebook/blob/assets/demo.gif?raw=true)\n\n\u003c!-- TOC depthFrom:2 --\u003e\n\n- [Features](#features)\n- [Installation](#installation)\n- [Configuration](#configuration)\n    - [Android](#android)\n    - [iOS](#ios)\n- [NativeScript Core](#nativescript-core)\n    - [Initialization](#initialization)\n    - [Login](#login)\n        - [Facebook Login Button](#facebook-login-button)\n        - [Custom Login Button](#custom-login-button)\n    - [Log out](#log-out)\n        - [Facebook Logout Button](#facebook-logout-button)\n        - [Custom Logout Button](#custom-logout-button)\n    - [Share](#share)\n        - [Create Sharing Content](#create-sharing-content)\n        - [Facebook Share Button](#facebook-share-button)\n        - [Facebook Send Button](#facebook-send-button)\n        - [Show Share Dialog Programmatically](#show-dialog-programmatically)\n        - [Hide Custom Button If Can't share](#hide-custom-button)\n- [NativeScript Angular](#nativescript-angular)\n    - [Initialization](#initialization-1)\n    - [Login](#login-1)\n        - [Facebook Login Button](#facebook-login-button-1)\n        - [Custom Login Button](#custom-login-button-1)\n    - [Logout](#logout)\n        - [Facebook Logout Button](#facebook-logout-button-1)\n        - [Custom Logout Button](#custom-logout-button-1)\n    - [Share](#share-1)\n        - [Create Sharing Content](#create-sharing-content-1)\n        - [Facebook Share Button](#facebook-share-button-1)\n        - [Facebook Send Button](#facebook-send-button-1)\n        - [Show Share Dialog Programmatically](#show-dialog-programmatically-1)\n        - [Hide Custom Button If Can't share](#hide-custom-button-1)\n- [Login Response](#login-response)\n- [Get Current Access Token](#get-current-access-token)\n- [Basic Analytics](#basic-analytics)\n- [Deep Linking](#deep-linking)\n- [Deferred Deep Linking](#deferred-deep-linking)\n- [Graph API Example](#graph-api-example)\n- [Release notes](#release-notes)\n- [FAQ](#faq)\n- [Contribute](#contribute)\n- [Get Help](#get-help)\n\n\u003c!-- /TOC --\u003e\n\n## Features\n- [x] Login \u0026 Logout\n- [x] Share\n- [ ] Graph API\n- [x] Basic Analytics\n- [x] Deep Linking\n- [x] Deferred Deep Linking\n\n\n## Installation\n```\ntns plugin add nativescript-facebook\n```\n\n## Configuration\n### Android\nUpdate AndroidManifest.xml (app/App_Resources/Android/AndroidManifest.xml) to put `provider` under `\u003capplication\u003e`  \n`{facebook_app_id}` is your app id\n\n```xml\n\u003cprovider android:authorities=\"com.facebook.app.FacebookContentProvider{facebook_app_id}\"\n\t\t\t\t  android:name=\"com.facebook.FacebookContentProvider\"\n\t\t\t\t  android:exported=\"true\"/\u003e\n```\n### iOS\nUpdate Info.plist file (app/App_Resources/iOS/Info.plist) to contains `CFBundleURLTypes` and `LSApplicationQueriesSchemes` like below:\n```xml\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003c!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\"\u003e\n\u003cplist version=\"1.0\"\u003e\n    \u003cdict\u003e\n    ...\n\n        \u003ckey\u003eCFBundleURLTypes\u003c/key\u003e\n        \u003carray\u003e\n            \u003cdict\u003e\n                \u003ckey\u003eCFBundleURLSchemes\u003c/key\u003e\n                \u003carray\u003e\n                    \u003cstring\u003efb{facebook_app_id}\u003c/string\u003e\n                \u003c/array\u003e\n            \u003c/dict\u003e\n        \u003c/array\u003e\n\t\t\u003ckey\u003eLSApplicationQueriesSchemes\u003c/key\u003e\n        \u003carray\u003e\n            \u003cstring\u003efbapi\u003c/string\u003e\n            \u003cstring\u003efb-messenger-share-api\u003c/string\u003e\n            \u003cstring\u003efbauth2\u003c/string\u003e\n            \u003cstring\u003efbshareextension\u003c/string\u003e\n        \u003c/array\u003e\n    \u003c/dict\u003e\n\u003c/plist\u003e\n```\n\u003eMake sure you replaced {facebook_app_id} with your Facebook App Id. More info regarding how to obtain a Facebook App Id can be found [here](https://developers.facebook.com/docs/apps/register).\n\n# Usage\n## NativeScript Core\n### Initialization \nCall init of nativescript-facebook module on application launch.\n\n[app.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/app.ts)\n```TypeScript\nimport * as application from 'application';\nimport { init } from \"nativescript-facebook\";\n\napplication.on(application.launchEvent, function (args) {\n    init(\"{facebook_app_id}\");\n});\n\napplication.start({ moduleName: \"login-page\" });\n```\n\n### Login\n#### Facebook Login Button\nAdd Facebook login button as simple as adding a Facebook:LoginButton tag in your view. Then you can define `login` event handler name. In the example below - `onLogin`.\n\n[login-page.xml](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/login-page.xml)\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n      xmlns:Facebook=\"nativescript-facebook\"\n  loaded=\"pageLoaded\" class=\"page\"\u003e\n\n    ...\n\n    \u003cFacebook:LoginButton login=\"{{ onLogin }}\"\u003e\u003c/Facebook:LoginButton\u003e\n\n    ...\n\n\u003c/Page\u003e \n```\n\nImplement `onLogin` event handler in your view-model. It receives an argument from type `LoginEventData`. Currently `LoginEventData` object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.\n\n[login-view-model.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/login-view-model.ts)\n```TypeScript\nimport { Observable } from 'data/observable';\nimport { Facebook:LoginButton } from \"nativescript-facebook\";\n\nexport class LoginViewModel extends Observable {\n\n  onLogin(eventData: LoginEventData) {\n    if (eventData.error) {\n      alert(\"Error during login: \" + eventData.error.message);\n    } else {\n      console.log(eventData.loginResponse.token);\n    }\n  }\n}\n```\n\n#### Custom Login Button\nAdd a button and define a `tap` event handler in your login view. \n\n[login-page.xml](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/login-page.xml)\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n      xmlns:Facebook=\"nativescript-facebook\"\n  loaded=\"pageLoaded\" class=\"page\"\u003e\n\n    ...\n\n    \u003cButton tap=\"{{ login }}\" text=\"Log in (custom)\"\u003e\u003c/Button\u003e\n\n    ...\n\n\u003c/Page\u003e \n```\n\nIn the view model implement the tap event handler in this case `login` method. It just has to call the login method that comes from the plugin. In the example below the login method from the plugin is imported as fbLogin.\n\n\u003e **BEST PRACTICE**: \nImport only the methods that you need instead of the entire file. It is crucial when you bundle your app with webpack.\n\n[login-view-model.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/login-view-model.ts)\n```TypeScript\nimport { Observable } from 'data/observable';\nimport { login as fbLogin } from \"nativescript-facebook\";\n\nexport class LoginViewModel extends Observable {\n\n  login() {\n    fbLogin((err, fbData) =\u003e {\n      if (err) {\n        alert(\"Error during login: \" + err.message);\n      } else {\n        console.log(fbData.token);\n      }\n    });\n  }\n\n}\n```\n\n### Log out\n#### Facebook Logout Button\n\nAdd Facebook logout button as simple as adding a Facebook:LoginButton tag in your view. Then you can define `logout` event handler name. In the example below - `onLogout`.\n\n[home-page.xml](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/home-page.xml)\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n      xmlns:Facebook=\"nativescript-facebook\"\n  loaded=\"pageLoaded\" class=\"page\"\u003e\n\n    ...\n\n    \u003cFacebook:LoginButton logout=\"{{ onLogout }}\"\u003e\u003c/Facebook:LoginButton\u003e\n\n    ...\n\n\u003c/Page\u003e \n```\n\nImplement `onLogout` event handler in your view-model.\n\n[home-view-model.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/home-view-model.ts)\n```TypeScript\nimport { Observable } from 'data/observable';\n\nexport class HomeViewModel extends Observable {\n\n  onLogout() {\n    console.log(\"logged out\");\n  }\n\n}\n```\n\n#### Custom Logout Button\n\nAdd a button and define a `tap` event handler in your view. In this case - `logout`\n\n[home-page.xml](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/home-page.xml)\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n      xmlns:Facebook=\"nativescript-facebook\"\n  loaded=\"pageLoaded\" class=\"page\"\u003e\n\n    ...\n\n    \u003cButton tap=\"{{ logout }}\" text=\"Log out (custom)\"\u003e\u003c/Button\u003e\n\n    ...\n\n\u003c/Page\u003e \n```\n\nIn the view model implement the tap event handler in this case `logout` method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.\n\n[home-view-model.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/home-view-model.ts)\n```TypeScript\nimport { Observable } from 'data/observable';\nimport { logout as fbLogout } from \"nativescript-facebook\";\n\nexport class LoginViewModel extends Observable {\n\n  logout() {\n    fbLogout(() =\u003e {\n      console.log(\"logged out\");\n    });\n  }\n\n}\n```\n\n### Share\n### Create Sharing Content\nFor sharing, you have to create sharing content first. \nCurrently the available content types are: \n- **createShareLinksContent(link: string, quote?: string, addition?: ShareAdditionContent)** available for every condition \n- **createSharePhotosContent(images: ImageSource[] | string[], userGenerated: boolean, addition?: ShareAdditionContent)** available for ShareButton and `showShareDialog` ( only when user have native Facebook installed, version 7.0 or higher )\n- **createShareMessageGenericTemplateContent(contentConfig: MessageGenericTemplateContent)**  available for SendButton and `showMessageDialog`\n- **createShareMessageMediaTemplateContent(contentConfig: MessageMediaTemplateContent)**  available for SendButton and `showMessageDialog`\n\nYou can see more information from [https://developers.facebook.com/docs/sharing/overview#content](https://developers.facebook.com/docs/sharing/overview#content) and [https://developers.facebook.com/docs/sharing/messenger#share-types](https://developers.facebook.com/docs/sharing/messenger#share-types)\n```TypeScript\nimport {\n    LoginEventData,\n    getCurrentAccessToken,\n    createShareLinksContent,\n    createSharePhotosContent,\n    createShareMessageGenericTemplateContent,\n    MessageGenericTemplateImageAspectRatio,\n    showShareDialog,\n    showMessageDialog,\n    canShareDialogShow,\n    canMessageDialogShow\n} from 'nativescript-facebook';\n\nconst linkContent = createShareLinksContent('https://www.nativescript.org',\n            'Create Native iOS and Android Apps With JavaScript',\n            {\n                hashtag: '#Nativescript'\n            });\n\n// you can also pass in imageUrls as string[] in here\nconst logoImage = fromResource('logo');\nconst photosContent = createSharePhotosContent([logoImage], false, {\n              hashtag: '#Nativescript'\n          });\nconst GenericTemplate = createShareMessageGenericTemplateContent({\n            element: {\n                title: 'Nativescript',\n                subtitle: 'Create Native iOS and Android Apps With JavaScript',\n                imageUrl: 'https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/how-it-works-min.png',\n                button: {\n                    title: 'Check Doc',\n                    url: 'https://docs.nativescript.org'\n                },\n                defaultAction: {\n                    title: 'Go HomePage',\n                    url: 'https://www.nativescript.org'\n                }\n            },\n            // it seems android have to provide a pageId, otherwise the MessageDialog just wont show\n            pageID: 'testestsett',\n            imageAspectRatio: MessageGenericTemplateImageAspectRatio.Horizontal\n        });\n\n```\n\n### Facebook Share Button\n```xml\n\u003cFacebook:ShareButton content=\"{{ linkContent }}\"\u003e\u003c/Facebook:ShareButton\u003e\n```\n\n### Facebook Send Button\n\nIf the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.\n \n```xml\n\u003cFacebook:SendButton content=\"{{ genericContent }}\"\u003e\u003c/Facebook:SendButton\u003e\n```\n\n### Show Share Dialog Programmatically\n\n**Note** The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)\n\n```TypeScript\nshowShareDialog(this.linkContent);\nshowMessageDialog(this.linkContent);\nshowShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) =\u003e {\n    if(!error){\n        console.log(result.android); // com.facebook.share.Sharer.Result\n        console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.\n    }\n});\n```\n\n### Hide Custom Button If Can't share\n\nYou can use this method to check if the content can be shared and hide the custom button if can't\n\n```TypeScript\npublic canShowPhotosShareDialog = canShareDialogShow(this.photosContent);\npublic canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);\n```\n```xml\n\u003cButton tap=\"{{ onShareDialogPhotos }}\" text=\"Open Share dialog (photos)\" visibility=\"{{ canShowPhotosShareDialog ? 'visible' : 'collapsed' }}\"\u003e\u003c/Button\u003e\n\u003cButton tap=\"{{ onSendGenericDialog }}\" text=\"Share Message Generic Template\" visibility=\"{{ canShowGenericMessageDialog ? 'visible' : 'collapsed' }}\"\u003e\u003c/Button\u003e\n```\n\n## NativeScript Angular\n### Initialization\nCall init of nativescript-facebook module on application launch.\n\n[app.module.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/app.module.ts)\n```TypeScript\n...\nimport * as application from 'application';\nimport { NativeScriptModule } from \"nativescript-angular/nativescript.module\";\nimport { NativeScriptFacebookModule } from \"nativescript-facebook/angular\";\n\nlet nsFacebook = require('nativescript-facebook');\n\napplication.on(application.launchEvent, function (args) {\n    nsFacebook.init(\"{facebook_app_id}\");\n});\n...\n@NgModule({\n    ...\n    imports: [\n        AppRoutingModule,\n        NativeScriptModule,\n        NativeScriptFacebookModule,\n        ...\n    ],\n    ...\n})\n...\n```\n\n### Login\n#### Facebook Login Button\n\nAdd Facebook login button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define `login` event handler name. In the example below - `onLogin`. Bare in mind the $event argument.\n\n[pages/login/login.component.html](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/pages/login/login.component.html)\n```html\n\u003cStackLayout\u003e\n    \u003cFacebookLoginButton (login)=\"onLogin($event)\"\u003e\u003c/FacebookLoginButton\u003e\n\u003c/StackLayout\u003e\n```\n\nImplement `onLogin` event handler in your component. It receives an argument from type `LoginEventData`. Currently `LoginEventData` object has 2 properties: error and loginResponse. loginResponse is an object that consists of 1 property - token that keeps the facebook access token which will be used for further authentications. Ideally we can add some other properties here in the future such as Facebook user id.\n\n[pages/login/login.component.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/pages/login/login.component.ts)\n```TypeScript\nimport { Component } from \"@angular/core\";\nimport * as Facebook from \"nativescript-facebook\";\n\n@Component({\n    selector: \"login\",\n    templateUrl: \"login.component.html\",\n})\nexport class LoginComponent { \n    onLogin(eventData: Facebook.LoginEventData) {\n        if (eventData.error) {\n            alert(\"Error during login: \" + eventData.error);\n        } else {\n            console.log(eventData.loginResponse.token);\n        }\n    }\n}\n```\n\n#### Custom Login Button\n\nAdd a button and define a `tap` event handler in your login component html.\n\n[pages/login/login.component.html](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/pages/login/login.component.html)\n```html\n\u003cStackLayout\u003e\n    \u003cButton text=\"Login Button (custom)\" (tap)=\"login()\"\u003e\u003c/Button\u003e\n\u003c/StackLayout\u003e\n```\n\nIn the component implement the tap event handler in this case `login` method. It just has to call the login method that comes from the plugin.\n\n[pages/login/login.component.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/pages/login/login.component.ts)\n```TypeScript\nimport { Component } from \"@angular/core\";\nimport * as Facebook from \"nativescript-facebook\";\n\n@Component({\n    selector: \"login\",\n    templateUrl: \"login.component.html\",\n})\nexport class LoginComponent { \n    login() {\n        Facebook.login((error, fbData) =\u003e {\n            if (error) {\n                alert(\"Error during login: \" + error.message);\n            } else {\n                console.log(fbData.token);\n            }\n        });\n    }\n}\n```\n\n\n### Logout\n#### Facebook Logout Button\n\nAdd Facebook logout button as simple as adding a Facebook:LoginButton tag in your component html file. Then you can define `logout` event handler name. In the example below - `onLogout`. Bare in mind the $event argument.\n\n[pages/home/home.component.html](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/pages/home/home.component.html)\n```html\n\u003cStackLayout\u003e\n    \u003cFacebookLoginButton (logout)=\"onLogout($event)\"\u003e\u003c/FacebookLoginButton\u003e\n\u003c/StackLayout\u003e\n```\n\nImplement `onLogout` event handler.\n\n[pages/home/home.component.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/pages/home/home.component.ts)\n```TypeScript\nimport { Component } from \"@angular/core\";\nimport * as Facebook from \"nativescript-facebook\";\n\n@Component({\n    selector: \"home\",\n    templateUrl: \"home.component.html\",\n})\nexport class HomeComponent { \n    onLogout(eventData: Facebook.LoginEventData) {\n        if (eventData.error) {\n            alert(\"Error during login: \" + eventData.error);\n        } else {\n            console.log(\"logged out\");\n        }\n    }\n}\n```\n\n#### Custom Logout Button\n\nAdd a button and define a `tap` event handler in your view. In this case - `logout`\n\n[pages/home/home.component.html](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/pages/home/home.component.html)\n```html\n\u003cStackLayout\u003e\n    \u003cButton text=\"Log out (custom)\" (tap)=\"logout()\"\u003e\u003c/Button\u003e\n\u003c/StackLayout\u003e\n```\n\nIn the component implement the tap event handler in this case `logout` method. It just has to call the logout method that comes from the plugin. In the example below the logout method from the plugin is imported as fbLogout.\n\n[pages/home/home.component.ts](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/pages/home/home.component.ts)\n```TypeScript\nimport { Component } from \"@angular/core\";\nimport { logout as fbLogout } from \"nativescript-facebook\";\n\n@Component({\n    selector: \"home\",\n    templateUrl: \"home.component.html\",\n})\nexport class AppComponent { \n  logout() {\n    fbLogout(() =\u003e {\n      console.log(\"logged out\");\n    });\n  }\n}\n```\n\n\n### Share\n### Create Sharing Content\nRead Nativescript [chapter](#create-sharing-content) for this\n\n### Facebook Share Button\n```html\n\u003cFacebookShareButton [content] = \"linkContent\"\u003e\u003c/FacebookShareButton\u003e\n```\n\n### Facebook Send Button\n\nIf the Messenger app is not installed, the Send button will be hidden. Be sure that your app layout is appropriate when this button is hidden.\n \n```html\n\u003cFacebookSendButton [content] = \"genericContent\"\u003e\u003c/FacebookSendButton\u003e\n```\n\n### Show Share Dialog Programmatically\n\n**Note** The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)\n\n```TypeScript\nshowShareDialog(this.linkContent);\nshowMessageDialog(this.linkContent);\nshowShareDialog(this.linkContent, (error:Error, result:ShareCallbackResult) =\u003e {\n    if(!error){\n        console.log(result.android); // com.facebook.share.Sharer.Result\n        console.log(result.ios); // (NSDictionary * ) The results from the sharer. This may be nil or empty.\n    }\n});\n```\n\n### Hide Custom Button If Can't share\n\nYou can use this method to check if the content can be shared and hide the custom button if can't\n\n```TypeScript\npublic canShowPhotosShareDialog = canShareDialogShow(this.photosContent);\npublic canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);\n```\n```html\n\u003cButton (tap) = \"onShareDialogPhotos()\" text = \"Open Share dialog (photos)\" *ngIf = \"canShowPhotosShareDialog\"\u003e\u003c/Button\u003e\n\u003cButton (tap) = \"onSendGenericDialog()\" text = \"Share Message Generic Template\" *ngIf = \"canShowGenericMessageDialog\"\u003e\u003c/Button\u003e\n```\n\n## Login Response\nThe callback that have to be provided to Facebook.login method receives 2 arguments: error and login response object. Login response object has the following structure:\n\n| Property        | Description  \n| ------------- |:-------------| \n| token         | access token which will be used for further authentications      |  \n\n\n## Get Current Access Token\nThe plugin allows to get the current access token, if any, via getCurrentAccessToken() method.\n\n## Basic Analytics\nThe plugin allows to log analytics events. At the initialization of the application you need to init analytics:\n\n```Typescript\napplication.on(application.launchEvent, function (args) {\n    nsFacebook.init(\"{facebook_app_id}\");\n    nsFacebook.initAnalytics();\n});\n```\n\nEvents logging:\n\n```Typescript\nnsFacebook.logEvent('Lead');\n```\n\nLogging event with parameters:\n\n```Typescript\nconst value = 5;\nconst parameters = [{\n    key: 'value',\n    value: value.toString(),\n}];\n\nnsFacebook.logEvent(FundsAdded, parameters);\n```\n\nEvents logging:\n\n```Typescript\nnsFacebook.logEvent('Lead');\n```\n\nLogging event with parameters:\n\n```Typescript\nconst value = 5;\nconst parameters = [{\n    key: 'value',\n    value: value.toString(),\n}];\n\nnsFacebook.logEvent(FundsAdded, parameters);\n```\n## Deep Linking\nThe plugin supports Deep Linking. You must register the callback before the application is started:\n\nIn your main.ts file call this before the app is initialized. Note: This must be done outside of the application.on(), and only done once;\n\n```Typescript\nnsFacebook.registerDeepLinkCallback((application, url, options) =\u003e {\n  //Use the url;\n});\n```\n\n## Deferred Deep Linking\nThe plugin has basic support for Deferred Deep Linking. At the initialization of the application you need to init deep linking:\n\nNote: The initDeepLinking() is only required if you aren't using init().\n\n```Typescript\napplication.on(application.launchEvent, function (args) {\n    nsFacebook.initDeepLinking(\"{facebook_app_id}\");\n    nsFacebook.fetchDeferredAppLink().then(deepLink =\u003e {\n\n    }).catch(error =\u003e {\n    })\n});\n```\nThe fetchDeferredAppLink() returns a promise with a value of DeepLink defined below.\n```Typescript\n{\n    target: string;\n    ref: string;\n    promoCode: string;\n}\n```\n\n## Graph API Example\nOnce the Facebook access token is retrieved you can execute Graph API requests. In the example below after successful login, the access token is stored in application settings. And then on the home view it is retrieved and 2 Graph API calls are executed.\n1. Get Facebook id of the logged in user\n2. Get the logged in user avatar (this is kind of workaround of this NativeScript issue. [#2176](https://github.com/NativeScript/NativeScript/issues/2176))\n\n```TypeScript\nexport class HomeComponent {\n    accessToken: string = appSettings.getString(\"access_token\");\n    userId: string;\n    username: string;\n    avatarUrl: string;\n\n    constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {\n        // Get logged in user's info\n        http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/me?access_token=\" + this.accessToken).then((res) =\u003e {\n            this.username = res.name;\n            this.userId = res.id;\n\n            // Get logged in user's avatar\n            // ref: https://github.com/NativeScript/NativeScript/issues/2176\n            http.getJSON(config.FACEBOOK_GRAPH_API_URL + \"/\" + this.userId + \"/picture?type=large\u0026redirect=false\u0026access_token=\" + this.accessToken).then((res) =\u003e {\n                this.avatarUrl = res.data.url;\n                this.ref.detectChanges();\n            }, function (err) {\n                alert(\"Error getting user info: \" + err);\n            });\n        }, function (err) {\n            alert(\"Error getting user info: \" + err);\n        });\n    }\n```\n\nThis sample is part of the demo apps and can be observed [here](https://github.com/NativeScript/nativescript-facebook/blob/master/demo/app/home-view-model.ts) for Nativescript Code and [here](https://github.com/NativeScript/nativescript-facebook/blob/master/demo-angular/app/pages/home/home.component.ts) for NativeScript + Angular.\n\n\n## Release notes\n\nCheck out release notes [here](https://github.com/NativeScript/nativescript-facebook/releases)\n\n## FAQ\nCheck out our FAQ section [here](https://github.com/NativeScript/nativescript-facebook/wiki/FAQ).\n\n## Contribute\nWe love PRs! Check out the [contributing guidelines](CONTRIBUTING.md). If you want to contribute, but you are not sure where to start - look for [issues labeled `help wanted`](https://github.com/NativeScript/nativescript-facebook/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).\n\n  \n## Get Help \nPlease, use [github issues](https://github.com/NativeScript/nativescript-facebook/issues) strictly for [reporting bugs](CONTRIBUTING.md#reporting-bugs) or [requesting features](CONTRIBUTING.md#requesting-new-features). For general questions and support, check out [Stack Overflow](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [NativeScript community Slack channel](http://developer.telerik.com/wp-login.php?action=slack-invitation).\n  \n![](https://ga-beacon.appspot.com/UA-111455-24/nativescript/nativescript-facebook?pixel) \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-facebook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript%2Fnativescript-facebook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript%2Fnativescript-facebook/lists"}