Using Facebook SDK in Angular 2

Question

I\'ve been reading this: https://developers.facebook.com/docs/sharing/reference/share-dialog

and I need to import the facebook SDK in order to use the following code

Answer 1

After three days of research found solution for facebook sharing with dynamic content

in index.html:

Install npm package

npm i --save ngx-facebook

In your app.module

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

in your service or component 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'));

in your button click function add

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,
      }
    })
  });

reference url : http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript

Hope this helps!!