CODEWITHSUNDEEP
angularfacebook-javascript-sdk
TheUnreal
TheUnreal

Reputation: 24472

Using Facebook SDK in Angular 2

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?

Upvotes: 11

Views: 9028

Answers (3)

priya_21
priya_21

Reputation: 159

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

Upvotes: 3

Rajesh Kumar Kanumetta
Rajesh Kumar Kanumetta

Reputation: 322

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

Upvotes: 9

sascha10000
sascha10000

Reputation: 1230

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.

Upvotes: 0

Related Questions