How To – Add an Invite Box To Your Facebook Fan Page with FBML
Having a Facebook Fan Page is all well and good, and we’ve been looking over the past few weeks how to create a facebook fan page, and also how to insert HTML into Facebook Fan Pages, now the final part – how to use FBML to create facebook features for your facebook fan page.
FBML is an incredibly diverse and there’s the substansial FBML Wiki on it, so it’s easy to get lost. However, there is really only one thing you need for FBML. Most of it surrounds applications, not necessarily fan pages. There’s really only one Facebook feature you’d want for your Facebook Fan Page – Inviting People to Your Facebook Fan Page
How To Create a “Invite Your Friends” Box For Your Facebook Fan Page
Very simple, this is the code you will need:-
<fb:fbml> <div style="padding: 10px; clear: both;"> <fb:request-form method="post" type="<a href="http://www.gospelrhys.co.uk/offto/facebook" style="" rel="nofollow" onmouseover="self.status='http://www.gospelrhys.co.uk/offto/facebook';return true;" onmouseout="self.status=''">FACEBOOK FAN PAGE</a> NAME" invite="true" content="Text to invite your friends. <fb:req-choice url='<a href="http://www.gospelrhys.co.uk/offto/facebook" style="" rel="nofollow" onmouseover="self.status='http://www.gospelrhys.co.uk/offto/facebook';return true;" onmouseout="self.status=''">FACEBOOK FAN PAGE</a> URL' ' label='GO' /> "> <fb:multi-friend-selector actiontext="Invite Box Title" rows="3" showborder="true" condensed="false" style="width: 300px;" /> </fb:request-form> </div> </fb:fbml>
Simple, but it needs a bit of explanation:-
<fb:fbml> - These open/close tags mimic the <html> tags, and allows you to use FBML within a page.
<fb:request-form> - This is similar to the <form> tag, and opens a form, and has a number of attributes:-
- type: this is the app or fan page associated with the form. In this case, it’s your fan page name (including spaces, if need be. For example, mine would be “The Gospel According To Rhys”).
- invite: this states whether or not you want to send an invite.
- Content: This will be what your invitee sees on their invite.
<fb:req-choice> - This places 2 or 3 buttons on the page, which simply a yes/no choice. The “Yes” (which is defined by the “label” field), will go to whatever’s in the URL field.
<fb:multi-friend-selector> – This is the very simple friend request form, that people have seen a million times before. There are certain things you can add to it as attributes:-
- actiontext:The title of the invite box
- width: width of the box
- rows: how many rows are visible
- showborder: show the border of the box
Word of Warning
Small word of warning, there is talk of changing the way this fbml works, so the multi-friend-selector may be depreciated in the next year or so. I will post a post up as alternative if/when this happens.
Questions? Anything You Want Adding?
If you want anything added to this, or anything you want to learn, do let me know!
Your Homework
Add an invite to your facebook fan page, and share it in the comments!
Tags: facebook fan page, fbml, How To | Comments: 11 Comments
Rhys Wynne, the author of this blog, is a 20 something web designer from Colwyn Bay. 
Hey Rhys,
Cool tip! This will definitely come in handy. It’s kind of funny that this functionality wasn’t built into Fan Pages to begin with, but it’s nice that it’s a pretty simple code fix.
I’ll thank you anyway! A nice addition would be a screenshot of the form.
Really cute tips to add the function to a fan page, will try it later.
I’d love to learn how you put on your subscription box for your newsletter. I assume it’s really simple, but that’d make a great tutorial!
Done! Here is mine: (Though I didn’t opt for the invite box in the end, though I did have it in there for ages!)
http://www.facebook.com/pages/SuperCarlycouk/169230599759?v=app_4949752878&ref=nf
Have been trying out the invite form. When I click through and get to the preview of the invite I’m sending to friends, it shows “(I) sent you an invitation using static FBML” then has my custom text below.
Can you change this message? I don’t want the FBML application to be listed at all in our invites. I’d like to have just the custom message display.
Ditto what Michelle says. How do we get rid of the “using static FBML” part?
Thanks for the guidance and inspiration here Rhys! Just finished my first FBML fanpage for my g/f’s book! Now I need to get her 25fans by morning so I can grab a ‘username’ for it!
http://www.facebook.com/pages/Matrix-Reimprinting-Book/308549639939?v=app_4949752878
I don’t understand where you post the code?
Hi!
I´ve tried to make it as a box, but now there is no “Send”-button. What should I do?
Look here: http://www.facebook.com/pages/LocoLokicom/269733201675?ref=ts
does the code still work? and how does one solve the ‘static fbml’ issue?