Blogger Ever

How to give callback on a Facebook share using Facebook javascript SDK

Using FB.ui we can make interactive sharing buttons with custom callback functions. This could helpful to create share gates for links and cool widgets for web.
How to give callback on a Facebook share using Facebook javascript SDK

I shared to give callback with Tweet using Twitter intent API, but however Facebook hold more number of registered users so I'm going to share the same with Facebook. Facebook have a huge developers' tools which could be helpful to create uncountable tools for websites and apps.

So in one of them is Javascript SDK which uses client-side to do functions, so lets begin:
Make sure that this will not work in any online code editor because it needs a domain or sub-domain to work.

So to start you need a basic work-pattern, following code with load the Javascript SDK:
<script>
window.fbAsyncInit = function() {
       // All functions will go here
      };
      (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>
Then, you need a share dialog with a specific URL on timeline so lets add FB.ui function which initiate a dialog box.
FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/',  // URL to be shared}, function(response){
// Callback function after shared.});
Make sure that FB.ui function should be call inside fbAsyncInit function. Now you can use it in click function and the final code will be:
<span id='fb-share'>Share</span>
<script>
window.fbAsyncInit = function() {
      FB.ui({
  method: 'share',
  href: 'https://developers.facebook.com/docs/',  // URL to be shared  }, function(response){
// Callback function after shared.});
      };
      (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>
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.