在 Angular 2 中使用 Facebook SDK

Question

我一直在读这个：https://developers.facebook.com/docs/sharing/reference/share-dialog

我需要导入 facebook SDK 才能使用以下代码：

FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/',
}, function(response){});

如何使用 Angular 2 应用导入 facebook SDK？

Answer 1

无需使用 facebook sdk，我们可以在同一个 ts 文件中使用窗口位置，如下所示。我们也可以对任何社交媒体（如 twitterlinkedin）做同样的事情。

脸书：

popupfacebook() {
    let url = 'http://www.facebook.com/sharer.php?u='+ this.shareLink;
       let newwindow=window.open(url,'name','height=500,width=520,top=200,left=300,resizable');
  if (window.focus) {
      newwindow.focus()
  } 
}

推特：

popuptweet(){
       let url = 'https://twitter.com/intent/tweet?text='+ this.shareLink;
       let newwindow=window.open(url,'name','height=500,width=520,top=200,left=300,resizable');
  if (window.focus) {
      newwindow.focus()
}}

领英：

popuplinkedin(){
      let url ='https://www.linkedin.com/shareArticle?mini=true&url='+this.shareLink;
       let newwindow=window.open(url,'name','height=500,width=520,top=200,left=300,resizable');
  if (window.focus) {
      newwindow.focus()
  }
}

Answer 2

经过三天的研究，找到了 facebook 分享动态内容的解决方案

在 index.html 中：

<meta property="og:type" content="website" />
<meta name="fbDescription" property="og:description" content="desc">
<meta name="fbJobTitle" property="og:title" content="title">
<meta property="fb:app_id" content="ur app id" />
<meta name="fbImage" property="og:image" content="url">
<meta property="og:site_name" content="site name" />

安装 npm 包

npm i --save ngx-facebook

在你的 app.module 中

import { FacebookModule } from 'ngx-facebook';
imports:[FacebookModule.forRoot()]   // donot forget to add

在您的服务或组件中添加

import { Meta } from '@angular/platform-browser';
providers: [ApiService, CommonDataService, FacebookService]

constructor(private fbk: FacebookService){
fbk.init({
    appId: 'yourappid', cookie: true, status: true, xfbml: true, version: 'v2.8'
  });
 }
  (function (d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id))
    return;
  js = d.createElement(s);
  js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

在你的按钮点击函数中添加

this.meta.updateTag({ property: 'og:type', content: 'website' });
this.meta.updateTag({ property: 'og:site_name', content: 'websitename' });
          this.meta.updateTag({ property: 'og:title', content: 'title'});
          this.meta.updateTag({ property: 'og:description', content: 'Description'});
          this.meta.updateTag({ property: 'og:image', content: 'url' });

  this.fbk.ui({
    method: 'share_open_graph',
    action_type: 'og.shares',
    action_properties: JSON.stringify({
      object: {
        'og:title': 'title',
        'og:description': 'description',
        'og:image': 'imagelink',
        'og:url': referlink,
      }
    })
  });

参考网址：http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript

希望这会有所帮助！

Answer 3

如果您想访问您的 any.component.ts 文件，您需要获得 window 参考（我使用以下代码）：

function _window():any {
  return window;
}

export class WindowRef {
    public static get():any {
        return _window();
    }
}

现在你可以：

import { WindowRef } from './windowRef';

export class AnyComponent {
   WindowRef.get().FB.ui // <-- this is how you'll reference it now
}

您需要确保FB 对象在window 上可用。之后您的代码将转译。