Testing Facebook Share Dialog With Localhost - "unable To Resolve Object At Url Http://localhost"

I'm trying to use the current (at date of asking this question) Facebook Share Dialog using just the URL (not the SDK). My JS looks like this: openFacebookPopup : function (url) {

Solution 1:

Since FB can't access to your localhost to feed the popup, you have to feed it yourself.

First, add the Facebook's Javascript SDK on every pages you need it :

window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.3'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

Then, bind this function on whatever trigger you want, a click event for example :

$('#fb-share-button').click(function() {
    FB.ui({
          method: 'feed',
          link: "The link you want to share", 
          picture: 'The picture url',
          name: "The name who will be displayed on the post",
          description: "The description who will be displayed"
        }, function(response){
            console.log(response);
        }
    );
});

I console.log the response but in this block you can do what you want. Catch the response to see if the post has been well shared for example.

Solution 2:

What @WizKid is trying to say is that Facebook is looking for some meta tags on your page (e.g. <meta property="og:title" content="My awesome site" />, so that it can structure the content of your share... but isn't finding them. Your current share may work on production, but won't on localhost. You can test to see what facebook is looking for with their url debugger: https://developers.facebook.com/tools/debug/

The old URL-parameter-based sharing works with localhost (if you've added it as a site URL and app domain) because all facebook had to do in that instance was parse the query parameters of your share string.

Solution 3:

To test facebook share debugger on localhost we can create a tunnel.

Follow the below steps source: facebook share debugger on localhost