Question

I have a website with Facebook integration. The homepage has a few Like buttons, which are popular, and a login button, which is not. I’d like to attach an event to the Like buttons which will make them de facto login buttons – that is, in addition to everything Facebook is doing, I want to take the opportunity to request extended permissions for my app.

It doesn’t work, and here’s what I know about why:

1. I’m listening for clicks using the following call:
   FB.Event.subscribe(“edge.create”, function (obj) { /* my callback */ });
2. The edge.create event is fired when Facebook FINISHES processing the click.
3. Facebook processes the click asynchronously, deferring during completion of a request-response cycle.
4. Javascript code executed after this async wait is not part of the same stack, and lacks the blessings conferred by the user action.
5. The means that Facebook provides to request extended permissions involves creating a popup window, and most modern browsers include a popup blocker which rejects the call outside of a stack triggered by a user action.

This chain leads to the result that handlers fired on edge.create are unable to request extended permissions. I can think of two classes of solutions:

1. Find a way to listen on the original click, rather than after Facebook receives the click, sends a request, receives a response, and finally fires the global handler
2. Find an alternate UI for requesting permissions that doesn’t involve a popup

Nothing I’ve found in researching has shown me an easy way to do either of these. On solution 1, FBJS provides an addEventListener method, but as far as I can tell FBJS has nothing to do with my case (integration on a website that I own), so I can’t use that to catch the click. On solution 2, Facebook’s own documentation for FB.login says the following:

You should only call this on a user event as it opens a popup. Most browsers block popups, unless they were initiated from a user event, such as a click on a button or a link.

(Source: https://developers.facebook.com/docs/reference/javascript/FB.login/)

So I’m at a dead end, but it seems like a terribly artificial problem – does Facebook want me to be able to request permissions upon click of a Like button, or not? If so, what am I missing? If not, why are they implementing this restriction in the UI layer?

Answer 1

Facebook Like buttons exist inside of an <iframe>. As such there is no way for you to capture or intercept the button’s click event, or even to have a click event on the <iframe> itself as far as I can determine.

Perhaps you could start the page out displaying your own buttons that look like Facebook Like buttons, and then you can handle clicks on those as normal. You could wire them so that on the first click they request permissions and then replace all your custom Like buttons with actual Like buttons.