my dynamic data not share in fb using angular

Question

i have tried to share my post page data to fb, and my post page data change on product wise, its come from server and after that i want to share this data on fb, but i cant get this data on fb share page.

i tried below concept for share data on fb

1)ngx-social-button
2)
        let url =  "https://www.facebook.com/dialog/share?app_id=xxxxxxxxx&href="+location.href+"&picture="+this.product.productImageUrl;
        let newwindow=window.open(url,'name','height=500,width=520,top=200,left=300,resizable');
        if (window.focus) {
            newwindow.focus()
        } 

and update meta dynamic when post data come

    this.metaService.updateTag({property: 'og:title', content: product.productName});
    this.metaService.updateTag({property: 'og:type', content: 'website'});
    this.metaService.updateTag({property: 'og:image', content: product.productImageUrl});
    this.metaService.updateTag({property: 'og:image:alt', content: product.productName});
    this.metaService.updateTag({property: 'og:description', content: product.productDescription});
    this.metaService.updateTag({property: 'og:url', content: location.href});
    this.metaService.updateTag({property: 'og:image:height', content:'250px'});
    this.metaService.updateTag({property: 'og:image:width', content:'250px'});

but i cant resolve issue for share dynamic data on fb

Answer 1

As per my knowledge you cannot share data/text (prefilled text like twitter tumbler etc) on Facebook, as per Facebook's policy they won't allow to share content.

https://developers.facebook.com/policy#control

But yes you can share your link/URLs, Images on facebook. How images crawlers crawl of your application, Off course it's depends on your application whether is it server side supported or not because the problem is that Facebook crawler will only see server side rendered HTML, Facebook will not execute client side javascript.

Also if you want to check how you pages share looks like after sharing it on Facebook, you can test it out here

https://developers.facebook.com/tools/debug/sharing

Update

To pass dynamic SEO data for every webpage specific you can can set it like this -

import { Meta, Title } from '@angular/platform-browser';


@Injectable()
export class SEOService {
 constructor(
    private meta: Meta,
    public title: Title
  ) { }

   this.title.setTitle(`Title here`);
   this.meta.updateTag({ name: 'description', content: 'description here' }); 
}

For more info please refer documentation -

• https://angular.io/api/platform-browser/Meta