My website has Facebook integration, with Like buttons on the homepage that are popular and a login button that is not. I want to make the Like buttons also function as login buttons by requesting extended permissions for my app when they are clicked.
I have encountered an issue with this setup:
- I'm using the code: FB.Event.subscribe("edge.create", function (obj) { /* my callback */ }); to listen for clicks.
- The edge.create event is triggered after Facebook finishes processing the click.
- Facebook processes the click asynchronously, delaying during the completion of a request-response cycle.
- Subsequent Javascript code executed after this asynchronous wait lacks user action blessings.
- The way to request extended permissions involves creating a popup window, but most modern browsers block popups initiated outside of a user-triggered stack.
As a result, handlers fired on edge.create cannot successfully request extended permissions. My possible solutions include:
- Finding a method to listen to the original click before Facebook's processing
- Exploring alternative UI options for permission requests without using a popup
Research has not yielded straightforward solutions for either approach. On option 1, FBJS offers the addEventListener method which may not apply to my case. On option 2, even Facebook's documentation acknowledges the popup limitation for FB.login calls.
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/)
I am currently stuck in navigating this issue - why does Facebook impose this restriction at the UI level if requesting permissions upon clicking a Like button seems like a logical feature? What am I missing?