make it possible to add facebook access token

projects/button/src/lib/share-button.html

@@ -5,6 +5,7 @@
         [title]="title"
         [description]="description"
         [tags]="tags"
+        [fbAccessToken]="fbAccessToken"
         [autoSetMeta]="autoSetMeta"
         [getCount]="showCount"
         (count)="onCount($event)"

projects/button/src/lib/share-button.ts

@@ -41,6 +41,9 @@ export class ShareButton {
   /** The tags parameter for sharing on Twitter and Tumblr */
   @Input() tags: string;
 
+  /** Sets the Access Token parameter for sharing on facebook */
+  @Input() fbAccessToken: string;
+
   /** Sets meta tags from document head, useful when SEO is available */
   @Input() autoSetMeta: boolean;
 

projects/buttons/src/lib/share-buttons.html

@@ -8,6 +8,7 @@
                 [description]="description"
                 [image]="image"
                 [tags]="tags"
+                [fbAccessToken]="fbAccessToken"
                 [autoSetMeta]="autoSetMeta"
                 [showCount]="showCount"
                 [showIcon]="showIcon"

projects/buttons/src/lib/share-buttons.ts

@@ -63,6 +63,9 @@ export class ShareButtons implements OnInit, OnDestroy {
   /** The tags parameter for sharing on Twitter and Tumblr */
   @Input() tags: string;
 
+  /** Sets the Access Token parameter for sharing on facebook */
+  @Input() fbAccessToken: string;
+
   /** Sets meta tags from document head, useful when SEO is available */
   @Input() autoSetMeta: boolean;
 

projects/core/src/lib/buttons/base.ts

@@ -1,7 +1,7 @@
 import { Platform } from '@angular/cdk/platform';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
-import { IShareButton, ShareMetaTags } from '../share.models';
+import { IShareButton, ShareMetaTags, ShareApiOption } from '../share.models';
 
 export class ShareButtonBase {
 
@@ -71,7 +71,7 @@ export class ShareButtonBase {
   }
 
   /** Get share count of a URL */
-  shareCount(url: string): Observable<number> | undefined {
+  shareCount(url: string, option?: ShareApiOption): Observable<number> | undefined {
     return undefined;
   }
 

projects/core/src/lib/buttons/facebook.ts

@@ -1,9 +1,9 @@
 import { Platform } from '@angular/cdk/platform';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ShareButtonBase } from './base';
-import { IShareButton, ShareMetaTags } from '../share.models';
+import { IShareButton, ShareMetaTags, ShareApiOption } from '../share.models';
 
 export class FacebookButton extends ShareButtonBase {
 
@@ -28,9 +28,18 @@ export class FacebookButton extends ShareButtonBase {
     super(_props, _url, _http, _platform, _document, _windowSize, _disableButtonClick, _logger);
   }
 
-  shareCount(url: string): Observable<number> {
-    return this._http.get(`https://graph.facebook.com?id=${url}`).pipe(
-      map((res: any) => +res.share.share_count)
-    );
+  shareCount(url: string, option: ShareApiOption ): Observable<number> {
+    if (!option.fbAccessToken) {
+      console.warn('need to setting access token to get facebook share count.');
+      return of(0);
+    } else {
+      return this._http.get(`https://graph.facebook.com?id=${
+        url
+      }&fields=engagement&access_token=${
+        option.fbAccessToken
+      }`).pipe(
+        map((res: any) => +res.engagement.share_count)
+      );
+    }
   }
 }

projects/core/src/lib/share-button.directive.ts

@@ -63,6 +63,9 @@ export class ShareDirective implements OnChanges, OnDestroy {
   /** Sets the tags parameter for sharing on Twitter and Tumblr */
   @Input() tags: string = this._share.config.tags;
 
+  /** Sets the Access Token parameter for sharing on facebook */
+  @Input() fbAccessToken: string = this._share.config.fbAccessToken;
+
   /** Stream that emits when share count is fetched */
   @Output() count = new EventEmitter<number>();
 
@@ -129,7 +132,9 @@ export class ShareDirective implements OnChanges, OnDestroy {
         );
 
         if (this.getCount && this.shareButton.supportShareCount) {
-          this.shareButton.shareCount(this.url).subscribe((count: number) => this.count.emit(count));
+          this.shareButton.shareCount(this.url, {
+            fbAccessToken: this.fbAccessToken
+          }).subscribe((count: number) => this.count.emit(count));
         }
       }
     }

projects/core/src/lib/share.models.ts

@@ -20,6 +20,7 @@ export interface ShareButtonsConfig {
   image?: string;
   tags?: string;
   twitterAccount?: string;
+  fbAccessToken?: string;
   autoSetMeta?: boolean;
   gaTracking?: boolean;
   windowWidth?: number;
@@ -91,3 +92,10 @@ export interface IShareButton {
   /** Used to attach more properties for certain buttons */
   extra?: any;
 }
+
+/**
+ * Additional parameters when call for share API
+ */
+export interface ShareApiOption {
+  fbAccessToken?: string;
+}

projects/demo/src/app/shared/lab/lab.component.html

@@ -65,6 +65,7 @@
                         [showText]="config.showText"
                         [showCount]="config.showCount"
                         [tags]="config.tags"
+                        [fbAccessToken]="config.fbAccessToken"
                         [autoSetMeta]="config.autoSetMeta"
                         [title]="config.title"
                         [description]="config.description"
@@ -89,6 +90,7 @@
                          [showText]="config.showText"
                          [size]="config.size"
                          [tags]="config.tags"
+                         [fbAccessToken]="config.fbAccessToken"
                          [autoSetMeta]="config.autoSetMeta"
                          [title]="config.title"
                          [description]="config.description"
@@ -175,6 +177,11 @@
           <mat-label>Tags</mat-label>
           <input matInput [(ngModel)]="config.tags" [disabled]="component === 'share-button' && !['twitter', 'tumblr'].includes(config.button)">
         </mat-form-field>
+
+        <mat-form-field color="primary"  appearance="outline">
+          <mat-label>fbAccessToken</mat-label>
+          <input matInput [(ngModel)]="config.fbAccessToken" [disabled]="component === 'share-button' && !['facebook'].includes(config.button)">
+        </mat-form-field>
       </div>
     </div>
   </div>

projects/demo/src/app/shared/lab/lab.component.ts

@@ -23,6 +23,7 @@ export class LabComponent implements AfterViewInit, AfterContentChecked, OnDestr
     title: undefined,
     description: undefined,
     tags: undefined,
+    fbAccessToken: undefined,
     image: undefined,
     showIcon: true,
     showText: false,
@@ -163,6 +164,10 @@ export class LabComponent implements AfterViewInit, AfterContentChecked, OnDestr
       code += `\n [tags]="'${this.config.tags}'"`;
     }
 
+    if (this.config.fbAccessToken) {
+      code += `\n [fbAccessToken]="'${this.config.fbAccessToken}'"`;
+    }
+
     if (!this.config.autoSetMeta) {
       code += `\n [autoSetMeta]="${this.config.autoSetMeta}"`;
     }

projects/demo/src/assets/data/component-api.json

@@ -49,6 +49,11 @@
     "description": "Override tags for Tumblr and Twitter, default: null",
     "type": "input"
   },
+  {
+    "name": "fbAccessToken",
+    "description": "Used to get the share count of facebook, default: null",
+    "type": "input"
+  },
   {
     "name": "showIcon",
     "description": "Show buttons icon, default: true",

projects/demo/src/assets/data/container-api.json

@@ -49,6 +49,11 @@
     "description": "Override tags for Tumblr and Twitter, default: null",
     "type": "input"
   },
+  {
+    "name": "fbAccessToken",
+    "description": "Used to get the share count of facebook, default: null",
+    "type": "input"
+  },
   {
     "name": "showIcon",
     "description": "Show buttons icons, default: true",

projects/demo/src/assets/data/directive-api.json

@@ -29,6 +29,11 @@
     "description": "Override tags for Tumblr and Twitter, default: null",
     "type": "input"
   },
+  {
+    "name": "fbAccessToken",
+    "description": "Used to get the share count of facebook, default: null",
+    "type": "input"
+  },
   {
     "name": "getCount",
     "description": "Gets and emits share count, default: false",

projects/demo/src/assets/data/options-api.json

@@ -40,6 +40,10 @@
     "name": "twitterAccount",
     "description": "Add via @accountName at the end of the tweets, default: null"
   },
+  {
+    "name": "fbAccessToken",
+    "description": "Used to get the share count of facebook, default: null"
+  },
   {
     "name": "windowWidth",
     "description": "Share popup window width, default: 800"