Question

I’m using XFBML to load a like button into my page and I hooked an event to my button.

The problem is that the event is trigger after the user fill the comment box (edge-box).

I already tried to hide it with CSS but the problem still remains. The user needs to click anywhere on the page to trigger my callback function.

Here a sample of code :

FB.Event.subscribe('edge.create', function(response) {
    window.location = "[URL]";
}

And my CSS :

.fb_edge_comment_widget { display: none !important; }

On of the solution could be to find a way to disable the comment box, but it doesn’t seem possible.

Thx.

Answer 1

The Like Button documentation contains a way to prevent the comment box on the Like Button from appearing, or at least, outlines the conditions under which it shouldn’t appear:

“If you are using the XFBML version of the Like button, users will always have the option to add a comment. If you are using the Iframe version of the button, users will have the option to comments if you are using the ‘standard’ layout with a width of at least 400 pixels. If users do add a comment, the story published back to Facebook is given more prominence.”

[Edit: Alternative 2 below]

Another option is to not use the Like Button plugin at all and instead switch to using the new built in Open Graph ‘Like’ action. This involves a few steps:
1. Configure your app in the Developer Dashboard to add the ‘like’ global action.
2. Create your own custom like button
3. Attach an API call to https://graph.facebook.com/USERID/og.likes to that button (with parameters object and access_token)

Given that this option would mean that you control pretty much all of the client-side code, you should have no problems at all tracking the Like action and then performing any action you want afterwards.