I am implementing share to Facebook functionality using Angular 7. The shared URL is not picking the image and title from meta tags and therefore not displaying it on the shared Facebook post.
The image is received from a 3rd party API and it is updated dynamically in the content of meta tag having the property=og:image. The title is dynamically added in the content of meta tag having the property=og:title.
Below is the code that I am using to achieve the desired functionality:
shareOnFb(title: string, url: string, image: string) {
event.preventDefault();
event.stopImmediatePropagation();
// Dynamically gather and set the FB share data.
var FBDesc = title;
var FBTitle = title;
var FBLink = url;
var FBPic = image;
this.fb.ui({
method: 'share',
action_type: 'og.shares',
action_properties: JSON.stringify({
object: {
'og:href': FBLink,
'og:name': FBTitle,
'og:description': 'Test Description',
'og:picture': FBPic,
}
})
});
}
I am updating meta tags of the page by using below-mentioned code:
updateTags(url: string, title: string, image: string) {
this.meta.updateTag({ property: "og:url", content: url });
this.meta.updateTag({ property: "og:title", content: title });
this.meta.updateTag({ property: "og:image", content: "image" });
this.meta.updateTag({ property: "og:site_name", content: title });
this.meta.updateTag({ property: "og:description", content: title });
}
Below are the links that I have already consulted before posting my question here and I am unable to solve my problem by using help from here: