Angular 2 - Share page URL, Title, and Description on Facebook

Question

My end goal is simple:

1. The user clicks some button on the UI.
2. The Typescript function called by click opens a new share tab on facebook for the user.
3. Both the 'Title' and the 'Description' for the shared page is provided by my site.

We have a post on including metatags on the page being linked, which fb the knows to include as the title/description (How do I customize Facebook's sharer.php). The problem is that I am using Angular 2, so I have to somehow to dynamically add metatags for the page before facebook sees it.

I am having a hard time imagining how that works, since I am assuming the FB server will hit my NG2 app and search for the metatags (so editing metatags in the browser opening the share link is meaningless, since the FB API will get a different instance of the html).

tl;dr: How do I open a fb url share dialog from an NG2 app and provide a title/description?

Note: The 'Share on fb' page can simply be opened like this: window.open('http://www.facebook.com/sharer/sharer.php?u=www.google.com'); This works, but without params.

---

Optional addendum (sample code to add meta-tags dynamically, which works, but doesn't help):

var titleMeta = document.createElement('meta');
var descMeta = document.createElement('meta');

titleMeta.setAttribute('property', 'og:title');
titleMeta.setAttribute('content', 'The Rock');

descMeta.setAttribute('property', 'og:description');
descMeta.setAttribute('content', 'Foo Description');

document.getElementsByTagName('head')[0].appendChild(titleMeta);
document.getElementsByTagName('head')[0].appendChild(descMeta);

Addendum 2: The sharer used to allow you to put in the title and the description in the url, but that is no longer the case as per https://developers.facebook.com/x/bugs/357750474364812/. Looks like it HAS to be pulled from the meta tags.

Answer 1

The problem is that Facebook crawler will only see server side rendered HTML, Facebook will not execute client side javascript. That is the reason your code to update Meta tags won't help at all.

Options-

1) Look at options for server side rendering like phantom.js

2) If it's only one title and description through out your whole application then put meta tag directly to you root index.html(where we specify Base Href and loads app, vendor javascript bundles). As pointed by @Stuart in comment

Answer 2

You Should look @ Share Buttons might help

npm install --save ngx-sharebuttons

AppModule

import {ShareButtonsModule} from 'ngx-sharebuttons';
@NgModule({
  imports: [
   //...
   HttpModule, 
   ShareButtonsModule.forRoot(),
  // ...
  ]
})

Template

<share-buttons></share-buttons>

Answer 3

Try the following code -

var windowObj = window.open();
windowObj.document.head.innerHTML='<meta property="og:title" content="The Rock"/><meta property="og:type" content="movie"/><meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/><meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/><meta property="og:site_name" content="IMDb"/><meta property="fb:admins" content="USER_ID"/><meta property="og:description"      content="A group of U.S. Marines, under command of               a renegade general, take over Alcatraz and               threaten San Francisco Bay with biological               weapons."/>'