Question

I want to use the Facebook registration plugin for a signup form on a social hub site, but I want to change the button to say Sign Up instead of Register. Can this be done?? It seems like a simple task but Facebook are not making it easy. It seems the button is handled on their servers and can’t be touched. Any suggestions would be greatly appreciated.

Answer 1

If you want to use the plug and play Registration functionality there is no option provided to change the wording. You could write your own form that submits the correct call to their APIs, but that would mostly defeat the purpose of using the Registration plugin.

You may be able to override their CSS (I haven’t tested this)

If you look at the rendered source of the Registration plug in, you’ll find the button looking something like this:

<label class="fbRegistrationRegisterButton uiButton uiButtonConfirm uiButtonLarge" id="fbRegistrationRegisterButtonPrefilled" for="u298205_7">
   <input value="Register" type="submit" id="u298205_7">
</label>

The input ID will obviously not always be that particular string, but the id of the label will likely always be ‘fbRegistrationRegisterButtonPrefilled’. Creating your own div around the whole plugin and attempting to use your own CSS to override what that class does to the label may work. Or using Javascript to find any input within a label tag with that id and adding in-line CSS to replace their image with one of your own could also work.

However, this code is all dynamically generated by Facebook and you’d have to keep on top of any changes that may affect these things, which ultimately is probably not worth it even if these methods did work. The road with less headaches is to just accept that ‘Register’ and ‘Sign Up’ are close enough to each other for most users to understand, and control of these details are the tradeoff you make to use the Facebook plugins.