I'm trying to share a link on Facebook from within my web app. I already have the SDK initialized, etc., and the following code works fine:
callToMyAPI()
.then(function(response) {
FB.ui({
method: share,
href: http://www.google.com,
}, function(response) {
console.log(response);
});
});
This pops open a Facebook Share dialog, with a link to http://www.google.com and a little embedded preview (the box at the bottom that shows an image from the URL, plus a title and description/excerpt from the page). When I click the Post to Facebook button in the dialog, then switch over to Facebook, I see the post with the shared link.
But I need to set the href parameter dynamically, using a value that comes back from my API. So I did this instead:
callToMyAPI()
.then(function(response) {
var url = response; // http://www.google.com
FB.ui({
method: share,
href: url,
}, function(response) {
console.log(response);
});
});
Basically, all I'm doing is replacing the hardcoded http://www.google.com with the variable url (whose value is the response, which is http://www.google.com). Everything else is exactly the same. But when I do this, here's what happens:
The Facebook Share dialog still opens, but it's missing the embedded preview of the URL I'm trying to share
When I click the Post to Facebook button, the dialog closes, but nothing is ever posted to Facebook. And the response that's logged is just an empty array (
[])
So it's choking on using the response from my API as the href value, but I don't understand why. How do I fix this?
Update: after much trial and error, I discovered this bizarre behavior...
If I use http://dev.example.com as the href value (where example.com is actually my real domain), I don't get a preview in the Share dialog and nothing is posted to Facebook:
FB.ui({
method: share,
href: http://dev.example.com
});
But if I use http://www.example.com (note the www) as the href value (again, where example.com is actually my real domain), I still don't get a preview in the Share dialog, but the post does go through:
FB.ui({
method: share,
href: http://www.example.com
});
However, since there was still no preview in the Share dialog, it doesn't actually attach the link to the message. So on Facebook, all I get is a post with whatever comment I wrote, but no embedded link to http://www.example.com.
