CODEWITHSUNDEEP
angularjshtmlfacebookexpress
Blejzer
Blejzer

Reputation: 1123

how to set angularjs single page application for social share

I'm trying to set social sharing with SPA using Express.js and AngularJS. Thing is, I want to share dynamic content, so I'm using angular-facebook-factory to get facebook buttons. Buttons work, params are set, just the image, title and description params that I pass never get to facebook share popup screen.

$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 share loads default values (like and ) from http://www.example.com/ and uses set href param (http://www.example.com/event). I tried with method: 'feed' as well, but without success. I'm supposed to have several different share buttons on the page, so I guess meta og tags are not going to do it...

This is SPA with number of ui-view s, and ui-router using html5 works fine and everything works fine.

Upvotes: 2

Views: 395

Answers (1)

Ravi Rajput
Ravi Rajput

Reputation: 539

This is because Facebook crawlers are unable to render the javaScript!

Angular JS is less friendly when it comes to SEO integration.

Reviewing your code:

$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

The reason is same, your browser is able to render the JavaScript. But Facebook crawler is unable to process that javaScript.

Upvotes: 1

Related Questions