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.
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.