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 app导入facebook SDK？

Answer 1

经过三天的研究，发现了具有动态内容的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 2

无需使用facebook sdk我们可以在同一个ts文件中使用窗口位置，如下所示。而且我们也可以为twitter linkedin这样的社交媒体做同样的事情。

Facebook：

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()
  } 
}

Twitter的：

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()
}}

Linkedin：

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 3

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

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上可用。之后你的代码就会变好。

在Angular 2中使用Facebook SDK

3 个答案: