Facebook like and share button with callback

Question

I have a webpage where I have placed a Facebook like & share button and corresponding javascript callback functions are also present.

Now the problem is, the javascript callback fires only when the user 'likes' and doesn't seem to fire when the 'share' button is pressed.

Its like I need to award the user everytime he/she shares the link. Whereas with 'like', a user can only like a link once (not considering unlike/re-like).

I know that the Share button is deprecated. But facebook now provides a share button with a like button. Source : https://developers.facebook.com/docs/plugins/like-button/

Is there a way to fire this callback method from this share button?

Here's my code :

Code at the beginning of the BODY tag in my HTML :-

<div id="fb-root"></div>

<script>
    window.fbAsyncInit = function() {
    FB.init({
        appId: ' My App ID ',
        status: true,
        cookie: true,
        xfbml: true,
        oauth: true
    });
    FB.Event.subscribe('edge.create', function(response) {
        alert('You liked the URL: ' + response);

      });
};
(function(d) {
    var js, id = 'facebook-jssdk';
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));

        </script>

Code to display the Like & Share Buttons:-

<div class="fb-like" data-href=" My URL " data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>

Product

please provide with your code. it would be very difficult to help you without it. – Crossroads

Answer 1

You cannot get the share callback using this like button. You can instead create a share button of yours and invoke the Feed Dialog on its click-

FB.ui(
{
  method: 'feed',
  name: 'Facebook Dialogs',
  link: 'https://developers.facebook.com/docs/dialogs/',
  picture: 'http://fbrell.com/f8.jpg',
  caption: 'Reference Documentation',
  description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
  if (response && response.post_id) {
    alert('Post was published.');
  } else {
    alert('Post was not published.');
  }
}
);

Baseburner

Never knew about the Feed Dialog! I think this is exactly what I am looking for. Solved! – Product

Is it possible to get a button styled by facebook to invoke this method? – Fleck

@Fleck Were you ever able to figure this out? – Trutko

Good answer . Could you please this similar question by Tom #35014165 – Perren

i use this code for sharing . but it make "The parameter app_id is required" error. function(){ FB.ui( { method: 'share', appId:'klick-on', name: 'Facebook Dialogs', link: 'developers.facebook.com/docs/dialogs', picture: 'fbrell.com/f8.jpg', caption: 'Reference Documentation', description: 'Dialogs provide a simple, consistent interface for applications to interface with users.' }, function(response) { if (response && response.post_id) { alert('Post was published.'); } else { alert('Post was not published.'); } } ) }); – Perren

This requires app id (see OP code). The post_id will only be available if users are logged in to the app with publish_actions granted. Starting october 12th, 2016 this will also become required for the feed dialog: developers.facebook.com/docs/sharing/reference/feed-dialog/v2.6 – Himyarite

@Sahil Mittal Can you please tell, how to use your code from basic ? Where can i add this code? when i did copied this code in my html body nothing came. How can i make it work . Can you please help? – Bel

Answer 2

full code is here

$("#bodyarea").on('click', '.share_fb', function(event) {
    event.preventDefault();
    var that = $(this);
    var post = that.parents('article.post-area');

    $.ajaxSetup({ cache: true });
        $.getScript('//connect.facebook.net/en_US/sdk.js', function(){
        FB.init({
          appId: '822306031169238', //replace with your app ID
          version: 'v2.3'
        });
        FB.ui({
            method: 'share',
            title: 'TTitle Test',
            description: 'Test Description Goes here. Tahir Sada ',
            href: 'https://developers.facebook.com/docs/',
          },
          function(response) {
            if (response && !response.error_code) {
              alert('Posting completed.');
            } else {
              alert('Error while posting.');
            }
        });
  });
});

Change your application id to work

Working Example

Coffeehouse

Answer 3

An alternative way I made here to who don't want to publish an APP just for it is:

   jQuery("#div_share").click(function() {

        var url = "http://www.facebook.com/sharer/sharer.php?u=YOUR_URL&title=YOUR_TITLE";

        var openDialog = function(uri, name, options, closeCallback) {
            var win = window.open(uri, name, options);
            var interval = window.setInterval(function() {
                try {
                    if (win == null || win.closed) {
                        window.clearInterval(interval);
                        closeCallback(win);
                    }
                }
                catch (e) {
                }
            }, 1000);
            return win;
        };

        openDialog(url,'Facebook','width=640,height=580', function(){
            jQuery("#div_share").hide();
            jQuery("#formulario").show();
        });
    });

It will open a javascript dialog to share, and know when the user close it. It's not guaranteed that they really share the content... but.. :)

Turnage

is there any way to know they share or not . please help . – Perren

@Ron you cannot. With that code you can't. Because, it only open the window and wait close. The advantage are you don't need to register the application on facebook, that will take you so much time. – Preemie

the intention of callback is only to know whether the share action is successful or not! what's the point of knowing only if the popup window has closed without knowing whether the user clicked on "close" or "post to facebook" ? – Meatus

Answer 4

<div class="fb-like" data-href="page_link" data-layout="button_count" data-onshare="page_like_or_unlike_callback" data-onlike="page_like_or_unlike_callback" data-action="like" data-size="large" data-show-faces="true" data-share="false"></div>

Just add data-onlike="function_name" and define the function in your javascript. Your done, your function will be called as soon as the person hits like on your website. For share button it's still in development mode, I'll update you soon on that..

Melonie