Skip to content

Commit d19dd5c

Browse files
gogooutgogoout
committed
update doc
1 parent 8dd8571 commit d19dd5c

1 file changed

Lines changed: 157 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 157 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ NativeScript : Facebook SDK ![apple](https://cdn3.iconfinder.com/data/icons/pico
2424
- [Log out](#log-out)
2525
- [Facebook Logout Button](#facebook-logout-button)
2626
- [Custom Logout Button](#custom-logout-button)
27+
- [Share](#share)
28+
- [Create Sharing Content](#create-sharing-content)
29+
- [Facebook Share Button](#facebook-share-button)
30+
- [Facebook Send Button](#facebook-send-button)
31+
- [Show Share Dialog Programmatically](#show-dialog-programmatically)
32+
- [Hide Custom Button If Can't share](#hide-custom-button)
2733
- [NativeScript Angular](#nativescript-angular)
2834
- [Initialization](#initialization-1)
2935
- [Login](#login-1)
@@ -32,6 +38,12 @@ NativeScript : Facebook SDK ![apple](https://cdn3.iconfinder.com/data/icons/pico
3238
- [Logout](#logout)
3339
- [Facebook Logout Button](#facebook-logout-button-1)
3440
- [Custom Logout Button](#custom-logout-button-1)
41+
- [Share](#share-1)
42+
- [Create Sharing Content](#create-sharing-content-1)
43+
- [Facebook Share Button](#facebook-share-button-1)
44+
- [Facebook Send Button](#facebook-send-button-1)
45+
- [Show Share Dialog Programmatically](#show-dialog-programmatically-1)
46+
- [Hide Custom Button If Can't share](#hide-custom-button-1)
3547
- [Login Response](#login-response)
3648
- [Get Current Access Token](#get-current-access-token)
3749
- [Graph API Example](#graph-api-example)
@@ -55,9 +67,16 @@ tns plugin add nativescript-facebook
5567

5668
## Configuration
5769
### Android
58-
No additional configuration required!
70+
Update AndroidManifest.xml (app/App_Resources/Android/AndroidManifest.xml) to put `provider` under `<application>`
71+
`{facebook_app_id}` is your app id
72+
73+
```xml
74+
<provider android:authorities="com.facebook.app.FacebookContentProvider{facebook_app_id}"
75+
android:name="com.facebook.FacebookContentProvider"
76+
android:exported="true"/>
77+
```
5978
### iOS
60-
Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains `CFBundleURLTypes` like below:
79+
Update Info.plist file (app/App_Resources/iOS/Info.plist) to contains `CFBundleURLTypes` and `LSApplicationQueriesSchemes` like below:
6180
```xml
6281
<?xml version="1.0" encoding="UTF-8"?>
6382
<!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
7493
</array>
7594
</dict>
7695
</array>
77-
96+
<key>LSApplicationQueriesSchemes</key>
97+
<array>
98+
<string>fbapi</string>
99+
<string>fb-messenger-share-api</string>
100+
<string>fbauth2</string>
101+
<string>fbshareextension</string>
102+
</array>
78103
</dict>
79104
</plist>
80105
```
@@ -250,6 +275,96 @@ export class LoginViewModel extends Observable {
250275
}
251276
```
252277

278+
### Share
279+
### Create Sharing Content
280+
For sharing, you have to create sharing content first.
281+
Currently the available content types are:
282+
- **createLinksShareContent(link: string, quote?: string, addition?: ShareAdditionContent)** available for every condition
283+
- **createPhotosShareContent(images: ImageSource[] | string[], userGenerated: boolean, addition?: ShareAdditionContent)** available for ShareButton and `showShareDialog` ( only when user have native Facebook installed, version 7.0 or higher )
284+
- **createShareMessengerGenericTemplateContent(contentConfig: MessageGenericTemplateElementContent)** available for SendButton and `showMessageDialog`
285+
- **createShareMessageMediaTemplateContent(contentConfig: MessageMediaTemplateContent)** available for SendButton and `showMessageDialog`
286+
287+
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)
288+
```TypeScript
289+
import {
290+
LoginEventData,
291+
getCurrentAccessToken,
292+
createLinksShareContent,
293+
createPhotosShareContent,
294+
createShareMessengerGenericTemplateContent,
295+
MessageGenericTemplateImageAspectRatio,
296+
showShareDialog,
297+
showMessageDialog,
298+
canShareDialogShow,
299+
canMessageDialogShow
300+
} from 'nativescript-facebook';
301+
302+
const linkContent = createLinksShareContent('https://www.nativescript.org',
303+
'Create Native iOS and Android Apps With JavaScript',
304+
{
305+
hashtag: '#Nativescript'
306+
});
307+
308+
// you can also pass in imageUrls as string[] in here
309+
const logoImage = fromResource('logo');
310+
const photosContent = createPhotosShareContent([logoImage], false, {
311+
hashtag: '#Nativescript'
312+
});
313+
const GenericTemplate = createShareMessengerGenericTemplateContent({
314+
element: {
315+
title: 'Nativescript',
316+
subtitle: 'Create Native iOS and Android Apps With JavaScript',
317+
imageUrl: 'https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/how-it-works-min.png',
318+
button: {
319+
title: 'Check Doc',
320+
url: 'https://docs.nativescript.org'
321+
},
322+
defaultAction: {
323+
title: 'Go HomePage',
324+
url: 'https://www.nativescript.org'
325+
}
326+
},
327+
// it seems android have to provide a pageId, otherwise the MessageDialog just wont show
328+
pageID: 'testestsett',
329+
imageAspectRatio: MessageGenericTemplateImageAspectRatio.Horizontal
330+
});
331+
332+
```
333+
334+
### Facebook Share Button
335+
```xml
336+
<Facebook:ShareButton content="{{ linkContent }}"></Facebook:ShareButton>
337+
```
338+
339+
### Facebook Send Button
340+
341+
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.
342+
343+
```xml
344+
<Facebook:SendButton content="{{ genericContent }}"></Facebook:SendButton>
345+
```
346+
347+
### Show Share Dialog Programmatically
348+
349+
**Note** The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)
350+
351+
```typescript
352+
showShareDialog(this.linkContent);
353+
showMessageDialog(this.linkContent);
354+
```
355+
356+
### Hide Custom Button If Can't share
357+
358+
You can use this method to check if the content can be shared and hide the custom button if can't
359+
360+
```typescript
361+
public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
362+
public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
363+
```
364+
```xml
365+
<Button tap="{{ onShareDialogPhotos }}" text="Open Share dialog (photos)" visibility="{{ canShowPhotosShareDialog ? 'visible' : 'collapsed' }}"></Button>
366+
<Button tap="{{ onSendGenericDialog }}" text="Share Message Generic Template" visibility="{{ canShowGenericMessageDialog ? 'visible' : 'collapsed' }}"></Button>
367+
```
253368

254369
## NativeScript Angular
255370
### Initialization
@@ -417,6 +532,45 @@ export class AppComponent {
417532
```
418533

419534

535+
### Share
536+
### Create Sharing Content
537+
Read Nativescript [chapter](#create-sharing-content) for this
538+
539+
### Facebook Share Button
540+
```angular2html
541+
<FacebookShareButton [content] = "linkContent"></FacebookShareButton>
542+
```
543+
544+
### Facebook Send Button
545+
546+
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.
547+
548+
```angular2html
549+
<FacebookSendButton [content] = "genericContent"></FacebookSendButton>
550+
```
551+
552+
### Show Share Dialog Programmatically
553+
554+
**Note** The share dialog will try fallback to browse page sharing if user doesn't have Facebook installed (only for linkContent)
555+
556+
```typescript
557+
showShareDialog(this.linkContent);
558+
showMessageDialog(this.linkContent);
559+
```
560+
561+
### Hide Custom Button If Can't share
562+
563+
You can use this method to check if the content can be shared and hide the custom button if can't
564+
565+
```typescript
566+
public canShowPhotosShareDialog = canShareDialogShow(this.photosContent);
567+
public canShowGenericMessageDialog = canMessageDialogShow(this.genericContent);
568+
```
569+
```angular2html
570+
<Button (tap) = "onShareDialogPhotos()" text = "Open Share dialog (photos)" *ngIf = "canShowPhotosShareDialog"></Button>
571+
<Button (tap) = "onSendGenericDialog()" text = "Share Message Generic Template" *ngIf = "canShowGenericMessageDialog"></Button>
572+
```
573+
420574
## Login Response
421575
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:
422576

0 commit comments

Comments
 (0)