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:

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

How I Can import the facebook SDK using Angular 2 app?

Answer 1

No need to use facebook sdk we can use window location in same ts file as like below. And also we can do it same for any social media like 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 2

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

in 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" />

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!!