AngularJS share on Facebook

Question

AngularJS share on Facebook

Navigation

#1 by (1 votes)

10

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}}"

angularjs facebook

asked by Marcelo Forclaz 19.05.2017 в 15:58

source

1 answer

How does the "if" work? SII Model: Send data to the Web Service using vba

score 1 · Answer 1

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

HTML

<body>
  <div id="fb-root"></div>
  <script>
    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 +
        '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
  </script>
  <div ng-controller="fbCtrl">
    <div ng-repeat="post in posts">
        <div>{{post.title}}</div>
        <div>{{post.content}}</div>
        <button ng-click="share(post)">SHARE</button>
    </div>
  </div>
</body>

Controller

angular.module("myApp",[])
.controller("fbCtrl",function($scope){
  $scope.posts = [{id:1,title:"title1",content:"content1",caption:"caption1"},{id:2,title:"title2",content:"content2",caption:"caption2"}];
  $scope.share = function(post){
    FB.ui(
    {
        method: 'feed',
        name: 'This is the content of the "name" field.',
        link: 'http://www.hyperarts.com/external-xfbml/'+post.id,
        picture: 'http://www.hyperarts.com/external-xfbml/share-image.gif',
        caption: post.caption,
        description: 'This is the content of the "description" field, below the caption.',
        message: ''
    });
  }
});

Screenshot

The author of the answer is: @Chickenrice

The original question where the answer is this.