Connect/Integrating an Invite Form into Your Website
From Facebook Developer Wiki
Contents |
Creating a Full Multi-friend Selector Request or Invite
Displaying the full fb:multi-friend-selector form is easy. You can do so utilizing the fb:request-form and fb:multi-friend-selector FBML tags, along with an fb:serverfbml XFBML tag.
Note: XFBML tags are meant to run on your website using Facebook Connect. FBML tags can only run on your website in the context of an fb:serverfbml XFBML tag) Here is how it would have been done in the SocialToo.com example above:
- You'll first need to provide the user a way to log in via Facebook Connect. Please read our getting started guide to learn more.
- After the user is logged in through Facebook Connect, provide the following code on a page somewhere that you want your users to invite their friends:
- <fb:serverfbml style="width: 776px;"> <script type="text/fbml"> <fb:fbml> <fb:request-form action="http://socialtoo.com/ignore/fb_friends_msg" method="POST" invite="true" type="SocialToo" content="<fb:name uid='(facebook id of user goes here)' useyou='false' /> is a member of SocialToo.com and would like to share that experience with you. To register, simply click on the "Register" button below.<fb:req-choice url="http://socialtoo.com?facebook_login=1" label="Register" />[% END %]"> <fb:multi-friend-selector showborder="false" actiontext="Invite your Facebook Friends to use SocialToo" /> </fb:request-form> </fb:fbml> </script> </fb:serverfbml>
In the example above, the "action" attribute is the URL Facebook posts to if the user clicks "Ignore". Use this to redirect the user to another page or provide them with a custom message of some sort, or perhaps just record that they were already invited so you don't have to display their picture in the future. The "invite" attribute is what defines this as an "invite" or a "request". If true, it gets marked as an invite.
The "content" attribute is what a user's friends will see when they receive the request. This is just FBML.
Then, within the fb:request-form you'll always want to include a friend selector of some sort. In this case, we specify a fb:multi-friend-selector tag, specifying text to display, encouraging the user to invite their friends. Note that the fb:request-form and fb:multi-friend-selector tags must be wrapped in fb:serverfbml tags to work on your website.
Yes - it's really that simple - just copy and paste the code and you're done! Now, let's try this with just a condensed multi friend selector.
Creating a Condensed Multi-friend Selector Request or Invite
If you need something more simple, you can create a condensed multi-friend selector. It's not much different than what you did to render the full multi-friend selector containing a user's friends. Here is what you need to do:
- Make sure the user is logged in via Facebook Connect.
- Then, as above, copy code similar to this onto the page:
- <fb:serverfbml style="width: 776px;"> <script type="text/fbml"> <fb:fbml> <fb:request-form action="http://socialtoo.com/ignore/fb_friends_msg" method="POST" invite="true" type="SocialToo" content="<fb:name uid='(facebook id of user goes here)' useyou='false' /> is a member of SocialToo.com and would like to share that experience with you. To register, simply click on the "Register" button below.<fb:req-choice url="http://socialtoo.com?facebook_login=1" label="Register" />[% END %]"> <fb:multi-friend-selector showborder="false" actiontext="Invite your Facebook Friends to use SocialToo" condensed="true" /> </fb:request-form> </fb:fbml> </script> </fb:serverfbml>
Note: The only difference between this and the above example is that we added a condensed="true" attribute in the fb:multi-friend-selector. Doing so makes a little box that looks something like this:
Handling the Response from a Request or Invite
Once you have posted XFBML on a site to display the friend invite or request form to a user, you'll want to add something in your back end code that can track the friends that were just invited by that user. Facebook adds the parameters, "ids[]", and "typeahead" to the URL it posts to when a user submits the form.
You'll want to take the list of IDs (a 0-based array), and track which friends a user has invited. Then, you can add these to the exclude list in the form the next time you display it for the user in order to keep them from inviting their friends more than once. In addition, the "typeahead" parameter sent on POST is the text entered into the type-ahead box of your friend selector. You may be able to find some useful things to do with that information as well.
Be sure to check out all of this information in detail in the fb:request-form documentation.
Allocations, Limits, and Detecting Your Remaining Requests
Like applications on Facebook, every website utilizing Facebook Connect is subject to limits on how often they can send requests and invites to users. Those limits are based on user feedback about your site's use of Facebook's communication channels (email, notifications, and requests), subject to how well the website adheres to the Platform Principles and Policies and the way it encourages users to share information with each other. Each day, Facebook allocates a certain number of requests allowed in that day per user. This number will show automatically in the multi-friend selector form the user sees, allowing them to select only that many friends per day. You can also look it up under the User Response tab under your application's Insights.
If you need to detect that limit programatically, Facebook provides the admin.getAllocation API call for you to retrieve such. Just include "requests_per_day" as your integration_point_name variable, and Facebook will return to you the number of requests remaining.
Next Step: Finding Friends through Facebook
Another useful application of invites and requests is the ability to utilize fb:connect-form to automatically associate your users' friends with their Facebook accounts if they have one. This can serve as a useful way for your users to find new friends they didn't know already existed on your site. To do so, you'll want to read about Friend Linking.

