When developing a Facebook application, there are plenty of platform integration . 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).
You can use Friends Connection to introduce me to your other friends.
I can't wait to meet and chat with them!
<fb:req-choice url='http://apps.facebook.com/friendsconnection/index.htm' label='Make new friends' />
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:
- The main heading
- The text on the invite button
- The text that will be sent to prospective application users, (ie. the invitation panel shown below).
- 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 < and > 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.
