Facebook Share dialog doesn't work when href parameter is a variable

Question

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:

1. The Facebook Share dialog still opens, but it's missing the embedded preview of the URL I'm trying to share

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

Answer 1

The real answer is three-fold:

1. My http://dev.example.com site required authentication; I completely forgot about this since I have my username/password saved, so it never prompts me

2. My http://www.example.com was actually a longer URL (http://www.example.com/test/12345) that didn't point to an existing page on that server (it only existed on my dev server). So Facebook could reach the URL (no auth required), but couldn't scrape anything from it, hence why the post would go through but without the embedded preview

3. The page I was sharing was missing the various Open Graph meta tags (og:type, etc.); apparently href is the only parameter you can pass in via the share method, while everything else that's needed for the share has to come from OG tags on the page

So I added the missing OG tags to the page (except for og:url), disabled auth on my dev server (temporarily for testing), and now finally the post is going through with the proper link attached.