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 to how execute the actual share detection. I've Google and found FB.ui, but how do I actually implement it into a page and have it run the detection?

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 to how execute the actual share detection. I've Google and found FB.ui, but how do I actually implement it into a page and have it run the detection?

• javascript
• facebook

• Why do you want to detect it? – WizKid Commented Oct 3, 2014 at 16:23
• We're going to offer users a discount / special promotion if they plete a share on a product page. – David Winsauer Commented Oct 3, 2014 at 16:50
• That is not allowed according to Facebook Platform Policy that you can read developers.facebook./policy . So save your time and your page will not get banned from Facebook – WizKid Commented Oct 3, 2014 at 16:52
• I see nothing there saying it's forbidden, do you have a specific part of the policy that I'm not seeing? – David Winsauer Commented Oct 3, 2014 at 17:28
• 4.5: "Only incentivize a person to log into your app, like your app’s Page, enter a promotion on your app’s Page, or check-in at a place. Don’t incentivize other actions. (Effective November 5th, 2014, you may no longer incentivize people to like your app's Page)." – WizKid Commented Oct 3, 2014 at 17:54

2 Answers 2

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/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

The problem with your http://jsfiddle/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/benjasHu/3dhq9k21/

Cheers.

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!