Catching the close or post to Facebook event of the Facebook comment box

问题

The new Facebook like button has a comment box, as you can see on the screenshot below.

I am using Facebook their XFBML solution to display the like button on my page.

Using JavaScript I manages to catch the event that is triggered when the like button is pressed but now I need a way to detect if the user pressed the "Post to Facebook" button or closed the dialog box.

Here is the code snippet that works for the like button event:

(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/all.js#xfbml=1&appId=1427863577435532";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


window.fbAsyncInit = function() {
    FB.init({
        status: true,
        cookie: true,
        xfbml: true
    });

    FB.XFBML.parse();

        FB.Event.subscribe('edge.create', function(href) {
        console.log("edge.create");
    });
}

The code that I use to display the button is:

<fb:like href="https://developers.facebook.com/docs/plugins/" layout="box_count" action="like" show_faces="false" share="false"></fb:like>

I've tried to catch the "close" or "Post To Facebook" event with any of the following solutions (found on FaceBook and https://stackoverflow.com/) without any successes.

FB.Event.subscribe('comment.add', function(resp) {
    console.log("comment.add");
});

FB.Event.subscribe('comments.add', function(resp) {
    console.log("comments.add");
});

FB.Event.subscribe('comments.create', function(resp) {
    console.log("comments.create");
});

FB.Event.subscribe('comment.create', function(resp) {
    console.log("comment.create");
})

The end solution that I need to make is:

1. Store data into the database when a like is done [managed to solve this]
2. Reload the page when user is done interacting with the dialog box (when dialog is closed or post to FaceBook button is pressed)

Anyone with a good idea or tip to solve this issue or push me into the right direction?

回答1:

I solved it by looking at the height of the Facebook popup using jQuery and then have a timer looking in defined time intervals to see if the popup was still having the same width (width changes when the popup is closed/hidden).

Use jQuery to get the iframe of Facebook like button. The easiest to do this is to wrap the like button in a div. Once you have the iframe put it in a variable called fb_like_iframe.

Next use the following code:

var pollTimerFB = window.setInterval(function() {
    var fb_iframe_height = jQuery(fb_like_iframe).height(); 
    if (fb_iframe_height < 100) {
        window.clearInterval(pollTimerFB);
        // Code that needs to be executed when the FaceBook popup is closed
        // comes here
    }
}, 1000);

The code will check every second of the FaceBook popup is closed, if not it will stay in the loop. If it is closed it executes the code you want it to execute and then stops looping.

The best way to use this code to put it inside the

FB.Event.subscribe('edge.create', function(href) {
    // Code to get iFrame
    // Code (from above) to poll if window is open
});

Using the above method will start the polling mechanism each time a user presses the FaceBook like button.

Hopefully Facebook will add some event soon that can be used for when the popup is closed.

来源：https://stackoverflow.com/questions/20385986/catching-the-close-or-post-to-facebook-event-of-the-facebook-comment-box