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

13
votes

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.

6
javascriptfacebookangularmeta-tags
You need to add those meta tags to the actual page that you want to share. Read the answer in the link you posted. – Stuart
If that page is an angular 2 component, how do I do that? – VSO
It doesn't matter what it is. Wherever you are creating the actual head of the html page, thats where you will add your meta tags. – Stuart

6 Answers

6
votes

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>
2
votes

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

1
votes

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."/>'
1
votes

If you are using client side rendering, Facebook crawler can't execute js on page, so it gets HTML which is returned from server and searches for OG meta tags.

  • if it is dynamically rendered content, you need to on server side add those meta tags to index.html you are returning. (i am not sure what you are using on backend to serve/generate index but you can use for example handlebars.js)

  • otherwise just put those meta tags directly into your index.html

  • you can then test it here → https://developers.facebook.com/tools/debug/sharing

0
votes

if this can help you to modify the title description? angular-2-seo

0
votes

If you are using Angular 2, the dynamic meta tags before HTML rendering can not be possible for client side rendering with Angular 2 can not be possible. With Angular 2, it is possible only on server side rendering.

It is resolved in Angular 4. You can see on this link-

Click Here