Merge pull request #139 from NativeScript/gogoout-master

feat: share to facebook

Author: elena-p

README.md

@@ -24,6 +24,12 @@ NativeScript : Facebook SDK ![apple](https://cdn3.iconfinder.com/data/icons/pico
     - [Log out](#log-out)
         - [Facebook Logout Button](#facebook-logout-button)
         - [Custom Logout Button](#custom-logout-button)
+    - [Share](#share)
+        - [Create Sharing Content](#create-sharing-content)
+        - [Facebook Share Button](#facebook-share-button)
+        - [Facebook Send Button](#facebook-send-button)
+        - [Show Share Dialog Programmatically](#show-dialog-programmatically)
+        - [Hide Custom Button If Can't share](#hide-custom-button)
 - [NativeScript Angular](#nativescript-angular)
     - [Initialization](#initialization-1)
     - [Login](#login-1)
@@ -32,6 +38,12 @@ NativeScript : Facebook SDK ![apple](https://cdn3.iconfinder.com/data/icons/pico
     - [Logout](#logout)
         - [Facebook Logout Button](#facebook-logout-button-1)
         - [Custom Logout Button](#custom-logout-button-1)
+    - [Share](#share-1)
+        - [Create Sharing Content](#create-sharing-content-1)
+        - [Facebook Share Button](#facebook-share-button-1)
+        - [Facebook Send Button](#facebook-send-button-1)
+        - [Show Share Dialog Programmatically](#show-dialog-programmatically-1)
+        - [Hide Custom Button If Can't share](#hide-custom-button-1)
 - [Login Response](#login-response)
 - [Get Current Access Token](#get-current-access-token)
 - [Graph API Example](#graph-api-example)
@@ -44,7 +56,7 @@ NativeScript : Facebook SDK ![apple](https://cdn3.iconfinder.com/data/icons/pico
 
 ## Features
 - [x] Login & Logout
-- [ ] Share
+- [x] Share
 - [ ] Graph API
 
 
@@ -55,9 +67,16 @@ tns plugin add nativescript-facebook
 
 ## Configuration
 ### Android
-No additional configuration required!
+Update AndroidManifest.xml (app/App_Resources/Android/AndroidManifest.xml) to put `provider` under `<application>`  
+`{facebook_app_id}` is your app id
+
+```xml
+<provider android:authorities="com.facebook.app.FacebookContentProvider{facebook_app_id}"
+				  android:name="com.facebook.FacebookContentProvider"
+				  android:exported="true"/>
+```
 ### iOS
-Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains `CFBundleURLTypes` like below:
+Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains `CFBundleURLTypes` and `LSApplicationQueriesSchemes` like below:
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
@@ -74,7 +93,13 @@ Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains `CFBundleU
                 </array>
             </dict>
         </array>
-
+		<key>LSApplicationQueriesSchemes</key>
+        <array>
+            <string>fbapi</string>
+            <string>fb-messenger-share-api</string>
+            <string>fbauth2</string>
+            <string>fbshareextension</string>
+        </array>
     </dict>
 </plist>
 ```
@@ -250,6 +275,96 @@ export class LoginViewModel extends Observable {
 }
 ```
 
+### Share
+### Create Sharing Content
+For sharing, you have to create sharing content first. 
+Currently the available content types are: 
+- **createShareLinksContent(link: string, quote?: string, addition?: ShareAdditionContent)** available for every condition 
+- **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 )
+- **createShareMessageGenericTemplateContent(contentConfig: MessageGenericTemplateContent)**  available for SendButton and `showMessageDialog`
+- **createShareMessageMediaTemplateContent(contentConfig: MessageMediaTemplateContent)**  available for SendButton and `showMessageDialog`
+
+You 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)
+```TypeScript
+import {
+    LoginEventData,
+    getCurrentAccessToken,
+    createShareLinksContent,
+    createSharePhotosContent,
+    createShareMessageGenericTemplateContent,
+    MessageGenericTemplateImageAspectRatio,
+    showShareDialog,
+    showMessageDialog,
+    canShareDialogShow,
+    canMessageDialogShow
+} from 'nativescript-facebook';
+
+const linkContent = createShareLinksContent('https://www.nativescript.org',
+            'Create Native iOS and Android Apps With JavaScript',
+            {
+                hashtag: '#Nativescript'
+            });
+
+// you can also pass in imageUrls as string[] in here
+const logoImage = fromResource('logo');
+const photosContent = createSharePhotosContent([logoImage], false, {
+              hashtag: '#Nativescript'
+          });
+const GenericTemplate = createShareMessageGenericTemplateContent({
+            element: {
+                title: 'Nativescript',
+                subtitle: 'Create Native iOS and Android Apps With JavaScript',
+                imageUrl: 'https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/how-it-works-min.png',
+                button: {
+                    title: 'Check Doc',
+                    url: 'https://docs.nativescript.org'
+                },
+                defaultAction: {
+                    title: 'Go HomePage',
+                    url: 'https://www.nativescript.org'
+                }
+            },
+            // it seems android have to provide a pageId, otherwise the MessageDialog just wont show
+            pageID: 'testestsett',
+            imageAspectRatio: MessageGenericTemplateImageAspectRatio.Horizontal
+        });
+
+```
+
+### Facebook Share Button
+```xml
+<Facebook:ShareButton content="{{ linkContent }}"></Facebook:ShareButton>
+```
+
+### Facebook Send Button
+
+If 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.
+ 
+```xml
+<Facebook:SendButton content="{{ genericContent }}"></Facebook:SendButton>
+```
+
+### Show Share Dialog Programmatically
+
+**Note** The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)
+
+```TypeScript
+showShareDialog(this.linkContent);
+showMessageDialog(this.linkContent);
+```
+
+### Hide Custom Button If Can't share
+
+You can use this method to check if the content can be shared and hide the custom button if can't
+
+```TypeScript
+public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
+public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
+```
+```xml
+<Button tap="{{ onShareDialogPhotos }}" text="Open Share dialog (photos)" visibility="{{ canShowPhotosShareDialog ? 'visible' : 'collapsed' }}"></Button>
+<Button tap="{{ onSendGenericDialog }}" text="Share Message Generic Template" visibility="{{ canShowGenericMessageDialog ? 'visible' : 'collapsed' }}"></Button>
+```
 
 ## NativeScript Angular
 ### Initialization
@@ -417,6 +532,45 @@ export class AppComponent {
 ```
 
 
+### Share
+### Create Sharing Content
+Read Nativescript [chapter](#create-sharing-content) for this
+
+### Facebook Share Button
+```html
+<FacebookShareButton [content] = "linkContent"></FacebookShareButton>
+```
+
+### Facebook Send Button
+
+If 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.
+ 
+```html
+<FacebookSendButton [content] = "genericContent"></FacebookSendButton>
+```
+
+### Show Share Dialog Programmatically
+
+**Note** The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)
+
+```TypeScript
+showShareDialog(this.linkContent);
+showMessageDialog(this.linkContent);
+```
+
+### Hide Custom Button If Can't share
+
+You can use this method to check if the content can be shared and hide the custom button if can't
+
+```TypeScript
+public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
+public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
+```
+```html
+<Button (tap) = "onShareDialogPhotos()" text = "Open Share dialog (photos)" *ngIf = "canShowPhotosShareDialog"></Button>
+<Button (tap) = "onSendGenericDialog()" text = "Share Message Generic Template" *ngIf = "canShowGenericMessageDialog"></Button>
+```
+
 ## Login Response
 The 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:
 

demo-angular/app/App_Resources/Android/AndroidManifest.xml

@@ -39,5 +39,9 @@
 			</intent-filter>
 		</activity>
 		<activity android:name="com.tns.ErrorReportActivity"/>
+
+		<provider android:authorities="com.facebook.app.FacebookContentProvider1771472059772879"
+				  android:name="com.facebook.FacebookContentProvider"
+				  android:exported="true"/>
 	</application>
 </manifest>

demo-angular/app/App_Resources/iOS/Info.plist

@@ -52,5 +52,12 @@
 			</array>
 		</dict>
 	</array>
+	<key>LSApplicationQueriesSchemes</key>
+	<array>
+		<string>fbapi</string>
+		<string>fb-messenger-share-api</string>
+		<string>fbauth2</string>
+		<string>fbshareextension</string>
+	</array>
 </dict>
 </plist>

demo-angular/app/App_Resources/iOS/logo.png

@@ -1,6 +1,6 @@
-import { NgModule, NO_ERRORS_SCHEMA, NgModuleFactoryLoader } from "@angular/core";
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
-import { NativeScriptRouterModule, NSModuleFactoryLoader } from "nativescript-angular/router";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { AppComponent } from "./app.component";
 import { LoginModule } from "./pages/login/login.module";
 import { HomeModule } from "./pages/home/home.module";
@@ -23,8 +23,7 @@ application.on(application.launchEvent, function (args) {
         NativeScriptRouterModule.forRoot(routes)
     ],
     providers: [
-        NavigationService,
-        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
+        NavigationService
     ],
     declarations: [AppComponent],
     schemas: [NO_ERRORS_SCHEMA]

demo-angular/app/app.module.ts

@@ -1,5 +1,5 @@
 .login-buttons {
     margin-left: 30;
     margin-right: 30;
-    margin-top: 70%;
+    margin-top: 10;
 }

demo-angular/app/pages/login/login.component.css

@@ -2,4 +2,15 @@
     <FacebookLoginButton (login)="onLogin($event)"></FacebookLoginButton>
     <Button text="Continue with Facebook (custom)" (tap)="login()"></Button>
     <Button text="Get current access token" (tap)="getCurrentAccessToken()"></Button>
+
+    <FacebookShareButton [content] = "linkContent"></FacebookShareButton>
+    <FacebookSendButton [content] = "genericContent"></FacebookSendButton>
+    <Button (tap) = "onShareDialog()" text = "Open Share dialog (link)"
+            *ngIf = "canShowLinksShareDialog"></Button>
+    <Button (tap) = "onShareDialogPhotos()" text = "Open Share dialog (photos)"
+            *ngIf = "canShowPhotosShareDialog"></Button>
+    <Button (tap) = "onSendDialog()" text = "Open Message Share dialog"
+            *ngIf = "canShowLinksMessageDialog"></Button>
+    <Button (tap) = "onSendGenericDialog()" text = "Share Message Generic Template"
+            *ngIf = "canShowGenericMessageDialog"></Button>
 </StackLayout>

demo-angular/app/pages/login/login.component.html

@@ -2,6 +2,7 @@ import { Component, ChangeDetectorRef } from "@angular/core";
 import * as Facebook from "nativescript-facebook";
 import { NavigationService } from "../../services/navigation.service";
 import * as appSettings from "tns-core-modules/application-settings";
+import {fromResource} from 'tns-core-modules/image-source';
 
 @Component({
     selector: "login",
@@ -10,8 +11,29 @@ import * as appSettings from "tns-core-modules/application-settings";
     styleUrls: ["login.component.css"]
 })
 export class LoginComponent {
+    linkContent = null;
+    photosContent = null;
+    genericContent = null;
+    canShowLinksShareDialog = false;
+    canShowPhotosShareDialog = false;
+    canShowLinksMessageDialog = false;
+    canShowGenericMessageDialog = false;
 
     constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
+        // have to init after facebook sdk inited
+        setTimeout(() => {
+            this.init();
+        }, 100);
+    }
+
+    init() {
+        this.linkContent = this.generateLinksShareContent();
+        this.photosContent = this.generatePhotosShareContent();
+        this.genericContent = this.generateGenericTemplateContent();
+        this.canShowLinksShareDialog = Facebook.canShareDialogShow(this.linkContent);
+        this.canShowPhotosShareDialog = Facebook.canShareDialogShow(this.photosContent);
+        this.canShowLinksMessageDialog = Facebook.canMessageDialogShow(this.linkContent);
+        this.canShowGenericMessageDialog = Facebook.canMessageDialogShow(this.genericContent);
     }
 
     onLogin(eventData: Facebook.LoginEventData) {
@@ -34,9 +56,61 @@ export class LoginComponent {
         });
     }
 
-    public getCurrentAccessToken() {
+    getCurrentAccessToken() {
         let accessToken = Facebook.getCurrentAccessToken();
 
         alert("Current access token: " + JSON.stringify(accessToken, null, '\t'));
     }
+
+    generateLinksShareContent() {
+        return Facebook.createShareLinksContent('https://www.nativescript.org',
+            'Create Native iOS and Android Apps With JavaScript',
+            {
+                hashtag: '#Nativescript'
+            });
+    }
+
+    generatePhotosShareContent() {
+        const logoImage = fromResource('logo');
+        return Facebook.createSharePhotosContent([logoImage], false, {
+            hashtag: '#Nativescript'
+        });
+    }
+
+    generateGenericTemplateContent() {
+        return Facebook.createShareMessageGenericTemplateContent({
+            element: {
+                title: 'Nativescript',
+                subtitle: 'Create Native iOS and Android Apps With JavaScript',
+                imageUrl: 'https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/how-it-works-min.png',
+                button: {
+                    title: 'Check Doc',
+                    url: 'https://docs.nativescript.org'
+                },
+                defaultAction: {
+                    title: 'Go HomePage',
+                    url: 'https://www.nativescript.org'
+                }
+            },
+            // it seems android have to provide a pageId, otherwise the MessageDialog just wont show
+            pageID: 'testestsett',
+            imageAspectRatio: Facebook.MessageGenericTemplateImageAspectRatio.Horizontal
+        });
+    }
+
+    onShareDialog() {
+        Facebook.showShareDialog(this.linkContent);
+    }
+
+    onShareDialogPhotos() {
+        Facebook.showShareDialog(this.photosContent);
+    }
+
+    onSendDialog() {
+        Facebook.showMessageDialog(this.linkContent);
+    }
+
+    onSendGenericDialog() {
+        Facebook.showMessageDialog(this.genericContent);
+    }
 }

demo-angular/app/pages/login/login.component.ts

@@ -1,4 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { LoginComponent } from "./login.component";
 
@@ -13,6 +14,7 @@ export const routerConfig = [
 
 @NgModule({
     imports: [
+        NativeScriptCommonModule,
         NativeScriptRouterModule,
         NativeScriptRouterModule.forChild(routerConfig)
     ],