如何为社交分享设置angularjs单页应用程序

Question

我正在尝试使用 Express.js 和 AngularJS 设置与 SPA 的社交共享。 事情是，我想分享动态内容，所以我使用angular-facebook-factory 来获取 Facebook 按钮。按钮工作，参数设置，只是我传递的图像、标题和描述参数永远不会到达 Facebook 共享弹出屏幕。

$scope.shareEvent = function (event) {
        console.log('verify values: ', event.image); // works fine!
        FacebookService.share({
            href: 'http://www.example.com/event/'+event_id+'/', // this value is passed
            title: event.title, // Not shown
            description: event.desc, // Not shown
            image: event.image // Not shown
        }, function (response) {
            $scope.me = response;
            $scope.status = true;
        })
    }

FB 共享从http://www.example.com/ 加载默认值（如和）并使用set href 参数（http://www.example.com/event）。我也尝试了 method: 'feed' ，但没有成功。 我应该在页面上有几个不同的分享按钮，所以我猜 meta og 标签不会这样做......

这是具有 ui-view 数量的 SPA，使用 html5 的 ui-router 工作正常，一切正常。

Answer 1

这是因为 Facebook 爬虫无法渲染 JavaScript！

Angular JS 在 SEO 集成方面不太友好。

审查您的代码：

$scope.shareEvent = function (event) {
        console.log('verify values: ', event.image); // works fine!
        FacebookService.share({
            href: 'http://www.example.com/event/'+event_id+'/', // this value is passed
            title: event.title, // Not shown
            description: event.desc, // Not shown
            image: event.image // Not shown
        }, function (response) {
            $scope.me = response;
            $scope.status = true;
        })
    }

you said console.log(event.image);  / Works fine 

原因是一样的，你的浏览器可以渲染 JavaScript。但 Facebook 爬虫无法处理该 javaScript。