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&amp;href="+location.href+"&amp;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

You cannot share, FB won't allow to share the data programatically IMO, you can only share link of your application not written text. — Pardeep Jain, Oct 18 '19 at 05:02
but my link have meta tag for fb share data like image,title,description etc @PardeepJain — Bhargav Chudasama, Oct 18 '19 at 05:03
Image can also be shareable not description, it is as per FB policy you can't do anything about it. — Pardeep Jain, Oct 18 '19 at 05:06
for example you can refer to this and try demo - https://murhafsousli.github.io/ngx-sharebuttons/#/share-buttons-component — Pardeep Jain, Oct 18 '19 at 05:07
i tried above link but error when install font-awesome in angula @PardeepJain — Bhargav Chudasama, Oct 18 '19 at 05:24
you can exclude that part, font-awesome is just for icons, you can customize accordingly. — Pardeep Jain, Oct 18 '19 at 05:29
below is the error `ERROR in ./node_modules/@ngx-share/button/fesm5/ngx-share-button.js Module not found: Error: Can't resolve '@fortawesome/angular-fontawesome'` — Bhargav Chudasama, Oct 18 '19 at 05:31

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 18 '19 at 05:10

Pardeep Jain

84,110
37
165
215

Hello, are you available? – Bhargav Chudasama Oct 19 '19 at 10:22
@BhargavChudasama yes tell me – Pardeep Jain Oct 20 '19 at 06:23
i didnt find out any solution for fb share issue. any way in angular? – Bhargav Chudasama Oct 21 '19 at 04:47
There is no way buddy, it is as per facebook policy, Angular or React doesn't matter. – Pardeep Jain Oct 21 '19 at 05:04
but why meta url data not share? my page have content image,title,description etc – Bhargav Chudasama Oct 21 '19 at 05:07
Image and URL can be shareable, not content. Because as per their policy they won't allow to pass content as content/text. – Pardeep Jain Oct 21 '19 at 05:22
but my title and image not display on fb share its default title and image of index.html not update meta – Bhargav Chudasama Oct 21 '19 at 05:24
have you added fb/twitter meta card? also try to clear cache here https://developers.facebook.com/tools/debug/sharing – Pardeep Jain Oct 21 '19 at 05:30
yes i put all related meta tag of fb and also try with fb debugger but always display old title and image – Bhargav Chudasama Oct 21 '19 at 05:33
in angular always hit index.html and its default meta use for fb, but i want share meta of my component load and updated meta – Bhargav Chudasama Oct 21 '19 at 05:35
@BhargavChudasama you can set dynamic META and title using service, please check my updated answer. – Pardeep Jain Oct 21 '19 at 05:50
yes i use same and meta also updated but fb share page old meta display. this is the issue – Bhargav Chudasama Oct 21 '19 at 06:04
2

It won't work unless the pages are rendered from the server-side. Angular universal (https://angular.io/guide/universal) can be a solution, the only downside is that the pages should be served from a node js server. – geekbro Apr 18 '20 at 06:27

my dynamic data not share in fb using angular

1 Answers1

Update