Question

I have just tried to use the Facebook registration plugin inside an iframe page tab.

In case anyone is wondering why I would want to do this, I want to use the Facebook registration plugin to create a newsletter signup form on my FB page.

I tried with this code:

<iframe src="https://www.facebook.com/plugins/registration.php?
             client_id=113869198637480&
             redirect_uri=&
             fields=name,birthday,gender,location,email"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        width="100%"
        height="330">
</iframe>

and this code:

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js#appId={YOUR_APP_ID}&xfbml=1"></script>

<fb:registration 
  fields="name,birthday,gender,location,email" 
  redirect-uri=""
  width="530">
</fb:registration>

In both cases I used the APP_ID of the page tab application, and the canvas url for that page tab, but I filled out the website field with the website being used.

WHen I take out the pre-filled FB info and fill out the form, a var_dump on the receiving page gives out the right info, but when I submit it with the pre-filled FB info, it does a popup saying, you are registering with APP_NAME_HERE, if you want to do this click continue, or undo if you don’t (something like that) and when I click continue nothing happens.

I have used Firebug to inspect the page, and I think that the data is being sent to another iframe, but I don’t know how to access it. I have tried changing target to _top, _self and _parent but this didn’t work either. I also tried creating a new app specifically using the website attribute, and that failed in the same way too. ANy help gratefully received.

Answer 1

As far as I can tell, the target attribute is broken when using pre-filled info. Perhaps it has something to do with the way the flow must happen when the confirmation popup appears, but AFAIK it’s not documented that the two cannot be used together. In any case, the pre-filled data seems to have the effect of forcing target=_top no matter what you specify in the attributes.

That being the case, you will have to specify an external page address as the redirect_uri and process the data there and then redirect back to the Facebook page address. If necessary you can pass some data back using the app_data parameter in the query string.