When developing a Facebook application, there are plenty of platform integration points to consider. One of the most essential is the invite panel. This is where users will share your application with their friends. If there’s a bug in your invite panel, your application will never be able to “go viral” and take over world.

Technically, the official documentation does accurately describe the requirements for creating an invite panel. However, I found several gotchas when creating one, so provide the following example in JSP for interested readers. (Notes and screenshots below).

1
2
3
4
5
6
7
8
9
10
11
12

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
<c:set var="invite">
  You can use Friends Connection to introduce me to your other friends.
  I can't wait to meet and chat with them!
  &lt;fb:req-choice url='http://apps.facebook.com/friendsconnection/index.htm' label='Make new friends' /&gt;
</c:set>
 
<fb:request-form type="friends connection" content="${invite}" invite="true"
                 action="http://apps.facebook.com/YOURAPPHERE/index.htm">
  <fb:multi-friend-selector rows="4" actiontext="Connect yourself with your friends' friends" />
</fb:request-form>

The JSP above will create the following invite panel, (friend names blacked-out for privacy):

Most of this panel is as it will appear for your own application, (albeit with different friend pictures!) The following items are easy to customize:

1. The main heading
2. The text on the invite button
3. The text that will be sent to prospective application users, (ie. the invitation panel shown below).
4. The request form “type” - this is a small phrase that identifies your application

If you want to preview how the invite will look on the ‘requests’ page of prospective users, select any friend and click the button; the panel will appear as below:

Customizing the “You have an XXXXX invitation.” panel is filled with gotchas. At first glance it appears simple - you add some text using the content attribute of fb:request-form. However, it’s easy to miss the fact you must add the invite buttons to that attribute as well, in FBML format! And they must be entity-escaped to be valid XML!

To make this in a maintainable way, you can set a page request variable using c:set, and simply escape the < and > symbols into &lt; and &gt; yourself. Using single quotes for the fb:req-choice attributes avoids the need to escape double quotes.

The easiest thing to do is copy and paste the code example above, try it out, tweak it and try it some more. If you’re still at a loose end, try the official documentation pages for fb:request-form, and fb:req-choice (though don’t get side-tracked by fb:request-submit-button as it is not relevant).

If you’re still having trouble, or have any suggestions of your own to make this process a little simpler, please drop your comments in the box below.

Related Articles:

• Be strict with your FBML for Facebook notifications
• 7 essential planning tips when developing your application on Facebook Platform

Other Articles:

• Jack and the (subversion controlled) Beanstalk
• Exciting stuff on the way

My Facebook app