AngularJS - Facebook Sharer

Question

I am trying to use the Facebook Share in AngularJS. Below is my function that is called when the user clicks on the FB icon.

    $scope.shareFB = function(){

        // Get configuration ID from service
        configuratorService.storeConfiguration($scope.modelCode, function(configID){
            // Use saved configuration id to create share link
            var base = $location.absUrl().replace($location.url(), '');
            var byoUrl = base + "/" + $scope.modelCode + "/resume/" + configID;
            console.log(byoUrl);
            var fbpopup = window.open("https://www.facebook.com/sharer/sharer.php?u=" + byoUrl, "pop", "width=600, height=400, scrollbars=no");
        });

    }

This function works fine when I try to share a url like "https://www.google.com/"

the Facebook Popup then has the URL = "https://www.facebook.com/sharer/sharer.php?u=https://www.google.com/"

When I use the function above:

byoUrl = "http://localhost:8000/#/15K6/resume/9295316837"

and the resulting FB popup has URL = "https://www.facebook.com/15K6/resume/9295316837"

Why does the "/sharer/sharer.php?=http://localhost:8000/#/" get cut off?

Answer 1

You shouldn't even try to share a localhost URL, as Facebook will never be able to scrape it. That's very likely why your URL gets cut off. Facebook tries to resolve it and scrape it, but it will never find it, so it makes a best effort to redirect within itself. Example:

https://www.facebook.com/sharer/sharer.php?u=http://localhost:8000/#/coke

Answer 2

Try to put your share logic in the controller. Something along these lines.

  // Share posts
  $scope.fbShare = function(post){
    FB.ui(
    {
        method: 'feed',
        name: post.title,
        link: 'http://www.cengkuru.com/'+post.slug,
        picture: '',
        caption: '',
        description: $filter('limitTo')($scope.post.body, 150),
        message: ''
    });
  }

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({appId: 'YOUR_APP_ID', status: true, cookie: true,
        xfbml: true});
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
    }());
  </script>