New updates and best practices for implementing Registration

We launched the Registration plugin in mid-December to help streamline the way users can sign up for accounts on your site, and connect those accounts with Facebook. We've received great feedback from some of the sites that have integrated it so far, and added support for additional validation options to make this easier to integrate with more advanced registration flows.

New advanced features

We’ve added custom client side and asynchronous validation to the Registration plugin.

To validate fields and provide custom error messages whenever a user blurs a field or submits the form, you can now use client side validation on the XFBML version of the plugin. Simply pass the name of a single global function as the onvalidate param to <fb:registration>. This function will be called whenever a user blurs a field or submits the form.

Example:

<fb:registration redirect-uri="http://developers.facebook.com/tools/echo" 
 fields='[
   {"name":"name"},
   {"name":"foo","description":"Type foo","type":"text"},
   {"name":"bar","description":"Type bar","type":"text"},
   {"name":"facebooker","description":"Pick Paul","type":"select","options":
     {"coder":"Paul","pm":"Austin","partners":"Cat"}},
   {"name":"check","description":"Check this","type":"checkbox"},
   {"name":"date","description":"Dec 16 2010","type":"date"},
   {"name":"city","description":"Calgary","type":"typeahead","categories":
     ["city"]}]' 
 onvalidate="validate"></fb:registration> 

<script> 
function validate(form) {
  errors = {};
  if (form.foo !== "foo") {
    errors.foo = "You didn't type foo";
  }
  if (form.bar !== "bar") {
    errors.bar = "You didn't type bar";
  }
  if (form.facebooker !== "coder") {
    errors.facebooker = "Pick the geeky one";
  }
  if (!form.check) {
    errors.check = "Check the little box";
  }
  if (form.date !== '12/16/2010') {
    errors.date = "That isn't the launch date";
  }
  if (form.city.id !== '111983945494775') {
    errors.city = "That isn't Calgary, Alberta";
  }
  return errors;
}
</script>

If you have to check something on your server (e.g. if a username is taken), you can use async validation to return null and then use the second parameter to reply with any errors.

You can learn more about these advanced features and view complete examples by visiting our documentation.

Results & Best Practices

A wide variety of sites across the web including eBay Classifieds, Car & Driver, ReverbNation (select “Fan”), Chegg and others are using the Registration plugin to effectively allow users to register with their Facebook account and find their friends on the site. Use the following best practices to increase conversions:

• Streamlined Login flow. After users complete registration, sites automatically log these users into their site whenever they are logged into Facebook. You can do this by calling the getLoginStatus method.
• Using the right Login button. If you’ve implemented Registration, it’s important that you also add the following Login button wherever you allow users to login to your site: <fb:login-button registration-url="<insert your url with the registration>" />. This button ensures that users logging in are signed in appropriately and redirects users that haven’t registered to the Registration plugin url (registration-url). More about our recommended user flows here.

Paul has been busy registering for thousands of sites with the registration plugin. Keep them coming!