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

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

Answer 3

If you want to get access inside your any.component.ts file you'll need get a window referece (Iam using the follwing code):

function _window():any {
  return window;
}

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

Now you can:

import { WindowRef } from './windowRef';

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

You'll need to make sure, that the FB Object is availabe on window. Afterwards your code will transpile.