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>

please provide with your code. it would be very difficult to help you without it. — Michael, Apr 16 '14 at 17:51

score 33 · Accepted Answer · answered Apr 21 '14 at 09:18

33

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.');
  }
}
);

answered Apr 21 '14 at 09:18

Sahil Mittal

20,697
12
65
90

Never knew about the Feed Dialog! I think this is exactly what I am looking for. Solved! – Krish Apr 22 '14 at 11:00
1

Is it possible to get a button styled by facebook to invoke this method? – SverkerSbrg Jun 19 '14 at 11:43
1

@SverkerSbrg Were you ever able to figure this out? – TimNguyenBSM Oct 01 '14 at 02:05
Good answer . Could you please this similar question by Tom http://stackoverflow.com/questions/35013665/javascript-jquery-popup-condition – Jan 26 '16 at 12:58
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: '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.'); } } ) }); – Jan 26 '16 at 14:44
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: https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.6 – yezzz May 16 '16 at 14:18
@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? – Tekraj Shrestha Apr 27 '17 at 08:22

score 9 · Answer 2 · answered Aug 31 '15 at 11:33

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

score 4 · Answer 3 · answered Jan 13 '16 at 12:41

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.. :)

@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. — Tiago Gouvêa, Jan 28 '16 at 13:12
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" ? — rehman_00001, Jan 31 '20 at 07:25

score 2 · Answer 4 · edited Mar 24 '17 at 07:59

<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..

Facebook like and share button with callback

4 Answers4

Linked