Detect Facebook share success?

Question

I\'m looking to detect if a Facebook share on a page was successful, and upon success change the value of a box. I can handle the latter just fine, but am a little lost as

Answer 1

Firstly you must include Facebook sdk.js library to use all its methods (ideally right after the opening of body tag)

<script>
(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'));
</script>

The problem with your http://jsfiddle.net/ysdp60cz/ is the scope of the facebookShare var. So, in this example, just include it in the window object:

window.facebookShare = function( callback ) { [...]

I don´t know how are you organizing your code, however, with this changes it must work.

You can check it here: http://jsfiddle.net/benjasHu/3dhq9k21/

Cheers.

Answer 2

I don't know if you are using the Facebook SDK to create the Share Dialog, but with SDK you can get the response status with something like this (of course, you must load the facebook script firstly):

FB.init({
    appId  : 'your-app-id',
    status : true,
    xfbml  : true,
    version: 'v2.1'
});

var facebookShare = function( callback ) {

    var options = {
        method : 'share',
        href   : 'your-url-to-share'
    }),
        status = '';

    FB.ui(options, function( response ){

        if (response && !response.error_code) {
            status = 'success';
            $.event.trigger('fb-share.success');

        } else {
            status = 'error';
            $.event.trigger('fb-share.error');
        }

        if(callback && typeof callback === "function") {
            callback.call(this, status);
        } else {
            return response;
        }
    });
}

And then you can assign the click event to your button to fire the share dialog. After that, call the callback or use the ".on" jQuery method to know the response status:

$('your-facebook-share-button').on('click', function( e ) {
    e.preventDefault();

    facebookShare(function( response ) {
        // simple function callback
        console.log(response);
    });
});

// custom jQuery events
$(document)
    .on('fb-share.success', function( e ) {
        console.log('success events');
    })
    .on('fb-share.error', function( e ) {
        console.log('error events');
    });

I have not tested this code, but I think that it would work.

Good luck!