Using the Facebook SDK in Angular 2

Question

I read 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 can I import the SDK into facebook using the Angular 2 application?

Answer 1

No need to use facebook sdk, we can use the window layout in the same ts file as shown below. And also we can do it the same for any social networks such as 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

If you want to access your any.component.ts file, you need to get a window referee (Iam using the following 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 need to make sure that the FB object is available in window . Subsequently, your code will be translated.

Answer 3

After three days of research, a solution was found for sharing facebook 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 application .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 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 !!