AngularJS share on Facebook


How to share an url or article on Facebook from a site routed with AngularJS?

It happens that Facebook does not recognize the meta tags og: .... I have searched a lot but I can not find concrete answers. Any ideas?

I tried the following: In my HTML code I declare my open graph meta tags as link variables, for example:

<meta property="og:title" content="{{ post.title }}" />

This works fine for HTML, when I inspect the code in my browser, the property content shows the value of post.title

The problem is that Facebook does not do the same. When I login to the Facebook debug console, the preview of the shared article is displayed with the title "{{post.title}}"

asked by Marcelo Forclaz 19.05.2017 в 15:58

1 answer


I think you could register the Share button by pressing event handler in "Angular shape". Move the logic to the controller and use the ng-click directive to activate the share action.

My implementation


  <div id="fb-root"></div>
    window.fbAsyncInit = function() {
        FB.init({appId: 'YOUR APP ID', status: true, cookie: true,
        xfbml: true});
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
  <div ng-controller="fbCtrl">
    <div ng-repeat="post in posts">
        <button ng-click="share(post)">SHARE</button>


  $scope.posts = [{id:1,title:"title1",content:"content1",caption:"caption1"},{id:2,title:"title2",content:"content2",caption:"caption2"}];
  $scope.share = function(post){
        method: 'feed',
        name: 'This is the content of the "name" field.',
        link: '',
        picture: '',
        caption: post.caption,
        description: 'This is the content of the "description" field, below the caption.',
        message: ''


The author of the answer is: @Chickenrice

The original question where the answer is this.

answered by 21.12.2017 в 02:12