Placing fb:multi-friend-selector (friend invite form) into an fb:dialog (facebook popup)

Thursday, 03 December 2009 13:45

Recently I have been doing a lot of work with Facebook apps, and occasionally I came across issues such as this one with the FBML (Facebook Markup Language) and FBJS (Facebook JavaScript) where they seemed very difficult or impossible to do. I was trying to make a simple popup with my FBML application (note not Iframe applicaiton) and the popup using the fb:dialog element is not adjustable in its size, so instead of attempting to adjust that I change the row count of the invitation form, which was almost there. Then by removing the border it was only 2 pixels out so I did a little CSS hack using negative margins. By making the above modifications to the original code example I got from the facebook wikipedia page I have managed to make an easy to modify friend invitation code correctly using Facebooks FBML. If anyone has any issues with the below FBML then let me know, This first part is the file which actually displays the facebook multiple friend invitation form for facebook applications anf facebook connect:

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

<div style="margin-left:-5px;">
 
    <fb:request-form type="The app name" invite="true" method="POST"
         action="http://apps.facebook.com/appurl" content="[inviteContent]">
 
  	<fb:multi-friend-selector actiontext="Some action text here for the friends invited"
             showborder="false" rows="3" cols="3" />
 
    </fb:request-form>
 
</div>
 

As you can see the above shows the fb:request-form necessary to contain the fb:multi-friend-selector, but the most important three parts of this code is the amount of cols, the div containing, and the showborder attribute. With this specific combination the facebook multiple friend invite form fits perfectly inside the facebook dialog popup. For those who don't know, the below code shows you how to put this into a dialog, and a link which will launch the dialog (facebook popup) containing the multiple friend invitiation form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<a href="#" title="Invite friends" class="btnInviteFriends"
	clicktoshowdialog="inviteFriends">
 
	<img src="http://my.domain.com/images/btnInviteFriends.jpg"
		alt="Invite friends" />
</a>
 
<fb:dialog id="inviteFriends" cancel_button="true">
	<fb:dialog-content>
        	<div style="margin-left:-5px;">
 
			<fb:request-form type="My application" invite="true" method="POST"
				action="http://apps.facebook.com/appurl" content="[inviteContent]">
 
				<fb:multi-friend-selector
				actiontext="You have been invited to [NAME] application"
				showborder="false" rows="3" cols="3" />
 
			</fb:request-form>
		</div>
	</fb:dialog-content>
 
	<fb:dialog-title>Invite your friends to my application</fb:dialog-title>
</fb:dialog>